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
app/root/media/page.tsx
+47 -20
View File
@@ -1,6 +1,6 @@
/* eslint-disable @next/next/no-img-element */
import { ExternalLink, ImageIcon, Trash2 } from "lucide-react";
import { ExternalLink, FileType2, ImageIcon, Link2, Tag, Trash2, Upload } from "lucide-react";
import Link from "next/link";
import { redirect } from "next/navigation";
@@ -12,6 +12,13 @@ import { Button } from "@/components/ui/button";
import { CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { clearAdminSessionCookie, isAdminAuthenticated } from "@/lib/admin-auth";
import { getAdminMediaAssets } from "@/lib/media";
@@ -94,31 +101,51 @@ export default async function RootMediaPage({ searchParams }: RootMediaPageProps
<CardContent>
<form action={createMediaAssetAction} className="grid gap-4 md:grid-cols-2">
<div className="space-y-2">
<Label htmlFor="label">{copy.label}</Label>
<Input id="label" name="label" required />
<Label htmlFor="label" className="sr-only">
{copy.label}
</Label>
<div className="relative">
<Tag className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
<Input id="label" name="label" required placeholder={copy.label} className="pl-9" />
</div>
</div>
<div className="space-y-2">
<Label htmlFor="kind">{copy.kind}</Label>
<select
id="kind"
name="kind"
defaultValue="IMAGE"
className="flex h-11 w-full rounded-pill border border-border bg-background px-4 text-sm text-foreground shadow-sm"
>
<option value="IMAGE">IMAGE</option>
<option value="DOCUMENT">DOCUMENT</option>
</select>
<Label htmlFor="kind" className="sr-only">
{copy.kind}
</Label>
<div className="relative">
<FileType2 className="pointer-events-none absolute left-3 top-1/2 z-10 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
<Select name="kind" defaultValue="IMAGE">
<SelectTrigger id="kind" className="pl-9">
<SelectValue placeholder={copy.kind} />
</SelectTrigger>
<SelectContent>
<SelectItem value="IMAGE">IMAGE</SelectItem>
<SelectItem value="DOCUMENT">DOCUMENT</SelectItem>
</SelectContent>
</Select>
</div>
</div>
<div className="space-y-2 md:col-span-2">
<Label htmlFor="file">{copy.uploadFile}</Label>
<Input id="file" name="file" type="file" accept="image/*,.svg,.pdf" />
<Label htmlFor="file" className="sr-only">
{copy.uploadFile}
</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 id="file" name="file" type="file" accept="image/*,.svg,.pdf" className="pl-9 file:mr-3" />
</div>
</div>
<div className="space-y-2 md:col-span-2">
<Label htmlFor="externalUrl">{copy.externalUrl}</Label>
<Input id="externalUrl" name="externalUrl" placeholder="https://example.com/image.jpg" />
<Label htmlFor="externalUrl" className="sr-only">
{copy.externalUrl}
</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 id="externalUrl" name="externalUrl" placeholder={copy.externalUrl} className="pl-9" />
</div>
</div>
<div className="md:col-span-2">
@@ -146,11 +173,11 @@ export default async function RootMediaPage({ searchParams }: RootMediaPageProps
</CardHeader>
<CardContent className="space-y-4">
{asset.kind === "IMAGE" ? (
<div className="overflow-hidden rounded-surface border border-border bg-surface-1">
<div className="overflow-hidden rounded-lg border bg-card">
<img src={asset.url} alt={asset.label} className="h-48 w-full object-cover" />
</div>
) : (
<div className="rounded-surface border border-border bg-surface-1 px-4 py-6 text-sm text-muted-foreground">
<div className="rounded-lg border bg-card px-4 py-6 text-sm text-muted-foreground">
{asset.fileName}
</div>
)}
@@ -166,7 +193,7 @@ export default async function RootMediaPage({ searchParams }: RootMediaPageProps
</div>
{asset.usages.length > 0 ? (
<div className="space-y-2 rounded-nested border border-border bg-surface-1 px-4 py-3 text-xs text-muted-foreground">
<div className="space-y-2 rounded-md border bg-muted/40 px-4 py-3 text-xs text-muted-foreground">
{asset.usages.map((usage) => (
<p key={usage.id}>
{usage.usageType} / {usage.entityType} / {usage.fieldKey}