style: streamline media app upload component with favicon app styling
This commit is contained in:
@@ -369,8 +369,8 @@ export function FileConverter() {
|
||||
{/* Left Column: Upload and Conversion Options */}
|
||||
<div className="space-y-6">
|
||||
{/* Upload Card */}
|
||||
<Card>
|
||||
<CardContent>
|
||||
<Card className="glass">
|
||||
<CardContent className="p-6">
|
||||
{/* File upload */}
|
||||
<FileUpload
|
||||
onFileSelect={handleFileSelect}
|
||||
@@ -385,7 +385,7 @@ export function FileConverter() {
|
||||
|
||||
{/* Conversion Options Card */}
|
||||
{inputFormat && compatibleFormats.length > 0 && (
|
||||
<Card>
|
||||
<Card className="glass">
|
||||
<CardHeader>
|
||||
<CardTitle>Conversion Options</CardTitle>
|
||||
</CardHeader>
|
||||
@@ -671,8 +671,8 @@ export function FileConverter() {
|
||||
<div className="space-y-6">
|
||||
{/* Download All Button */}
|
||||
{completedCount > 0 && (
|
||||
<Card>
|
||||
<CardContent>
|
||||
<Card className="glass">
|
||||
<CardContent className="p-6">
|
||||
<Button
|
||||
onClick={handleDownloadAll}
|
||||
className="w-full"
|
||||
|
||||
@@ -241,58 +241,60 @@ export function FileUpload({
|
||||
/>
|
||||
|
||||
{selectedFiles.length > 0 ? (
|
||||
<div className="space-y-2">
|
||||
<div className="space-y-3">
|
||||
{selectedFiles.map((file, index) => {
|
||||
const metadata = fileMetadata[index];
|
||||
return (
|
||||
<div key={`${file.name}-${index}`} className="border border-border rounded-lg p-4 bg-card">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="mt-0.5">{getCategoryIcon()}</div>
|
||||
<div key={`${file.name}-${index}`} className="border border-border rounded-xl p-4 bg-card/50 backdrop-blur-sm">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="p-2 bg-primary/10 rounded-lg shrink-0">
|
||||
{getCategoryIcon()}
|
||||
</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={file.name}>
|
||||
<p className="text-sm font-semibold text-foreground truncate" title={file.name}>
|
||||
{file.name}
|
||||
</p>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
size="icon-xs"
|
||||
onClick={handleRemove(index)}
|
||||
disabled={disabled}
|
||||
className="ml-2 flex-shrink-0"
|
||||
className="rounded-full hover:bg-destructive/10 hover:text-destructive shrink-0"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
<X className="h-3.5 w-3.5" />
|
||||
<span className="sr-only">Remove file</span>
|
||||
</Button>
|
||||
</div>
|
||||
{metadata && (
|
||||
<div className="mt-2 grid grid-cols-2 gap-2 text-xs">
|
||||
<div className="mt-2 flex flex-wrap gap-4 text-[10px] text-muted-foreground uppercase tracking-wider font-bold">
|
||||
{/* File Size */}
|
||||
<div className="flex items-center gap-2 text-muted-foreground">
|
||||
<HardDrive className="h-3.5 w-3.5" />
|
||||
<div className="flex items-center gap-1.5">
|
||||
<HardDrive className="h-3 w-3" />
|
||||
<span>{metadata.size}</span>
|
||||
</div>
|
||||
|
||||
{/* Type */}
|
||||
<div className="flex items-center gap-2 text-muted-foreground">
|
||||
<File className="h-3.5 w-3.5" />
|
||||
<div className="flex items-center gap-1.5">
|
||||
<File className="h-3 w-3" />
|
||||
<span>{metadata.type}</span>
|
||||
</div>
|
||||
|
||||
{/* Duration (for video/audio) */}
|
||||
{metadata.duration && (
|
||||
<div className="flex items-center gap-2 text-muted-foreground">
|
||||
<Clock className="h-3.5 w-3.5" />
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Clock className="h-3 w-3" />
|
||||
<span>{metadata.duration}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Dimensions */}
|
||||
{metadata.dimensions && (
|
||||
<div className="flex items-center gap-2 text-muted-foreground">
|
||||
<div className="flex items-center gap-1.5">
|
||||
{inputFormat?.category === 'video' ? (
|
||||
<Film className="h-3.5 w-3.5" />
|
||||
<Film className="h-3 w-3" />
|
||||
) : (
|
||||
<FileImage className="h-3.5 w-3.5" />
|
||||
<FileImage className="h-3 w-3" />
|
||||
)}
|
||||
<span>{metadata.dimensions}</span>
|
||||
</div>
|
||||
@@ -310,7 +312,8 @@ export function FileUpload({
|
||||
variant="outline"
|
||||
onClick={handleClick}
|
||||
disabled={disabled}
|
||||
className="w-full"
|
||||
className="w-full rounded-xl"
|
||||
size="lg"
|
||||
>
|
||||
<Upload className="h-4 w-4 mr-2" />
|
||||
Add More Files
|
||||
@@ -324,17 +327,19 @@ export function FileUpload({
|
||||
onDragLeave={handleDragLeave}
|
||||
onDrop={handleDrop}
|
||||
className={cn(
|
||||
'border-2 border-dashed rounded-lg p-12 text-center cursor-pointer transition-colors',
|
||||
'hover:border-primary hover:bg-primary/5',
|
||||
'border-2 border-dashed rounded-xl p-10 text-center cursor-pointer transition-all duration-300',
|
||||
'hover:border-primary/50 hover:bg-primary/5',
|
||||
{
|
||||
'border-primary bg-primary/10': isDragging,
|
||||
'border-border bg-input': !isDragging,
|
||||
'border-primary bg-primary/10 scale-[0.98]': isDragging,
|
||||
'border-border bg-muted/30': !isDragging,
|
||||
'opacity-50 cursor-not-allowed': disabled,
|
||||
}
|
||||
)}
|
||||
>
|
||||
<Upload className="mx-auto h-12 w-12 text-muted-foreground mb-4" />
|
||||
<p className="text-sm font-medium text-foreground mb-1">
|
||||
<div className="bg-primary/10 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<Upload className="h-8 w-8 text-primary" />
|
||||
</div>
|
||||
<p className="text-sm font-semibold text-foreground mb-1">
|
||||
Drop your files here or click to browse
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
|
||||
Reference in New Issue
Block a user