valknar/kit-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add cardBtn style for card title row buttons

Browse Source 
Smaller variant for buttons that sit next to section labels in card headers
(Preview, Color, Results rows). Applied to QRPreview, FontPreview,
ColorManipulation, and FileConverter.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Sebastian Krüger
2026-03-03 10:36:19 +01:00
parent 3305b12c02
commit 6ecdc33933
5 changed files with 17 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
components/ascii/FontPreview.tsx
View File

@@ -13,7 +13,7 @@ import {
MessageSquareCode,
Type,
} from 'lucide-react';
import { cn, actionBtn } from '@/lib/utils';
import { cn, actionBtn, cardBtn } from '@/lib/utils';
import { toast } from 'sonner';
export type CommentStyle = 'none' | '//' | '#' | '--' | ';' | '/* */' | '<!-- -->' | '"""';
@@ -133,20 +133,20 @@ export function FontPreview({
</div>
<div className="flex items-center gap-1.5 flex-wrap">
{onCopy && (
<button onClick={onCopy} className={actionBtn}>
<button onClick={onCopy} className={cardBtn}>
<Copy className="w-3 h-3" /> Copy
</button>
)}
{onShare && (
<button onClick={onShare} className={actionBtn}>
<button onClick={onShare} className={cardBtn}>
<Share2 className="w-3 h-3" /> Share
</button>
)}
<button onClick={handleExportPNG} className={actionBtn}>
<button onClick={handleExportPNG} className={cardBtn}>
<ImageIcon className="w-3 h-3" /> PNG
</button>
{onDownload && (
<button onClick={onDownload} className={actionBtn}>
<button onClick={onDownload} className={cardBtn}>
<Download className="w-3 h-3" /> TXT
</button>
)}

4
components/color/ColorManipulation.tsx
View File

@@ -10,7 +10,7 @@ import { ExportMenu } from '@/components/color/ExportMenu';
import { useColorInfo, useGeneratePalette, useGenerateGradient } from '@/lib/color/api/queries';
import { Loader2, Share2, Plus, X, Palette, Layers } from 'lucide-react';
import { toast } from 'sonner';
import { cn, actionBtn } from '@/lib/utils';
import { cn, actionBtn, cardBtn } from '@/lib/utils';
import { MobileTabs } from '@/components/ui/mobile-tabs';
type HarmonyType = 'monochromatic' | 'analogous' | 'complementary' | 'triadic' | 'tetradic';
@@ -126,7 +126,7 @@ function ColorManipulationContent() {
<span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">
Color
</span>
<button onClick={handleShare} className={actionBtn}>
<button onClick={handleShare} className={cardBtn}>
<Share2 className="w-3 h-3" /> Share
</button>
</div>

4
components/media/FileConverter.tsx
View File

@@ -17,7 +17,7 @@ import { addToHistory } from '@/lib/media/storage/history';
import { downloadBlobsAsZip, generateOutputFilename } from '@/lib/media/utils/fileUtils';
import type { ConversionJob, ConversionFormat, ConversionOptions } from '@/types/media';
import { ShieldCheck, Download, RotateCcw, Loader2 } from 'lucide-react';
import { cn, actionBtn } from '@/lib/utils';
import { cn, actionBtn, cardBtn } from '@/lib/utils';
type MobileTab = 'upload' | 'convert';
@@ -470,7 +470,7 @@ export function FileConverter() {
Results
</span>
{completedCount > 0 && (
<button onClick={handleDownloadAll} className={actionBtn}>
<button onClick={handleDownloadAll} className={cardBtn}>
<Download className="w-3 h-3" />
{completedCount > 1 ? `Download all (${completedCount}) as ZIP` : 'Download'}
</button>

8
components/qrcode/QRPreview.tsx
View File

@@ -1,7 +1,7 @@
'use client';
import { Copy, Share2, Image as ImageIcon, FileCode, QrCode } from 'lucide-react';
import { cn, actionBtn } from '@/lib/utils';
import { cn, actionBtn, cardBtn } from '@/lib/utils';
import type { ExportSize } from '@/types/qrcode';
interface QRPreviewProps {
@@ -42,11 +42,11 @@ export function QRPreview({
Preview
</span>
<button onClick={onCopyImage} disabled={!svgString} className={actionBtn}>
<button onClick={onCopyImage} disabled={!svgString} className={cardBtn}>
<Copy className="w-3 h-3" />Copy
</button>
<button onClick={onShare} disabled={!svgString} className={actionBtn}>
<button onClick={onShare} disabled={!svgString} className={cardBtn}>
<Share2 className="w-3 h-3" />Share
</button>
@@ -77,7 +77,7 @@ export function QRPreview({
</div>
</div>
<button onClick={onDownloadSvg} disabled={!svgString} className={actionBtn}>
<button onClick={onDownloadSvg} disabled={!svgString} className={cardBtn}>
<FileCode className="w-3 h-3" />SVG
</button>
</div>

4
lib/utils/styles.ts
View File

@@ -2,6 +2,10 @@
* Shared Tailwind class strings for consistent UI patterns across tools.
*/
/** Smaller button for card title rows (copy, share, export icons next to a section label) */
export const cardBtn =
'flex items-center gap-1 px-2 py-1 text-[10px] font-mono glass rounded-md border border-border/30 text-muted-foreground hover:text-primary hover:border-primary/30 hover:bg-primary/10 transition-all disabled:opacity-40 disabled:cursor-not-allowed';
/** Standard action button used throughout all tools (copy, download, share, apply…) */
export const actionBtn =
'flex items-center gap-1.5 px-3 py-1.5 text-xs font-mono glass rounded-lg border border-border/30 text-muted-foreground hover:text-primary hover:border-primary/30 hover:bg-primary/10 transition-all disabled:opacity-40 disabled:cursor-not-allowed';