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

style: streamline media app upload component with favicon app styling

Browse Source
This commit is contained in:
Sebastian Krüger
2026-02-26 17:52:41 +01:00
parent 1f1b138089
commit 1d72f34b65
2 changed files with 35 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
components/media/FileConverter.tsx
View File

@@ -369,8 +369,8 @@ export function FileConverter() {
{/* Left Column: Upload and Conversion Options */} {/* Left Column: Upload and Conversion Options */}
<div className="space-y-6"> <div className="space-y-6">
{/* Upload Card */} {/* Upload Card */}
<Card> <Card className="glass">
<CardContent> <CardContent className="p-6">
{/* File upload */} {/* File upload */}
<FileUpload <FileUpload
onFileSelect={handleFileSelect} onFileSelect={handleFileSelect}
@@ -385,7 +385,7 @@ export function FileConverter() {
{/* Conversion Options Card */} {/* Conversion Options Card */}
{inputFormat && compatibleFormats.length > 0 && ( {inputFormat && compatibleFormats.length > 0 && (
<Card> <Card className="glass">
<CardHeader> <CardHeader>
<CardTitle>Conversion Options</CardTitle> <CardTitle>Conversion Options</CardTitle>
</CardHeader> </CardHeader>
@@ -671,8 +671,8 @@ export function FileConverter() {
<div className="space-y-6"> <div className="space-y-6">
{/* Download All Button */} {/* Download All Button */}
{completedCount > 0 && ( {completedCount > 0 && (
<Card> <Card className="glass">
<CardContent> <CardContent className="p-6">
<Button <Button
onClick={handleDownloadAll} onClick={handleDownloadAll}
className="w-full" className="w-full"

55
components/media/FileUpload.tsx
View File

@@ -241,58 +241,60 @@ export function FileUpload({
/> />
{selectedFiles.length > 0 ? ( {selectedFiles.length > 0 ? (
<div className="space-y-2"> <div className="space-y-3">
{selectedFiles.map((file, index) => { {selectedFiles.map((file, index) => {
const metadata = fileMetadata[index]; const metadata = fileMetadata[index];
return ( return (
<div key={`${file.name}-${index}`} className="border border-border rounded-lg p-4 bg-card"> <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-3"> <div className="flex items-start gap-4">
<div className="mt-0.5">{getCategoryIcon()}</div> <div className="p-2 bg-primary/10 rounded-lg shrink-0">
{getCategoryIcon()}
</div>
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<div className="flex items-start justify-between gap-2"> <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} {file.name}
</p> </p>
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon-xs"
onClick={handleRemove(index)} onClick={handleRemove(index)}
disabled={disabled} 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> <span className="sr-only">Remove file</span>
</Button> </Button>
</div> </div>
{metadata && ( {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 */} {/* File Size */}
<div className="flex items-center gap-2 text-muted-foreground"> <div className="flex items-center gap-1.5">
<HardDrive className="h-3.5 w-3.5" /> <HardDrive className="h-3 w-3" />
<span>{metadata.size}</span> <span>{metadata.size}</span>
</div> </div>
{/* Type */} {/* Type */}
<div className="flex items-center gap-2 text-muted-foreground"> <div className="flex items-center gap-1.5">
<File className="h-3.5 w-3.5" /> <File className="h-3 w-3" />
<span>{metadata.type}</span> <span>{metadata.type}</span>
</div> </div>
{/* Duration (for video/audio) */} {/* Duration (for video/audio) */}
{metadata.duration && ( {metadata.duration && (
<div className="flex items-center gap-2 text-muted-foreground"> <div className="flex items-center gap-1.5">
<Clock className="h-3.5 w-3.5" /> <Clock className="h-3 w-3" />
<span>{metadata.duration}</span> <span>{metadata.duration}</span>
</div> </div>
)} )}
{/* Dimensions */} {/* Dimensions */}
{metadata.dimensions && ( {metadata.dimensions && (
<div className="flex items-center gap-2 text-muted-foreground"> <div className="flex items-center gap-1.5">
{inputFormat?.category === 'video' ? ( {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> <span>{metadata.dimensions}</span>
</div> </div>
@@ -310,7 +312,8 @@ export function FileUpload({
variant="outline" variant="outline"
onClick={handleClick} onClick={handleClick}
disabled={disabled} disabled={disabled}
className="w-full" className="w-full rounded-xl"
size="lg"
> >
<Upload className="h-4 w-4 mr-2" /> <Upload className="h-4 w-4 mr-2" />
Add More Files Add More Files
@@ -324,17 +327,19 @@ export function FileUpload({
onDragLeave={handleDragLeave} onDragLeave={handleDragLeave}
onDrop={handleDrop} onDrop={handleDrop}
className={cn( className={cn(
'border-2 border-dashed rounded-lg p-12 text-center cursor-pointer transition-colors', 'border-2 border-dashed rounded-xl p-10 text-center cursor-pointer transition-all duration-300',
'hover:border-primary hover:bg-primary/5', 'hover:border-primary/50 hover:bg-primary/5',
{ {
'border-primary bg-primary/10': isDragging, 'border-primary bg-primary/10 scale-[0.98]': isDragging,
'border-border bg-input': !isDragging, 'border-border bg-muted/30': !isDragging,
'opacity-50 cursor-not-allowed': disabled, 'opacity-50 cursor-not-allowed': disabled,
} }
)} )}
> >
<Upload className="mx-auto h-12 w-12 text-muted-foreground mb-4" /> <div className="bg-primary/10 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
<p className="text-sm font-medium text-foreground mb-1"> <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 Drop your files here or click to browse
</p> </p>
<p className="text-xs text-muted-foreground"> <p className="text-xs text-muted-foreground">