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

refactor: streamline, refine and polish

Browse Source
This commit is contained in:
Sebastian Krüger
2026-02-27 12:35:02 +01:00
parent efe3c81576
commit ee7e5ec06c
21 changed files with 606 additions and 735 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
components/media/FileUpload.tsx
View File

@@ -246,13 +246,13 @@ export function FileUpload({
const metadata = fileMetadata[index];
return (
<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="flex items-start gap-3">
<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-semibold text-foreground truncate" title={file.name}>
<p className="text-sm font-medium text-foreground truncate" title={file.name}>
{file.name}
</p>
<Button
@@ -267,22 +267,22 @@ export function FileUpload({
</Button>
</div>
{metadata && (
<div className="mt-2 flex flex-wrap gap-4 text-[10px] text-muted-foreground uppercase tracking-wider font-bold">
<div className="mt-1.5 flex flex-wrap gap-3 text-[10px] text-muted-foreground">
{/* File Size */}
<div className="flex items-center gap-1.5">
<div className="flex items-center gap-1">
<HardDrive className="h-3 w-3" />
<span>{metadata.size}</span>
</div>
{/* Type */}
<div className="flex items-center gap-1.5">
<div className="flex items-center gap-1">
<File className="h-3 w-3" />
<span>{metadata.type}</span>
</div>
{/* Duration (for video/audio) */}
{metadata.duration && (
<div className="flex items-center gap-1.5">
<div className="flex items-center gap-1">
<Clock className="h-3 w-3" />
<span>{metadata.duration}</span>
</div>
@@ -290,7 +290,7 @@ export function FileUpload({
{/* Dimensions */}
{metadata.dimensions && (
<div className="flex items-center gap-1.5">
<div className="flex items-center gap-1">
{inputFormat?.category === 'video' ? (
<Film className="h-3 w-3" />
) : (
@@ -312,10 +312,9 @@ export function FileUpload({
variant="outline"
onClick={handleClick}
disabled={disabled}
className="w-full rounded-xl"
size="lg"
className="w-full"
>
<Upload className="h-4 w-4 mr-2" />
<Upload className="h-3.5 w-3.5 mr-1.5" />
Add More Files
</Button>
</div>
@@ -327,23 +326,23 @@ export function FileUpload({
onDragLeave={handleDragLeave}
onDrop={handleDrop}
className={cn(
'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-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 bg-muted/30': !isDragging,
'border-border/50': !isDragging,
'opacity-50 cursor-not-allowed': disabled,
}
)}
>
<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 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>
<p className="text-sm font-semibold text-foreground mb-1">
Drop your files here or click to browse
<p className="text-sm font-medium text-foreground mb-0.5">
Drop files here or click to browse
</p>
<p className="text-xs text-muted-foreground">
Maximum file size: {maxSizeMB}MB per file
<p className="text-[10px] text-muted-foreground">
Max {maxSizeMB}MB per file
</p>
</div>
)}