mohs/sass-mohfarawati
1
0
Fork 0
Code Issues Pull Requests Actions 8 Packages Projects Releases Wiki Activity

Refine root UI around shadcn primitives
CI / quality (push) Waiting to run
Details

Browse Source
This commit is contained in:
MOH
2026-03-07 22:28:52 +01:00
parent 985fbe1745
commit a18370d003
36 changed files with 1344 additions and 597 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/root/media-field-picker.tsx
+40 -29
View File
@@ -3,7 +3,7 @@
/* eslint-disable @next/next/no-img-element */
import type { MediaKind } from "@prisma/client";
import { Check, Search } from "lucide-react";
import { Check, Link2, Search, Type, Upload } from "lucide-react";
import { useEffect, useId, useMemo, useRef, useState } from "react";
import type { MediaOption } from "@/lib/media";
@@ -110,9 +110,9 @@ export function MediaFieldPicker({
}, [serializedValue]);
return (
<div className="space-y-3 rounded-surface border border-border p-4">
<div className="space-y-3 rounded-lg border bg-card p-4 shadow-sm">
<div className="space-y-2">
<Label>{title}</Label>
<Label className="sr-only">{title}</Label>
<div className="flex flex-wrap gap-2">
{modeOptions.map((mode) => (
<button
@@ -128,10 +128,10 @@ export function MediaFieldPicker({
})
}
className={cn(
"rounded-pill border px-4 py-2 text-sm transition-colors",
"rounded-md border px-4 py-2 text-sm transition-colors",
value.mode === mode
? "border-border-strong bg-foreground text-background"
: "border-border bg-background text-foreground/75 hover:border-border-strong hover:text-foreground",
? "border-input bg-primary text-primary-foreground"
: "border-input bg-background text-foreground/75 hover:bg-accent hover:text-accent-foreground",
)}
>
{mode}
@@ -150,7 +150,7 @@ export function MediaFieldPicker({
isCleared: true,
})
}
className="rounded-pill border border-destructive/25 px-4 py-2 text-sm text-destructive transition-colors hover:border-destructive/50 hover:bg-destructive/5"
className="rounded-md border border-destructive/25 px-4 py-2 text-sm text-destructive transition-colors hover:bg-destructive/5"
>
{clearLabel}
</button>
@@ -167,37 +167,48 @@ export function MediaFieldPicker({
{value.mode !== "library" ? (
<div className="space-y-2">
<Label>Label</Label>
<Input
value={value.label}
onChange={(event) => onChange({ ...value, label: event.target.value, isCleared: false })}
placeholder="Homepage Hero"
/>
<Label className="sr-only">Label</Label>
<div className="relative">
<Type className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
<Input
value={value.label}
onChange={(event) => onChange({ ...value, label: event.target.value, isCleared: false })}
placeholder="Label"
className="pl-9"
/>
</div>
</div>
) : null}
{value.mode === "upload" ? (
<div className="space-y-2">
<Label>{fileLabel ?? fileFieldName}</Label>
<Input name={fileFieldName} type="file" accept={accept} />
<Label className="sr-only">{fileLabel ?? fileFieldName}</Label>
<div className="relative">
<Upload className="pointer-events-none absolute left-3 top-1/2 z-10 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
<Input name={fileFieldName} type="file" accept={accept} className="pl-9 file:mr-3" />
</div>
</div>
) : null}
{value.mode === "external" ? (
<div className="space-y-2">
<Label>{externalLabel ?? "External URL"}</Label>
<Input
value={value.url}
onChange={(event) => onChange({ ...value, url: event.target.value, isCleared: false })}
placeholder="https://example.com/image.jpg"
/>
<Label className="sr-only">{externalLabel ?? "External URL"}</Label>
<div className="relative">
<Link2 className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
<Input
value={value.url}
onChange={(event) => onChange({ ...value, url: event.target.value, isCleared: false })}
placeholder={externalLabel ?? "External URL"}
className="pl-9"
/>
</div>
</div>
) : null}
{value.mode === "library" ? (
<div className="space-y-3">
<Label>{libraryLabel ?? "Media Library"}</Label>
<div className="space-y-2 rounded-nested border border-border bg-surface-1 p-3">
<Label className="sr-only">{libraryLabel ?? "Media Library"}</Label>
<div className="space-y-2 rounded-md border bg-card p-3">
<div className="relative">
<Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
<Input
@@ -227,10 +238,10 @@ export function MediaFieldPicker({
})
}
className={cn(
"flex w-full items-center gap-3 rounded-nested border px-3 py-2 text-left transition-colors",
"flex w-full items-center gap-3 rounded-md border px-3 py-2 text-left transition-colors",
isActive
? "border-border-strong bg-background"
: "border-border bg-background/70 hover:border-border-strong hover:bg-background",
? "border-input bg-accent/40"
: "border-input bg-background hover:bg-accent/20",
)}
>
{option.url ? (
@@ -247,7 +258,7 @@ export function MediaFieldPicker({
);
})
) : (
<div className="rounded-nested border border-dashed border-border px-3 py-4 text-sm text-muted-foreground">
<div className="rounded-md border border-dashed border-input px-3 py-4 text-sm text-muted-foreground">
No media found.
</div>
)}
@@ -258,11 +269,11 @@ export function MediaFieldPicker({
{previewUrl ? (
value.kind === "IMAGE" ? (
<div className="overflow-hidden rounded-nested border border-border bg-surface-1">
<div className="overflow-hidden rounded-md border bg-card">
<img src={previewUrl} alt={value.label || title} className="h-40 w-full object-cover" />
</div>
) : (
<div className="rounded-nested border border-border bg-surface-1 px-4 py-3 text-sm text-muted-foreground">
<div className="rounded-md border bg-card px-4 py-3 text-sm text-muted-foreground">
{previewUrl}
</div>
)