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

refine admin cards and form headers
CI / quality (push) Has been cancelled
Details

Browse Source
This commit is contained in:
MOH
2026-03-15 08:59:19 +01:00
parent 623b492787
commit 6caf723695
14 changed files with 371 additions and 246 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/_admin/maintenance/page.tsx
+1 -1
View File
@@ -52,7 +52,7 @@ export default async function AdminMaintenancePage() {
headerDescription={copy.subtitle}
>
<MotionFade delay={0.1}>
<AppCard>
<AppCard layer="single">
<CardContent className="space-y-4 p-6">
<p className="text-sm text-muted-foreground">{copy.maintenanceText}</p>
<div className="flex flex-wrap items-center gap-3">
app/_admin/portfolio/projects/[id]/page.tsx
+1 -1
View File
@@ -98,7 +98,7 @@ export default async function AdminPortfolioProjectPage({
</MotionFade>
<MotionFade delay={0.2}>
<AppCard level={2}>
<AppCard level={2} layer="single">
<CardContent className="flex flex-col gap-4 p-6 lg:flex-row lg:items-center lg:justify-between">
<div>
<p className="text-sm font-medium text-foreground">{copy.dangerZone}</p>
components/admin/contact-protection-form.tsx
+2 -2
View File
@@ -24,7 +24,7 @@ export function ContactProtectionForm({
return (
<form id="contact-protection-form" action={action} className="grid gap-6 xl:grid-cols-2">
<AppCard>
<AppCard layer="single">
<CardHeader>
<CardTitle>Turnstile</CardTitle>
<CardDescription>Cloudflare Schutz fuer das Kontaktformular.</CardDescription>
@@ -77,7 +77,7 @@ export function ContactProtectionForm({
</CardContent>
</AppCard>
<AppCard>
<AppCard layer="single">
<CardHeader>
<CardTitle>Rate Limiting</CardTitle>
<CardDescription>Begrenzung wiederholter Kontaktanfragen.</CardDescription>
components/admin/marquee-settings-form.tsx
+1 -1
View File
@@ -29,7 +29,7 @@ export function MarqueeSettingsForm({
<div className="grid gap-4 xl:grid-cols-4">
{rowMeta.map((row) => (
<AppCard key={`de-${row.key}`} level={2} padding="sm" className="space-y-2">
<AppCard key={`de-${row.key}`} level={2} layer="single" padding="sm" className="space-y-2">
<Label htmlFor={`${row.key}-de`} className="text-sm font-semibold text-foreground">{row.label}</Label>
<Textarea
id={`${row.key}-de`}
components/admin/media-field-picker.tsx
+2 -2
View File
@@ -89,7 +89,7 @@ export function MediaFieldPicker({
}, [serializedValue]);
return (
<AppCard level={2} padding="sm" className="space-y-4">
<AppCard level={2} layer="single" padding="sm" className="space-y-4">
<input ref={hiddenInputRef} type="hidden" name={inputName} value={serializedValue} />
<div className="flex items-start justify-between gap-4">
@@ -130,7 +130,7 @@ export function MediaFieldPicker({
</div>
</div>
<AppCard padding="sm" className="rounded-nested border-border/70">
<AppCard layer="single" padding="sm" className="rounded-nested border-border/70">
{selectedOption ? (
<div className="flex items-center gap-4">
<img
components/admin/media-library-manager.tsx
+1 -1
View File
@@ -486,7 +486,7 @@ export function MediaLibraryManager({
)
) : (
<MotionFade delay={0.18}>
<AppCard>
<AppCard layer="single">
<CardContent className="p-6 text-sm text-muted-foreground">
{copy.empty}
</CardContent>
components/admin/portfolio-categories-manager.tsx
+21 -28
View File
@@ -5,9 +5,11 @@ import { useSearchParams } from "next/navigation";
import {
FileText,
FolderPlus,
FolderTree,
Hash,
Layers3,
Pencil,
CheckCircle2,
ShieldCheck,
ShieldOff,
Text,
@@ -18,6 +20,7 @@ import type { deleteCategoryAction, upsertCategoryAction } from "@/app/_admin/po
import { AppCard } from "@/components/ui/app-card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { StatsCard } from "@/components/dashboard/stats-card";
import { CardContent } from "@/components/ui/card";
import { Checkbox } from "@/components/ui/checkbox";
import {
@@ -107,11 +110,11 @@ function CategoryLocaleFields({
const descriptionKey = `description${locale.key}` as const;
return (
<AppCard key={`${idPrefix}-${locale.key}`} level={2} padding="sm" className="space-y-4 rounded-nested">
<AppCard key={`${idPrefix}-${locale.key}`} level={2} layer="single" padding="sm" className="space-y-4 rounded-nested">
<p className="text-sm font-medium text-foreground">{locale.label}</p>
<div className="space-y-2">
<Label htmlFor={`${idPrefix}-${nameKey}`}>Name</Label>
<Label htmlFor={`${idPrefix}-${nameKey}`} className="sr-only">Name</Label>
<div className="relative">
<Text className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
<Input
@@ -126,7 +129,7 @@ function CategoryLocaleFields({
</div>
<div className="space-y-2">
<Label htmlFor={`${idPrefix}-${descriptionKey}`}>{copy.description}</Label>
<Label htmlFor={`${idPrefix}-${descriptionKey}`} className="sr-only">{copy.description}</Label>
<div className="relative">
<FileText className="pointer-events-none absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
<Textarea
@@ -165,7 +168,7 @@ function CategoryStatusFields({
</div>
<div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_220px]">
<AppCard level={2} padding="sm" className="rounded-nested">
<AppCard level={2} layer="single" padding="sm" className="rounded-nested">
<div className="flex items-start gap-3">
{isActive ? (
<ShieldCheck className="mt-0.5 h-4 w-4 text-status-success" />
@@ -224,7 +227,7 @@ function CategoryForm({
<div className="grid gap-4 lg:grid-cols-3">
<div className="space-y-2">
<Label htmlFor={`${formId}-slug`}>Slug</Label>
<Label htmlFor={`${formId}-slug`} className="sr-only">Slug</Label>
<div className="relative">
<Text className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
<Input
@@ -239,7 +242,7 @@ function CategoryForm({
</div>
<div className="space-y-2">
<Label htmlFor={`${formId}-sortOrder`}>{copy.sortOrder}</Label>
<Label htmlFor={`${formId}-sortOrder`} className="sr-only">{copy.sortOrder}</Label>
<div className="relative">
<Hash className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
<Input
@@ -249,6 +252,7 @@ function CategoryForm({
min="0"
defaultValue={values?.sortOrder ?? 0}
required
placeholder={copy.sortOrder}
className="pl-9"
/>
</div>
@@ -291,11 +295,11 @@ function EditCategoryDialog({
</DialogHeader>
<div className="grid gap-3 sm:grid-cols-3">
<AppCard level={2} padding="sm" className="rounded-nested">
<AppCard level={2} layer="single" padding="sm" className="rounded-nested">
<p className="text-xs uppercase tracking-[0.18em] text-muted-foreground">Projects</p>
<p className="mt-2 text-lg font-semibold text-foreground">{category.projectCount}</p>
</AppCard>
<AppCard level={2} padding="sm" className="rounded-nested">
<AppCard level={2} layer="single" padding="sm" className="rounded-nested">
<p className="text-xs uppercase tracking-[0.18em] text-muted-foreground">Status</p>
<div className="mt-2">
<Badge variant={category.isActive ? "success" : "warning"}>
@@ -303,7 +307,7 @@ function EditCategoryDialog({
</Badge>
</div>
</AppCard>
<AppCard level={2} padding="sm" className="rounded-nested">
<AppCard level={2} layer="single" padding="sm" className="rounded-nested">
<p className="text-xs uppercase tracking-[0.18em] text-muted-foreground">Order</p>
<p className="mt-2 text-lg font-semibold text-foreground">{category.sortOrder}</p>
</AppCard>
@@ -371,23 +375,11 @@ export function PortfolioCategoriesManager({
return (
<div className="space-y-4">
<div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
<div className="flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-muted-foreground">
<span>
Total:
{" "}
<span className="font-semibold text-foreground">{categories.length}</span>
</span>
<span>
Active:
{" "}
<span className="font-semibold text-foreground">{activeCount}</span>
</span>
<span>
Assigned:
{" "}
<span className="font-semibold text-foreground">{assignedProjects}</span>
</span>
<div className="flex flex-col gap-4 xl:flex-row xl:items-end xl:justify-between">
<div className="grid gap-4 md:grid-cols-3 xl:min-w-[620px]">
<StatsCard title="Total" value={String(categories.length)} icon={FolderTree} />
<StatsCard title="Active" value={String(activeCount)} icon={CheckCircle2} />
<StatsCard title="Assigned" value={String(assignedProjects)} icon={Layers3} />
</div>
<Dialog open={createOpen} onOpenChange={setCreateOpen}>
@@ -403,7 +395,7 @@ export function PortfolioCategoriesManager({
<DialogDescription>{copy.modalDescription}</DialogDescription>
</DialogHeader>
<AppCard level={2} padding="sm" className="rounded-nested">
<AppCard level={2} layer="single" padding="sm" className="rounded-nested">
<div className="grid gap-3 sm:grid-cols-3">
<div className="space-y-1">
<p className="text-sm font-medium text-foreground">1. Basics</p>
@@ -434,7 +426,7 @@ export function PortfolioCategoriesManager({
</Dialog>
</div>
<AppCard level={3}>
<AppCard level={3} layer="single">
<CardContent className="space-y-4 p-6">
<div className="flex items-center gap-3">
<Layers3 className="h-5 w-5 text-brand-primary" />
@@ -449,6 +441,7 @@ export function PortfolioCategoriesManager({
<AppCard
key={category.id}
level={2}
layer="single"
padding="sm"
className="rounded-nested"
>
components/admin/portfolio-project-form.tsx
+210 -89
View File
@@ -4,13 +4,18 @@ import type { PortfolioProjectViewMode, PortfolioSectionType } from "@prisma/cli
import {
ArrowDown,
ArrowUp,
BookOpenText,
BriefcaseBusiness,
CalendarDays,
CheckCircle2,
ChevronLeft,
ChevronRight,
CircleAlert,
CircleDashed,
Files,
FolderTree,
Grid2x2,
ImagePlus,
Layers3,
Link2,
Plus,
@@ -23,11 +28,14 @@ import { type ReactNode, useEffect, useRef, useState } from "react";
import { useFormStatus } from "react-dom";
import { MediaFieldPicker, type MediaFieldState } from "@/components/admin/media-field-picker";
import { StatsCard } from "@/components/dashboard/stats-card";
import { AppCard } from "@/components/ui/app-card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Separator } from "@/components/ui/separator";
import {
Select,
SelectContent,
@@ -125,10 +133,11 @@ const viewModeOptions: Array<{
value: PortfolioProjectViewMode;
label: string;
description: string;
icon: typeof Grid2x2;
}> = [
{ value: "GRID", label: "Grid", description: "Balanced modular layout." },
{ value: "STORY", label: "Story", description: "Narrative section flow." },
{ value: "CASE_STUDY", label: "Case Study", description: "Structured challenge and result view." },
{ value: "GRID", label: "Grid", description: "Balanced modular layout.", icon: Grid2x2 },
{ value: "STORY", label: "Story", description: "Narrative section flow.", icon: BookOpenText },
{ value: "CASE_STUDY", label: "Case Study", description: "Structured challenge and result view.", icon: BriefcaseBusiness },
];
const wizardSteps: Array<{
@@ -307,21 +316,28 @@ function LocaleInputs({
}) {
return (
<div className="space-y-3">
<p className="text-sm font-medium text-foreground">{title}</p>
<div className="grid gap-3 xl:grid-cols-3">
{locales.map((locale) => (
<AppCard key={`${title}-${locale.suffix}`} level={2} padding="sm" className="space-y-2 rounded-nested">
<AppCard
key={`${title}-${locale.suffix}`}
level={2}
layer="single"
padding="sm"
className="space-y-2 rounded-nested"
>
<p className="text-xs uppercase tracking-[0.18em] text-muted-foreground">{locale.label}</p>
{multiline ? (
<Textarea
name={namePrefix ? `${namePrefix}${locale.suffix}` : undefined}
rows={5}
placeholder={`${title} ${locale.label}`}
value={values[locale.suffix]}
onChange={(event) => onChange(locale.suffix, event.target.value)}
/>
) : (
<Input
name={namePrefix ? `${namePrefix}${locale.suffix}` : undefined}
placeholder={`${title} ${locale.label}`}
value={values[locale.suffix]}
onChange={(event) => onChange(locale.suffix, event.target.value)}
/>
@@ -387,6 +403,89 @@ function SubmitButton() {
);
}
function ViewModeCard({
active,
label,
description,
icon: Icon,
onClick,
}: {
active: boolean;
label: string;
description: string;
icon: typeof Grid2x2;
onClick: () => void;
}) {
return (
<button
type="button"
onClick={onClick}
className={cn(
"rounded-surface border px-4 py-4 text-left transition-colors",
active
? "border-primary bg-primary text-primary-foreground shadow-sm"
: "border-border/70 bg-background hover:border-input hover:bg-accent/10",
)}
>
<div className="flex items-start gap-3">
<div
className={cn(
"flex h-10 w-10 items-center justify-center rounded-nested border transition-colors",
active
? "border-primary-foreground/20 bg-primary-foreground/10 text-primary-foreground"
: "border-border/70 bg-surface-2 text-muted-foreground",
)}
>
<Icon className="h-4 w-4" />
</div>
<div className="min-w-0">
<p className={cn("text-sm font-semibold", active ? "text-primary-foreground" : "text-foreground")}>
{label}
</p>
<p className={cn("mt-1 text-sm", active ? "text-primary-foreground/80" : "text-muted-foreground")}>
{description}
</p>
</div>
</div>
</button>
);
}
function ToggleField({
id,
name,
checked,
title,
description,
onCheckedChange,
}: {
id: string;
name: string;
checked: boolean;
title: string;
description: string;
onCheckedChange: (checked: boolean) => void;
}) {
return (
<label
htmlFor={id}
className="flex items-start justify-between gap-3 rounded-nested border border-input bg-card px-4 py-3 transition-colors hover:bg-accent/20"
>
<div>
<p className="text-sm font-medium text-foreground">{title}</p>
<p className="text-xs text-muted-foreground">{description}</p>
</div>
<Checkbox
id={id}
name={name}
checked={checked}
onCheckedChange={(value) => onCheckedChange(value === true)}
className="mt-0.5"
/>
</label>
);
}
export function PortfolioProjectForm({
action,
categories,
@@ -484,7 +583,7 @@ export function PortfolioProjectForm({
if (!project && availableCategories.length === 0) {
return (
<AppCard level={3} padding="lg" className="rounded-surface">
<AppCard level={3} layer="single" padding="lg" className="rounded-surface">
<div className="space-y-4">
<div className="space-y-2">
<p className="text-xs uppercase tracking-[0.18em] text-muted-foreground">Portfolio Setup</p>
@@ -528,7 +627,7 @@ export function PortfolioProjectForm({
<input ref={sectionsInputRef} type="hidden" name="sections" value={sectionsPayload} />
<input ref={assetsInputRef} type="hidden" name="assets" value={assetsPayload} />
<AppCard level={3} padding="lg" className="sticky top-4 z-10">
<AppCard level={3} layer="single" padding="lg" className="space-y-6">
<div className="flex flex-col gap-6">
<div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
<div className="space-y-3">
@@ -548,31 +647,23 @@ export function PortfolioProjectForm({
</div>
<div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
<AppCard level={2} padding="sm" className="rounded-nested">
<p className="text-xs uppercase tracking-[0.18em] text-muted-foreground">Current Step</p>
<p className="mt-2 text-sm font-semibold text-foreground">
{wizardSteps[currentStepIndex]?.label ?? "Basics"}
</p>
</AppCard>
<AppCard level={2} padding="sm" className="rounded-nested">
<p className="text-xs uppercase tracking-[0.18em] text-muted-foreground">Sections</p>
<p className="mt-2 text-sm font-semibold text-foreground">{sections.length}</p>
</AppCard>
<AppCard level={2} padding="sm" className="rounded-nested">
<p className="text-xs uppercase tracking-[0.18em] text-muted-foreground">Assets</p>
<p className="mt-2 text-sm font-semibold text-foreground">{assets.length}</p>
</AppCard>
<AppCard level={2} padding="sm" className="rounded-nested">
<p className="text-xs uppercase tracking-[0.18em] text-muted-foreground">Progress</p>
<p className="mt-2 text-sm font-semibold text-foreground">
{progress.filter((step) => step.complete).length}/{progress.length} ready
</p>
</AppCard>
<StatsCard
title="Step"
value={wizardSteps[currentStepIndex]?.label ?? "Basics"}
icon={Layers3}
/>
<StatsCard title="Sections" value={String(sections.length)} icon={Files} />
<StatsCard title="Assets" value={String(assets.length)} icon={ImagePlus} />
<StatsCard
title="Progress"
value={`${progress.filter((step) => step.complete).length}/${progress.length}`}
icon={CheckCircle2}
/>
</div>
</div>
{showValidation && firstIncompleteStep ? (
<AppCard level={2} padding="sm" className="rounded-nested border-status-warning/30">
<div className="rounded-nested border border-status-warning/30 bg-status-warning-soft px-4 py-3">
<div className="flex items-start gap-3">
<CircleAlert className="mt-0.5 h-4 w-4 text-status-warning" />
<div className="space-y-1">
@@ -582,13 +673,15 @@ export function PortfolioProjectForm({
</p>
</div>
</div>
</AppCard>
</div>
) : null}
</div>
</AppCard>
<Tabs value={currentStep} onValueChange={(value) => setCurrentStep(value as PortfolioWizardStep)}>
<TabsList className="grid w-full gap-3 rounded-surface bg-transparent p-0 lg:grid-cols-4">
<div className="grid gap-6 xl:grid-cols-[300px_minmax(0,1fr)] xl:items-start">
<AppCard level={2} layer="single" padding="sm" className="xl:sticky xl:top-4">
<TabsList className="grid h-auto w-full gap-3 rounded-none bg-transparent p-0">
{wizardSteps.map((step, index) => {
const stepProgress = progress.find((entry) => entry.key === step.key);
const isActive = currentStep === step.key;
@@ -598,19 +691,18 @@ export function PortfolioProjectForm({
key={step.key}
value={step.key}
className={cn(
"w-full rounded-surface border border-border/80 bg-surface-2 p-0 text-left hover:bg-accent/30",
"w-full rounded-nested border border-border/80 bg-background p-0 text-left hover:bg-accent/30",
isActive && "border-input bg-accent/20 text-foreground shadow-xs",
)}
>
<div className="flex w-full flex-col gap-3 p-4">
<div className="flex items-start justify-between gap-3">
<div className="flex items-center justify-between gap-3">
<div className="flex items-center gap-3">
<span className="inline-flex h-8 w-8 items-center justify-center rounded-full border border-border/80 bg-background text-sm font-semibold text-foreground">
<span className="inline-flex h-8 w-8 items-center justify-center rounded-full border border-border/80 bg-surface-2 text-sm font-semibold text-foreground">
{index + 1}
</span>
<div>
<p className="text-sm font-semibold text-foreground">{step.label}</p>
<p className="text-xs text-muted-foreground">{step.description}</p>
</div>
</div>
{stepProgress?.complete ? (
@@ -619,22 +711,21 @@ export function PortfolioProjectForm({
<CircleDashed className="h-4 w-4 text-muted-foreground" />
)}
</div>
<div className="flex items-center justify-between gap-3">
<StepStateBadge
complete={Boolean(stepProgress?.complete)}
active={isActive}
showValidation={showValidation && !stepProgress?.complete}
/>
<p className="text-xs text-muted-foreground">{stepProgress?.summary}</p>
</div>
</div>
</TabsTrigger>
);
})}
</TabsList>
</AppCard>
<TabsContent value="basics">
<AppCard level={3} padding="lg">
<div className="space-y-6">
<TabsContent value="basics" className="mt-0">
<AppCard level={3} layer="single" padding="lg">
<section className="space-y-6">
<SectionHeader
title="Basic Information"
@@ -643,7 +734,7 @@ export function PortfolioProjectForm({
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
<div className="space-y-2">
<Label htmlFor="categoryId">Category</Label>
<Label htmlFor="categoryId" className="sr-only">Category</Label>
<div className="relative">
<FolderTree className="pointer-events-none absolute left-3 top-1/2 z-10 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
<Select
@@ -666,12 +757,13 @@ export function PortfolioProjectForm({
</div>
<div className="space-y-2">
<Label htmlFor="slug">Slug</Label>
<Label htmlFor="slug" className="sr-only">Slug</Label>
<div className="relative">
<Text className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
<Input
id="slug"
name="slug"
placeholder="Slug"
value={projectState.slug}
onChange={(event) =>
setProjectState((current) => ({ ...current, slug: event.target.value }))
@@ -682,12 +774,13 @@ export function PortfolioProjectForm({
</div>
<div className="space-y-2">
<Label htmlFor="clientName">Client</Label>
<Label htmlFor="clientName" className="sr-only">Client</Label>
<div className="relative">
<UserRound className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
<Input
id="clientName"
name="clientName"
placeholder="Client"
value={projectState.clientName}
onChange={(event) =>
setProjectState((current) => ({ ...current, clientName: event.target.value }))
@@ -698,12 +791,13 @@ export function PortfolioProjectForm({
</div>
<div className="space-y-2">
<Label htmlFor="projectYear">Year</Label>
<Label htmlFor="projectYear" className="sr-only">Year</Label>
<div className="relative">
<CalendarDays className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
<Input
id="projectYear"
name="projectYear"
placeholder="Year"
type="number"
min="2000"
max="2100"
@@ -717,12 +811,13 @@ export function PortfolioProjectForm({
</div>
<div className="space-y-2">
<Label htmlFor="previewUrl">Preview URL</Label>
<Label htmlFor="previewUrl" className="sr-only">Preview 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
id="previewUrl"
name="previewUrl"
placeholder="Preview URL"
value={projectState.previewUrl}
onChange={(event) =>
setProjectState((current) => ({ ...current, previewUrl: event.target.value }))
@@ -733,12 +828,13 @@ export function PortfolioProjectForm({
</div>
<div className="space-y-2">
<Label htmlFor="sortOrder">Sort Order</Label>
<Label htmlFor="sortOrder" className="sr-only">Sort Order</Label>
<div className="relative">
<Layers3 className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
<Input
id="sortOrder"
name="sortOrder"
placeholder="Sort Order"
type="number"
min="0"
value={projectState.sortOrder}
@@ -753,59 +849,45 @@ export function PortfolioProjectForm({
<div className="grid gap-3 xl:grid-cols-3">
{viewModeOptions.map((option) => (
<button
<ViewModeCard
key={option.value}
type="button"
active={projectState.viewMode === option.value}
label={option.label}
description={option.description}
icon={option.icon}
onClick={() => setProjectState((current) => ({ ...current, viewMode: option.value }))}
className={cn(
"rounded-surface border px-4 py-4 text-left transition-colors",
projectState.viewMode === option.value
? "border-input bg-accent/20"
: "border-border/70 bg-background hover:border-input hover:bg-accent/10",
)}
>
<p className="text-sm font-semibold text-foreground">{option.label}</p>
<p className="mt-1 text-sm text-muted-foreground">{option.description}</p>
</button>
/>
))}
</div>
<div className="grid gap-3 md:grid-cols-2">
<label className="flex items-center justify-between rounded-nested border border-input bg-card px-4 py-3">
<div>
<p className="text-sm font-medium text-foreground">Featured</p>
<p className="text-xs text-muted-foreground">Highlight the project across the portfolio.</p>
</div>
<input
type="checkbox"
<ToggleField
id="isFeatured"
name="isFeatured"
checked={projectState.isFeatured}
onChange={(event) =>
setProjectState((current) => ({ ...current, isFeatured: event.target.checked }))
title="Featured"
description="Highlight the project across the portfolio."
onCheckedChange={(checked) =>
setProjectState((current) => ({ ...current, isFeatured: checked }))
}
/>
</label>
<label className="flex items-center justify-between rounded-nested border border-input bg-card px-4 py-3">
<div>
<p className="text-sm font-medium text-foreground">Published</p>
<p className="text-xs text-muted-foreground">Only published projects appear on public pages.</p>
</div>
<input
type="checkbox"
<ToggleField
id="isPublished"
name="isPublished"
checked={projectState.isPublished}
onChange={(event) =>
setProjectState((current) => ({ ...current, isPublished: event.target.checked }))
title="Published"
description="Only published projects appear on public pages."
onCheckedChange={(checked) =>
setProjectState((current) => ({ ...current, isPublished: checked }))
}
/>
</label>
</div>
</section>
</AppCard>
</TabsContent>
<TabsContent value="content">
<AppCard level={3} padding="lg">
<TabsContent value="content" className="mt-0">
<AppCard level={3} layer="single" padding="lg">
<section className="space-y-6">
<SectionHeader
title="Localized Content"
@@ -855,8 +937,8 @@ export function PortfolioProjectForm({
</AppCard>
</TabsContent>
<TabsContent value="sections">
<AppCard level={3} padding="lg">
<TabsContent value="sections" className="mt-0">
<AppCard level={3} layer="single" padding="lg">
<section className="space-y-6">
<SectionHeader
title="Sections"
@@ -945,7 +1027,7 @@ export function PortfolioProjectForm({
<div className="grid gap-4 md:grid-cols-2">
<div className="space-y-2">
<Label>Type</Label>
<Label className="sr-only">Type</Label>
<Select
value={section.type}
onValueChange={(value) =>
@@ -973,8 +1055,9 @@ export function PortfolioProjectForm({
{section.type === "LINK" ? (
<div className="space-y-2">
<Label>Link URL</Label>
<Label className="sr-only">Link URL</Label>
<Input
placeholder="Link URL"
value={section.linkUrl}
onChange={(event) =>
setSections((current) =>
@@ -1046,9 +1129,11 @@ export function PortfolioProjectForm({
</AppCard>
</TabsContent>
<TabsContent value="assets">
<TabsContent value="assets" className="mt-0">
<AppCard level={3} layer="single" padding="lg">
<div className="space-y-8">
<div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_280px]">
<div className="space-y-6">
<AppCard level={3} padding="lg">
<section className="space-y-6">
<SectionHeader
title="Cover Media"
@@ -1068,9 +1153,9 @@ export function PortfolioProjectForm({
emptyValue={{ mode: "upload", assetId: "", url: "", label: "" }}
/>
</section>
</AppCard>
<AppCard level={3} padding="lg">
<Separator />
<section className="space-y-6">
<SectionHeader
title="Assets"
@@ -1087,7 +1172,7 @@ export function PortfolioProjectForm({
)}
/>
<div className="space-y-4">
<div className="grid gap-4 md:grid-cols-2">
{assets.map((asset, index) => (
<div
key={asset.id ?? `asset-${index}`}
@@ -1183,12 +1268,48 @@ export function PortfolioProjectForm({
))}
</div>
</section>
</div>
<div className="space-y-4 lg:sticky lg:top-4 lg:self-start">
<AppCard level={2} layer="single" padding="sm" className="space-y-4">
<div className="flex items-center gap-2">
<ImagePlus className="h-4 w-4 text-brand-primary" />
<p className="text-sm font-semibold text-foreground">Assets Overview</p>
</div>
<div className="grid gap-3">
<StatsCard title="Cover" value={coverMedia.assetId ? "Selected" : "Missing"} icon={ImagePlus} />
<StatsCard title="Assets" value={String(assets.length)} icon={Files} />
<StatsCard
title="Ready"
value={String(
assets.filter((asset) =>
isPortfolioAssetReady({
mediaAssetId: asset.media.assetId,
altAr: asset.altAr,
altEn: asset.altEn,
altDe: asset.altDe,
}),
).length,
)}
icon={CheckCircle2}
/>
</div>
<div className="rounded-nested border border-dashed border-border/70 bg-background px-4 py-3 text-sm text-muted-foreground">
Start with the cover, then add gallery assets. Each asset needs media plus localized alt text.
</div>
</AppCard>
</div>
</div>
</div>
</AppCard>
</TabsContent>
</div>
</div>
</Tabs>
<AppCard level={3} padding="lg">
<AppCard level={3} layer="single" padding="lg">
<div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
<div className="flex flex-wrap gap-2">
<Button
components/admin/portfolio-projects-overview.tsx
+8 -7
View File
@@ -1,4 +1,4 @@
import { ExternalLink, Plus, Tags } from "lucide-react";
import { ExternalLink, FolderKanban, Plus, Tags, CheckCircle2 } from "lucide-react";
import Link from "next/link";
import { StatsCard } from "@/components/dashboard/stats-card";
@@ -39,12 +39,13 @@ export async function PortfolioProjectsOverview({
return (
<div className="space-y-6">
<div className="flex flex-col gap-4 xl:flex-row xl:items-end xl:justify-between">
<div className="grid gap-4 md:grid-cols-3 xl:min-w-[520px]">
<StatsCard title="Projects" value={String(projects.length)} />
<StatsCard title="Categories" value={String(categories.length)} />
<div className="grid gap-4 md:grid-cols-3 xl:min-w-[620px]">
<StatsCard title="Projects" value={String(projects.length)} icon={FolderKanban} />
<StatsCard title="Categories" value={String(categories.length)} icon={Tags} />
<StatsCard
title="Published"
value={String(projects.filter((project) => project.isPublished).length)}
icon={CheckCircle2}
/>
</div>
@@ -81,10 +82,10 @@ export async function PortfolioProjectsOverview({
))}
</div>
<div className="grid gap-4">
<div className="grid gap-4 xl:grid-cols-2">
{projects.map((project, index) => (
<MotionFade key={project.id} delay={0.06 + index * 0.03}>
<AppCard interactive>
<AppCard interactive layer="single" className="h-full">
<CardContent className="flex flex-col gap-4 p-5 lg:flex-row lg:items-center lg:justify-between">
<div className="space-y-2">
<div className="flex flex-wrap items-center gap-2">
@@ -121,7 +122,7 @@ export async function PortfolioProjectsOverview({
))}
{projects.length === 0 ? (
<AppCard>
<AppCard layer="single" className="xl:col-span-2">
<CardContent className="p-6 text-sm text-muted-foreground">
{copy.empty}
</CardContent>
components/admin/portfolio-subnav.tsx
+1 -1
View File
@@ -23,7 +23,7 @@ const items = [
export function PortfolioSubnav({ active }: PortfolioSubnavProps) {
return (
<AppCard level={2}>
<AppCard level={2} layer="single">
<CardContent className="flex flex-wrap gap-2 p-4">
{items.map((item) => (
<Link
components/admin/site-settings-form.tsx
+29 -19
View File
@@ -16,6 +16,7 @@ import {
} from "lucide-react";
import { useEffect, useId, useMemo, useRef, useState } from "react";
import { StatsCard } from "@/components/dashboard/stats-card";
import { AppCard } from "@/components/ui/app-card";
import { Button } from "@/components/ui/button";
import {
@@ -269,7 +270,7 @@ function SiteSettingsMediaRow({
return (
<>
<AppCard level={2} padding="sm">
<AppCard level={2} layer="single" padding="sm">
<div className="grid gap-4 lg:grid-cols-[180px_minmax(0,1fr)]">
<div className="space-y-2">
<p className="text-sm font-semibold text-foreground">{title}</p>
@@ -392,7 +393,7 @@ function LocalizedFieldsSection({
<div className="grid gap-5 lg:grid-cols-3">
{localeFields.map((locale) => (
<AppCard key={locale.key} level={2} padding="sm" className="space-y-4">
<AppCard key={locale.key} level={2} layer="single" padding="sm" className="space-y-4">
<p className="text-sm font-semibold text-foreground">{locale.label}</p>
<div className="space-y-2">
@@ -532,9 +533,19 @@ export function SiteSettingsForm({
const faviconPreviewUrl = getMediaPreviewUrl(favicon, mediaOptions, initialBindings.favicon?.url);
const defaultOgImagePreviewUrl = getMediaPreviewUrl(defaultOgImage, mediaOptions, initialBindings.defaultOgImage?.url);
const routePreview = settings.defaultLocale === "de" ? "/about" : `/${settings.defaultLocale}/about`;
const brandAssetsCount = [siteLogoLight, siteLogoDark].filter((item) => item.assetId).length;
const previewAssetsCount = [favicon, defaultOgImage].filter((item) => item.assetId).length;
return (
<form id="site-settings-form" action={action} className="space-y-6">
{mode === "brand" ? (
<div className="grid gap-4 md:grid-cols-3 xl:min-w-[620px]">
<StatsCard title="Primary" value={settings.brand.primaryColor} icon={Palette} />
<StatsCard title="Logos" value={String(brandAssetsCount)} icon={ImageIcon} />
<StatsCard title="Preview" value={String(previewAssetsCount)} icon={Globe2} />
</div>
) : null}
<div className="grid gap-6 xl:grid-cols-[minmax(0,3fr)_minmax(300px,1fr)]">
<div className="space-y-6">
{mode === "brand" ? (
@@ -547,10 +558,10 @@ export function SiteSettingsForm({
</p>
</div>
<AppCard level={2} padding="sm" className="space-y-4">
<AppCard level={2} layer="single" padding="sm" className="space-y-4">
<div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_220px]">
<div className="space-y-2">
<Label htmlFor="primaryColor">Primary Color</Label>
<Label htmlFor="primaryColor" className="sr-only">Primary Color</Label>
<div className="flex items-center gap-3">
<Input
id="primaryColor"
@@ -569,6 +580,7 @@ export function SiteSettingsForm({
className="h-11 w-20 rounded-nested p-1"
/>
<Input
aria-label="Primary Color Value"
value={settings.brand.primaryColor}
onChange={(event) =>
setSettings((current) => ({
@@ -667,10 +679,10 @@ export function SiteSettingsForm({
</p>
</div>
<AppCard level={2} padding="sm" className="space-y-4">
<AppCard level={2} layer="single" padding="sm" className="space-y-4">
<div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]">
<div className="space-y-2">
<Label htmlFor="defaultLocaleTrigger">Default Locale</Label>
<Label htmlFor="defaultLocaleTrigger" className="sr-only">Default Locale</Label>
<Select
name="defaultLocale"
value={settings.defaultLocale}
@@ -715,12 +727,10 @@ export function SiteSettingsForm({
<div className="xl:sticky xl:top-6 xl:self-start">
<section className="space-y-4">
<h2 className="text-lg font-semibold text-foreground">Preview</h2>
{mode === "brand" ? (
<>
<AppCard level={2} padding="sm" className="space-y-2">
<p className="text-sm font-semibold text-foreground">Search Result</p>
<AppCard level={2} layer="single" padding="sm" className="space-y-2">
<p className="text-xs uppercase tracking-[0.14em] text-muted-foreground">Search Result</p>
<div className="rounded-nested border border-border/70 bg-background p-3">
<div className="flex items-center gap-3">
{faviconPreviewUrl ? (
@@ -740,10 +750,10 @@ export function SiteSettingsForm({
</div>
</AppCard>
<AppCard level={2} padding="sm" className="space-y-2">
<p className="text-sm font-semibold text-foreground">Brand Assets</p>
<AppCard level={2} layer="single" padding="sm" className="space-y-2">
<p className="text-xs uppercase tracking-[0.14em] text-muted-foreground">Brand Assets</p>
<div className="grid gap-3 sm:grid-cols-2">
<AppCard level={1} padding="sm">
<AppCard level={1} layer="single" padding="sm">
<p className="mb-2 text-xs font-medium uppercase tracking-[0.12em] text-muted-foreground">Light</p>
{siteLogoLightPreviewUrl ? (
<img src={siteLogoLightPreviewUrl} alt="Site Logo Light" className="h-10 w-full object-contain" />
@@ -763,8 +773,8 @@ export function SiteSettingsForm({
</div>
</AppCard>
<AppCard level={2} padding="sm" className="space-y-2">
<p className="text-sm font-semibold text-foreground">Social Preview</p>
<AppCard level={2} layer="single" padding="sm" className="space-y-2">
<p className="text-xs uppercase tracking-[0.14em] text-muted-foreground">Social Preview</p>
<div className="overflow-hidden rounded-nested border border-border/70 bg-background">
<div className="h-1.5" style={{ backgroundColor: settings.brand.primaryColor }} />
{defaultOgImagePreviewUrl ? (
@@ -787,8 +797,8 @@ export function SiteSettingsForm({
</>
) : (
<>
<AppCard level={2} padding="sm" className="space-y-2">
<p className="text-sm font-semibold text-foreground">Visitor Routing</p>
<AppCard level={2} layer="single" padding="sm" className="space-y-2">
<p className="text-xs uppercase tracking-[0.14em] text-muted-foreground">Visitor Routing</p>
<div className="rounded-nested border border-border/70 bg-background p-3">
<div className="flex items-center gap-2 text-sm font-medium text-foreground">
<Languages className="h-4 w-4 text-brand-primary" />
@@ -800,8 +810,8 @@ export function SiteSettingsForm({
</div>
</AppCard>
<AppCard level={2} padding="sm" className="space-y-2">
<p className="text-sm font-semibold text-foreground">Locale Summary</p>
<AppCard level={2} layer="single" padding="sm" className="space-y-2">
<p className="text-xs uppercase tracking-[0.14em] text-muted-foreground">Locale Summary</p>
<div className="rounded-nested border border-border/70 bg-background">
<Table>
<TableBody>
components/admin/smtp-settings-form.tsx
+2 -2
View File
@@ -25,7 +25,7 @@ export function SMTPSettingsForm({
return (
<form id="smtp-settings-form" action={action} className="space-y-6">
<div className="grid gap-6 xl:grid-cols-2">
<AppCard>
<AppCard layer="single">
<CardHeader>
<CardTitle>SMTP Connection</CardTitle>
<CardDescription>Server und Login.</CardDescription>
@@ -109,7 +109,7 @@ export function SMTPSettingsForm({
</CardContent>
</AppCard>
<AppCard>
<AppCard layer="single">
<CardHeader>
<CardTitle>Sender And Recipients</CardTitle>
<CardDescription>Absender und Ziele.</CardDescription>
components/admin/workspace-patterns.tsx
+3 -3
View File
@@ -17,7 +17,7 @@ export function WorkspaceHero({
aside?: ReactNode;
}) {
return (
<AppCard level={3}>
<AppCard level={3} layer="single">
<CardContent className="flex flex-col gap-4 p-6 lg:flex-row lg:items-end lg:justify-between lg:p-8">
<div className="space-y-2">
<p className="text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground">
@@ -40,7 +40,7 @@ export function WorkspaceSidebarPanel({
children: ReactNode;
}) {
return (
<AppCard level={2}>
<AppCard level={2} layer="single">
<CardHeader className="pb-4">
<CardTitle className="text-base">{title}</CardTitle>
</CardHeader>
@@ -100,7 +100,7 @@ export function WorkspaceLocaleCard({
children: ReactNode;
}) {
return (
<AppCard level={2}>
<AppCard level={2} layer="single">
<CardHeader className="pb-4">
<CardTitle className="text-lg">{title}</CardTitle>
<CardDescription>{hint}</CardDescription>
components/dashboard/stats-card.tsx
+10 -10
View File
@@ -22,25 +22,25 @@ export function StatsCard({
className,
}: StatsCardProps) {
return (
<AppCard level={3} className={className}>
<CardContent className="space-y-2.5 p-3">
<div className="flex items-start justify-between gap-3">
<div>
<p className="text-sm font-semibold text-foreground">{title}</p>
<p className="mt-1 text-3xl font-semibold text-foreground">{value}</p>
</div>
<AppCard level={3} layer="single" className={className}>
<CardContent className="p-3">
<div className="flex items-center gap-3">
{Icon ? (
<div className="rounded-nested border border-border bg-muted/50 p-2 text-muted-foreground">
<div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-nested border border-border bg-muted/50 text-muted-foreground">
<Icon className="h-4 w-4" />
</div>
) : null}
<div className="min-w-0">
<p className="text-xs uppercase tracking-[0.14em] text-muted-foreground">{title}</p>
<p className="mt-1 text-lg font-semibold text-foreground">{value}</p>
</div>
</div>
{description ? (
<p className="text-sm text-muted-foreground">{description}</p>
<p className="mt-2 text-sm text-muted-foreground">{description}</p>
) : null}
{footer ? footer : null}
{footer ? <div className="mt-2">{footer}</div> : null}
</CardContent>
</AppCard>
);