feat: implement Figlet, Pastel, and Unit tools with a unified layout
- Add Figlet text converter with font selection and history - Add Pastel color palette generator and manipulation suite - Add comprehensive Units converter with category-based logic - Introduce AppShell with Sidebar and Header for navigation - Modernize theme system with CSS variables and new animations - Update project configuration and dependencies
This commit is contained in:
205
components/figlet/FontPreview.tsx
Normal file
205
components/figlet/FontPreview.tsx
Normal file
@@ -0,0 +1,205 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { toPng } from 'html-to-image';
|
||||
import { Card } from '@/components/ui/Card';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { Skeleton } from '@/components/ui/Skeleton';
|
||||
import { EmptyState } from '@/components/ui/EmptyState';
|
||||
import { Copy, Download, Share2, Image as ImageIcon, AlignLeft, AlignCenter, AlignRight, Type } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils/cn';
|
||||
import { useToast } from '@/components/ui/Toast';
|
||||
|
||||
export interface FontPreviewProps {
|
||||
text: string;
|
||||
font?: string;
|
||||
isLoading?: boolean;
|
||||
onCopy?: () => void;
|
||||
onDownload?: () => void;
|
||||
onShare?: () => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
type TextAlign = 'left' | 'center' | 'right';
|
||||
|
||||
export function FontPreview({ text, font, isLoading, onCopy, onDownload, onShare, className }: FontPreviewProps) {
|
||||
const lineCount = text ? text.split('\n').length : 0;
|
||||
const charCount = text ? text.length : 0;
|
||||
const previewRef = React.useRef<HTMLDivElement>(null);
|
||||
const [textAlign, setTextAlign] = React.useState<TextAlign>('left');
|
||||
const [fontSize, setFontSize] = React.useState<'xs' | 'sm' | 'base'>('sm');
|
||||
const { addToast } = useToast();
|
||||
|
||||
const handleExportPNG = async () => {
|
||||
if (!previewRef.current || !text) return;
|
||||
|
||||
try {
|
||||
const dataUrl = await toPng(previewRef.current, {
|
||||
backgroundColor: getComputedStyle(previewRef.current).backgroundColor,
|
||||
pixelRatio: 2,
|
||||
});
|
||||
|
||||
const link = document.createElement('a');
|
||||
link.download = `figlet-${font || 'export'}-${Date.now()}.png`;
|
||||
link.href = dataUrl;
|
||||
link.click();
|
||||
|
||||
addToast('Exported as PNG!', 'success');
|
||||
} catch (error) {
|
||||
console.error('Failed to export PNG:', error);
|
||||
addToast('Failed to export PNG', 'error');
|
||||
}
|
||||
};
|
||||
return (
|
||||
<Card className={cn('relative', className)}>
|
||||
<div className="p-6">
|
||||
<div className="space-y-3 mb-4">
|
||||
<div className="flex items-center justify-between flex-wrap gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<h3 className="text-sm font-medium">Preview</h3>
|
||||
{font && (
|
||||
<span className="text-xs px-2 py-0.5 bg-primary/10 text-primary rounded-md font-mono">
|
||||
{font}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
{onCopy && (
|
||||
<Button variant="outline" size="sm" onClick={onCopy}>
|
||||
<Copy className="h-4 w-4" />
|
||||
Copy
|
||||
</Button>
|
||||
)}
|
||||
{onShare && (
|
||||
<Button variant="outline" size="sm" onClick={onShare} title="Copy shareable URL">
|
||||
<Share2 className="h-4 w-4" />
|
||||
Share
|
||||
</Button>
|
||||
)}
|
||||
<Button variant="outline" size="sm" onClick={handleExportPNG} title="Export as PNG">
|
||||
<ImageIcon className="h-4 w-4" />
|
||||
PNG
|
||||
</Button>
|
||||
{onDownload && (
|
||||
<Button variant="outline" size="sm" onClick={onDownload}>
|
||||
<Download className="h-4 w-4" />
|
||||
TXT
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Controls */}
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<div className="flex items-center gap-1 border rounded-md p-1">
|
||||
<button
|
||||
onClick={() => setTextAlign('left')}
|
||||
className={cn(
|
||||
'p-1.5 rounded transition-colors',
|
||||
textAlign === 'left' ? 'bg-accent' : 'hover:bg-accent/50'
|
||||
)}
|
||||
title="Align left"
|
||||
>
|
||||
<AlignLeft className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setTextAlign('center')}
|
||||
className={cn(
|
||||
'p-1.5 rounded transition-colors',
|
||||
textAlign === 'center' ? 'bg-accent' : 'hover:bg-accent/50'
|
||||
)}
|
||||
title="Align center"
|
||||
>
|
||||
<AlignCenter className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setTextAlign('right')}
|
||||
className={cn(
|
||||
'p-1.5 rounded transition-colors',
|
||||
textAlign === 'right' ? 'bg-accent' : 'hover:bg-accent/50'
|
||||
)}
|
||||
title="Align right"
|
||||
>
|
||||
<AlignRight className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1 border rounded-md p-1">
|
||||
<button
|
||||
onClick={() => setFontSize('xs')}
|
||||
className={cn(
|
||||
'px-2 py-1 text-xs rounded transition-colors',
|
||||
fontSize === 'xs' ? 'bg-accent' : 'hover:bg-accent/50'
|
||||
)}
|
||||
>
|
||||
XS
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setFontSize('sm')}
|
||||
className={cn(
|
||||
'px-2 py-1 text-xs rounded transition-colors',
|
||||
fontSize === 'sm' ? 'bg-accent' : 'hover:bg-accent/50'
|
||||
)}
|
||||
>
|
||||
SM
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setFontSize('base')}
|
||||
className={cn(
|
||||
'px-2 py-1 text-xs rounded transition-colors',
|
||||
fontSize === 'base' ? 'bg-accent' : 'hover:bg-accent/50'
|
||||
)}
|
||||
>
|
||||
MD
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!isLoading && text && (
|
||||
<div className="flex gap-4 mb-2 text-xs text-muted-foreground">
|
||||
<span>{lineCount} lines</span>
|
||||
<span>•</span>
|
||||
<span>{charCount} chars</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div
|
||||
ref={previewRef}
|
||||
className={cn(
|
||||
'relative min-h-[200px] bg-muted/50 rounded-lg p-4 overflow-x-auto',
|
||||
textAlign === 'center' && 'text-center',
|
||||
textAlign === 'right' && 'text-right'
|
||||
)}
|
||||
>
|
||||
{isLoading ? (
|
||||
<div className="space-y-3">
|
||||
<Skeleton className="h-6 w-3/4" />
|
||||
<Skeleton className="h-6 w-full" />
|
||||
<Skeleton className="h-6 w-5/6" />
|
||||
<Skeleton className="h-6 w-2/3" />
|
||||
<Skeleton className="h-6 w-full" />
|
||||
<Skeleton className="h-6 w-4/5" />
|
||||
</div>
|
||||
) : text ? (
|
||||
<pre className={cn(
|
||||
'font-mono whitespace-pre overflow-x-auto animate-in',
|
||||
fontSize === 'xs' && 'text-[10px]',
|
||||
fontSize === 'sm' && 'text-xs sm:text-sm',
|
||||
fontSize === 'base' && 'text-sm sm:text-base'
|
||||
)}>
|
||||
{text}
|
||||
</pre>
|
||||
) : (
|
||||
<EmptyState
|
||||
icon={Type}
|
||||
title="Start typing to see your ASCII art"
|
||||
description="Enter text in the input field above to generate ASCII art with the selected font"
|
||||
className="py-8"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user