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

34
components/favicon/FaviconFileUpload.tsx
View File

@@ -88,14 +88,14 @@ export function FaviconFileUpload({
/>
{selectedFile ? (
<div className="border border-border rounded-lg p-4 bg-card/50 backdrop-blur-sm">
<div className="flex items-start gap-4">
<div className="p-2 bg-primary/10 rounded-lg">
<FileImage className="h-6 w-6 text-primary" />
<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>
<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={selectedFile.name}>
<p className="text-sm font-medium text-foreground truncate" title={selectedFile.name}>
{selectedFile.name}
</p>
<Button
@@ -103,18 +103,18 @@ export function FaviconFileUpload({
size="icon-xs"
onClick={onFileRemove}
disabled={disabled}
className="rounded-full hover:bg-destructive/10 hover:text-destructive"
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-2 flex gap-4 text-[10px] text-muted-foreground uppercase tracking-wider font-bold">
<div className="flex items-center gap-1.5">
<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.5">
<div className="flex items-center gap-1">
<FileImage className="h-3 w-3" />
<span>{dimensions}</span>
</div>
@@ -131,23 +131,23 @@ export function FaviconFileUpload({
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">
<p className="text-sm font-medium text-foreground mb-0.5">
Drop icon source here
</p>
<p className="text-xs text-muted-foreground">
Recommended: 512x512 PNG or SVG
<p className="text-[10px] text-muted-foreground">
512x512 PNG or SVG recommended
</p>
</div>
)}