refactor: align favicon tool with Calculate/Media blueprint
- FaviconGenerator: lg:grid-cols-5 layout (2/5 setup, 3/5 results); glass panels, native inputs, custom tab switcher (Icons/HTML/Manifest), native progress bar, empty state placeholder, mobile Setup|Results tabs - FaviconFileUpload: remove shadcn Button; match media FileUpload styling with file card, metadata chips (size, dimensions) - CodeSnippet: remove shadcn Button; dark terminal (#06060e) with hover copy button, consistent with ASCII/ExportMenu code blocks Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,9 +1,8 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { Upload, X, FileImage, HardDrive } from 'lucide-react';
|
||||
import { Upload, X, FileImage, HardDrive, Film } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils/cn';
|
||||
import { Button } from '@/components/ui/button';
|
||||
|
||||
export interface FaviconFileUploadProps {
|
||||
onFileSelect: (file: File) => void;
|
||||
@@ -26,7 +25,7 @@ export function FaviconFileUpload({
|
||||
if (selectedFile) {
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
setDimensions(`${img.width} × ${img.height}`);
|
||||
setDimensions(`${img.width}×${img.height}`);
|
||||
URL.revokeObjectURL(img.src);
|
||||
};
|
||||
img.src = URL.createObjectURL(selectedFile);
|
||||
@@ -35,49 +34,22 @@ export function FaviconFileUpload({
|
||||
}
|
||||
}, [selectedFile]);
|
||||
|
||||
const handleDragEnter = (e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (!disabled) setIsDragging(true);
|
||||
};
|
||||
|
||||
const handleDragLeave = (e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setIsDragging(false);
|
||||
};
|
||||
|
||||
const handleDragOver = (e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
};
|
||||
|
||||
const handleDrop = (e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setIsDragging(false);
|
||||
|
||||
if (disabled) return;
|
||||
|
||||
const files = Array.from(e.dataTransfer.files);
|
||||
if (files.length > 0 && files[0].type.startsWith('image/')) {
|
||||
onFileSelect(files[0]);
|
||||
}
|
||||
if (files.length > 0 && files[0].type.startsWith('image/')) onFileSelect(files[0]);
|
||||
};
|
||||
|
||||
const handleFileInput = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const files = Array.from(e.target.files || []);
|
||||
if (files.length > 0 && files[0].type.startsWith('image/')) {
|
||||
onFileSelect(files[0]);
|
||||
}
|
||||
};
|
||||
|
||||
const handleClick = () => {
|
||||
if (!disabled) fileInputRef.current?.click();
|
||||
if (files.length > 0 && files[0].type.startsWith('image/')) onFileSelect(files[0]);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full space-y-3">
|
||||
<div className="w-full">
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
@@ -88,66 +60,64 @@ export function FaviconFileUpload({
|
||||
/>
|
||||
|
||||
{selectedFile ? (
|
||||
<div className="border border-border rounded-xl p-4 bg-card/50 backdrop-blur-sm">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="p-2 bg-primary/10 rounded-lg shrink-0">
|
||||
<FileImage className="h-5 w-5 text-primary" />
|
||||
<div className="flex items-start gap-3 p-3 rounded-xl border border-border/25 bg-primary/3">
|
||||
<div className="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center shrink-0">
|
||||
<FileImage className="w-4 h-4 text-primary" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<p className="text-xs font-mono text-foreground/80 truncate" title={selectedFile.name}>
|
||||
{selectedFile.name}
|
||||
</p>
|
||||
<button
|
||||
onClick={onFileRemove}
|
||||
disabled={disabled}
|
||||
className="shrink-0 w-5 h-5 flex items-center justify-center rounded text-muted-foreground/30 hover:text-rose-400 transition-colors"
|
||||
>
|
||||
<X className="w-3 h-3" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<p className="text-sm font-medium text-foreground truncate" title={selectedFile.name}>
|
||||
{selectedFile.name}
|
||||
</p>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-xs"
|
||||
onClick={onFileRemove}
|
||||
disabled={disabled}
|
||||
className="rounded-full hover:bg-destructive/10 hover:text-destructive shrink-0"
|
||||
>
|
||||
<X className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="mt-1.5 flex gap-3 text-[10px] text-muted-foreground">
|
||||
<div className="flex items-center gap-1">
|
||||
<HardDrive className="h-3 w-3" />
|
||||
<span>{(selectedFile.size / 1024).toFixed(1)} KB</span>
|
||||
</div>
|
||||
{dimensions && (
|
||||
<div className="flex items-center gap-1">
|
||||
<FileImage className="h-3 w-3" />
|
||||
<span>{dimensions}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-1 flex flex-wrap gap-2.5 text-[10px] text-muted-foreground/40 font-mono">
|
||||
<span className="flex items-center gap-1">
|
||||
<HardDrive className="w-2.5 h-2.5" />
|
||||
{selectedFile.size < 1024 * 1024
|
||||
? `${(selectedFile.size / 1024).toFixed(1)} KB`
|
||||
: `${(selectedFile.size / (1024 * 1024)).toFixed(1)} MB`}
|
||||
</span>
|
||||
{dimensions && (
|
||||
<span className="flex items-center gap-1">
|
||||
<Film className="w-2.5 h-2.5" />{dimensions}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
onClick={handleClick}
|
||||
onDragEnter={handleDragEnter}
|
||||
onDragOver={handleDragOver}
|
||||
onDragLeave={handleDragLeave}
|
||||
onClick={() => !disabled && fileInputRef.current?.click()}
|
||||
onDragEnter={(e) => { e.preventDefault(); if (!disabled) setIsDragging(true); }}
|
||||
onDragLeave={(e) => { e.preventDefault(); setIsDragging(false); }}
|
||||
onDragOver={(e) => e.preventDefault()}
|
||||
onDrop={handleDrop}
|
||||
className={cn(
|
||||
'border-2 border-dashed rounded-xl p-8 text-center cursor-pointer transition-all duration-200',
|
||||
'hover:border-primary/40 hover:bg-primary/5',
|
||||
{
|
||||
'border-primary bg-primary/10 scale-[0.98]': isDragging,
|
||||
'border-border/50': !isDragging,
|
||||
'opacity-50 cursor-not-allowed': disabled,
|
||||
}
|
||||
'flex flex-col items-center justify-center rounded-xl border-2 border-dashed transition-all cursor-pointer text-center select-none py-8',
|
||||
isDragging
|
||||
? 'border-primary bg-primary/10 scale-[0.99]'
|
||||
: 'border-border/35 hover:border-primary/40 hover:bg-primary/5',
|
||||
disabled && 'opacity-50 cursor-not-allowed pointer-events-none'
|
||||
)}
|
||||
>
|
||||
<div className="bg-primary/10 w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-3">
|
||||
<Upload className="h-6 w-6 text-primary" />
|
||||
<div className={cn(
|
||||
'w-14 h-14 rounded-full flex items-center justify-center mb-4 transition-colors',
|
||||
isDragging ? 'bg-primary/25' : 'bg-primary/10'
|
||||
)}>
|
||||
<Upload className={cn('w-6 h-6 transition-colors', isDragging ? 'text-primary' : 'text-primary/60')} />
|
||||
</div>
|
||||
<p className="text-sm font-medium text-foreground mb-0.5">
|
||||
Drop icon source here
|
||||
<p className="text-sm font-medium text-foreground/70 mb-1">
|
||||
{isDragging ? 'Drop to upload' : 'Drop icon here or click to browse'}
|
||||
</p>
|
||||
<p className="text-[10px] text-muted-foreground">
|
||||
512x512 PNG or SVG recommended
|
||||
<p className="text-[10px] text-muted-foreground/35 font-mono">
|
||||
PNG · SVG · 512×512 recommended
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user