This commit is contained in:
MOH
@@ -101,7 +101,7 @@ export default async function AboutPage({ params: { locale } }: AboutPageProps)
|
||||
{[t("processOne"), t("processTwo"), t("processThree")].map((step, index) => (
|
||||
<AppCard key={step} level={2}>
|
||||
<CardContent className="p-4">
|
||||
<span className="mb-2 inline-flex h-6 w-6 items-center justify-center rounded-pill bg-surface-1 text-xs font-semibold text-foreground/80">
|
||||
<span className="mb-2 inline-flex h-6 w-6 items-center justify-center rounded-full bg-muted text-xs font-semibold text-foreground/80">
|
||||
{index + 1}
|
||||
</span>
|
||||
<p className="text-sm text-foreground/80">{step}</p>
|
||||
|
||||
@@ -189,11 +189,11 @@ export default async function HomePage({ params: { locale } }: HomePageProps) {
|
||||
<CardContent className="p-6 lg:p-8">
|
||||
<div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
|
||||
<div>
|
||||
<p className="inline-flex items-center gap-2 text-sm font-medium text-surface-inverse-foreground/80">
|
||||
<p className="inline-flex items-center gap-2 text-sm font-medium text-primary-foreground/80">
|
||||
<Mail className="h-4 w-4" />
|
||||
{t("ctaTitle")}
|
||||
</p>
|
||||
<p className="mt-2 max-w-2xl text-sm text-surface-inverse-foreground/88 sm:text-base">
|
||||
<p className="mt-2 max-w-2xl text-sm text-primary-foreground/88 sm:text-base">
|
||||
{t("ctaText")}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -106,7 +106,7 @@ export default async function PortfolioItemPage({
|
||||
</p>
|
||||
|
||||
{item.coverImagePath ? (
|
||||
<div className="mt-6 overflow-hidden rounded-surface border border-border">
|
||||
<div className="mt-6 overflow-hidden rounded-lg border border-border bg-card">
|
||||
<PortfolioImage
|
||||
src={item.coverImagePath}
|
||||
alt={getLocalizedValue(item.title, localeKey)}
|
||||
@@ -180,7 +180,7 @@ export default async function PortfolioItemPage({
|
||||
alt={getLocalizedValue(section.title, localeKey)}
|
||||
width={1200}
|
||||
height={720}
|
||||
className="mt-4 h-48 w-full rounded-nested object-cover"
|
||||
className="mt-4 h-48 w-full rounded-md object-cover"
|
||||
/>
|
||||
) : null}
|
||||
{section.linkUrl ? (
|
||||
@@ -204,7 +204,7 @@ export default async function PortfolioItemPage({
|
||||
<h2 className="text-xl font-semibold text-foreground">{t("gallery")}</h2>
|
||||
<div className="mt-4 grid gap-4 md:grid-cols-2">
|
||||
{item.assets.map((asset) => (
|
||||
<div key={asset.id} className="overflow-hidden rounded-surface border border-border">
|
||||
<div key={asset.id} className="overflow-hidden rounded-lg border border-border bg-card">
|
||||
{asset.kind === "IMAGE" ? (
|
||||
<PortfolioImage
|
||||
src={asset.filePath}
|
||||
@@ -214,7 +214,7 @@ export default async function PortfolioItemPage({
|
||||
className="h-64 w-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="flex h-64 items-center justify-center bg-surface-1 p-6 text-center text-sm text-muted-foreground">
|
||||
<div className="flex h-64 items-center justify-center bg-muted/40 p-6 text-center text-sm text-muted-foreground">
|
||||
<div className="space-y-3">
|
||||
<p>{getLocalizedValue(asset.alt, localeKey)}</p>
|
||||
<Button asChild variant="outline">
|
||||
|
||||
@@ -75,10 +75,10 @@ export default async function PortfolioPage({
|
||||
<section className="flex flex-wrap gap-3">
|
||||
<Link
|
||||
href={getLocalizedPath(localeKey, "/portfolio")}
|
||||
className={`rounded-pill border px-4 py-2 text-sm transition-colors ${
|
||||
className={`rounded-md border px-4 py-2 text-sm transition-colors ${
|
||||
selectedCategory === ""
|
||||
? "border-border-strong bg-foreground text-background"
|
||||
: "border-border bg-background text-foreground/80 hover:border-border-strong hover:text-foreground"
|
||||
? "border-input bg-primary text-primary-foreground"
|
||||
: "border-input bg-background text-foreground/80 hover:bg-accent hover:text-accent-foreground"
|
||||
}`}
|
||||
>
|
||||
{t("all")}
|
||||
@@ -87,10 +87,10 @@ export default async function PortfolioPage({
|
||||
<Link
|
||||
key={category.id}
|
||||
href={getLocalizedPath(localeKey, `/portfolio?category=${category.slug}`)}
|
||||
className={`rounded-pill border px-4 py-2 text-sm transition-colors ${
|
||||
className={`rounded-md border px-4 py-2 text-sm transition-colors ${
|
||||
selectedCategory === category.slug
|
||||
? "border-border-strong bg-foreground text-background"
|
||||
: "border-border bg-background text-foreground/80 hover:border-border-strong hover:text-foreground"
|
||||
? "border-input bg-primary text-primary-foreground"
|
||||
: "border-input bg-background text-foreground/80 hover:bg-accent hover:text-accent-foreground"
|
||||
}`}
|
||||
>
|
||||
{getLocalizedValue(category.name, localeKey)}
|
||||
|
||||
@@ -121,7 +121,7 @@ export default async function ProductPage({ params: { locale, slug } }: ProductP
|
||||
{[t("stepOne"), t("stepTwo"), t("stepThree")].map((step, index) => (
|
||||
<AppCard key={step} level={2}>
|
||||
<CardContent className="p-4">
|
||||
<span className="mb-2 inline-flex h-6 w-6 items-center justify-center rounded-pill bg-surface-1 text-xs font-semibold text-foreground/80">
|
||||
<span className="mb-2 inline-flex h-6 w-6 items-center justify-center rounded-full bg-muted text-xs font-semibold text-foreground/80">
|
||||
{index + 1}
|
||||
</span>
|
||||
<p className="text-sm text-foreground/80">{step}</p>
|
||||
|
||||
@@ -48,14 +48,14 @@ export default async function ComingSoonPage({
|
||||
<MotionFade className="w-full">
|
||||
<AppCard
|
||||
level={3}
|
||||
className="mx-auto w-full max-w-4xl overflow-hidden border-border/70 bg-surface-1/88 shadow-none"
|
||||
className="mx-auto w-full max-w-4xl overflow-hidden border-border/70 bg-card/95 shadow-sm"
|
||||
>
|
||||
<CardContent className="relative p-6 text-center sm:p-10 lg:p-14">
|
||||
<div className="pointer-events-none absolute -right-20 -top-20 h-48 w-48 rounded-full bg-brand-secondary/15 blur-3xl sm:h-64 sm:w-64" />
|
||||
<div className="pointer-events-none absolute -bottom-24 -left-16 h-56 w-56 rounded-full bg-brand-primary/15 blur-3xl sm:h-72 sm:w-72" />
|
||||
|
||||
<div className="relative">
|
||||
<p className="inline-flex items-center gap-2 rounded-pill border border-border bg-surface-1 px-3 py-1 text-xs font-semibold uppercase tracking-[0.14em] text-foreground/80">
|
||||
<p className="inline-flex items-center gap-2 rounded-full border border-input bg-background px-3 py-1 text-xs font-semibold uppercase tracking-[0.14em] text-foreground/80">
|
||||
<Sparkles className="h-3.5 w-3.5 text-brand-secondary" />
|
||||
{t("badge")}
|
||||
</p>
|
||||
|
||||
+54
-69
@@ -3,23 +3,23 @@
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
--background: 210 20% 98%;
|
||||
--foreground: 222 30% 12%;
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 224 71.4% 4.1%;
|
||||
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 222 30% 12%;
|
||||
--card-foreground: 224 71.4% 4.1%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 222 30% 12%;
|
||||
--popover-foreground: 224 71.4% 4.1%;
|
||||
|
||||
--primary: 214 84% 42%;
|
||||
--primary: 222.2 47.4% 11.2%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
--secondary: 210 24% 94%;
|
||||
--secondary-foreground: 222 30% 12%;
|
||||
--muted: 210 20% 95%;
|
||||
--muted-foreground: 215 16% 38%;
|
||||
--accent: 191 78% 42%;
|
||||
--accent-foreground: 210 40% 98%;
|
||||
--destructive: 0 72% 47%;
|
||||
--secondary: 210 40% 96.1%;
|
||||
--secondary-foreground: 222.2 47.4% 11.2%;
|
||||
--muted: 210 40% 96.1%;
|
||||
--muted-foreground: 215.4 16.3% 46.9%;
|
||||
--accent: 210 40% 96.1%;
|
||||
--accent-foreground: 222.2 47.4% 11.2%;
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
|
||||
--surface-1: 0 0% 100%;
|
||||
@@ -28,10 +28,10 @@
|
||||
--surface-inverse: 222 34% 14%;
|
||||
--surface-inverse-foreground: 210 40% 98%;
|
||||
|
||||
--border: 214 22% 88%;
|
||||
--border-strong: 214 20% 80%;
|
||||
--input: 214 20% 84%;
|
||||
--ring: 214 84% 42%;
|
||||
--border: 214.3 31.8% 91.4%;
|
||||
--border-strong: 214.3 31.8% 85%;
|
||||
--input: 214.3 31.8% 91.4%;
|
||||
--ring: 222.2 84% 4.9%;
|
||||
|
||||
--status-success: 145 63% 42%;
|
||||
--status-success-soft: 145 58% 92%;
|
||||
@@ -40,20 +40,20 @@
|
||||
|
||||
--brand-primary: 214 84% 42%;
|
||||
--brand-secondary: 191 78% 42%;
|
||||
--ambient-primary-alpha: 0.18;
|
||||
--ambient-secondary-alpha: 0.14;
|
||||
--ambient-grid-alpha: 0.4;
|
||||
--ambient-primary-alpha: 0.08;
|
||||
--ambient-secondary-alpha: 0.06;
|
||||
--ambient-grid-alpha: 0;
|
||||
|
||||
--radius-surface: 0rem;
|
||||
--radius-nested: 0rem;
|
||||
--radius-pill: 9999px;
|
||||
--radius-pill: 0px;
|
||||
|
||||
--shadow-xs: 0 1px 2px hsl(220 26% 18% / 0.05);
|
||||
--shadow-sm: 0 12px 30px -20px hsl(220 32% 18% / 0.16);
|
||||
--shadow-md: 0 22px 48px -28px hsl(220 32% 18% / 0.2);
|
||||
--shadow-lg: 0 28px 70px -34px hsl(220 32% 18% / 0.28);
|
||||
--shadow-card: 0 20px 46px -30px hsl(220 32% 18% / 0.2);
|
||||
--shadow-panel: 0 18px 50px -32px hsl(220 32% 18% / 0.18);
|
||||
--shadow-sm: 0 1px 3px hsl(220 26% 18% / 0.1), 0 1px 2px -1px hsl(220 26% 18% / 0.1);
|
||||
--shadow-md: 0 4px 6px -1px hsl(220 26% 18% / 0.1), 0 2px 4px -2px hsl(220 26% 18% / 0.1);
|
||||
--shadow-lg: 0 10px 15px -3px hsl(220 26% 18% / 0.12), 0 4px 6px -4px hsl(220 26% 18% / 0.12);
|
||||
--shadow-card: 0 1px 3px hsl(220 26% 18% / 0.1), 0 1px 2px -1px hsl(220 26% 18% / 0.08);
|
||||
--shadow-panel: 0 4px 6px -1px hsl(220 26% 18% / 0.1), 0 2px 4px -2px hsl(220 26% 18% / 0.08);
|
||||
--shadow-sidebar: inset 0 1px 0 hsl(0 0% 100% / 0.7);
|
||||
|
||||
--focus-ring: 0 0 0 3px hsl(var(--ring) / 0.18);
|
||||
@@ -77,23 +77,23 @@
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 222 33% 8%;
|
||||
--foreground: 210 25% 92%;
|
||||
--background: 224 71.4% 4.1%;
|
||||
--foreground: 210 20% 98%;
|
||||
|
||||
--card: 222 28% 11%;
|
||||
--card-foreground: 210 25% 92%;
|
||||
--popover: 222 28% 11%;
|
||||
--popover-foreground: 210 25% 92%;
|
||||
--card: 224 71.4% 4.1%;
|
||||
--card-foreground: 210 20% 98%;
|
||||
--popover: 224 71.4% 4.1%;
|
||||
--popover-foreground: 210 20% 98%;
|
||||
|
||||
--primary: 205 88% 64%;
|
||||
--primary-foreground: 222 33% 8%;
|
||||
--secondary: 222 18% 18%;
|
||||
--secondary-foreground: 210 25% 92%;
|
||||
--muted: 222 18% 16%;
|
||||
--muted-foreground: 215 16% 72%;
|
||||
--accent: 190 76% 57%;
|
||||
--accent-foreground: 222 33% 8%;
|
||||
--destructive: 0 72% 58%;
|
||||
--primary: 210 20% 98%;
|
||||
--primary-foreground: 222.2 47.4% 11.2%;
|
||||
--secondary: 215 27.9% 16.9%;
|
||||
--secondary-foreground: 210 20% 98%;
|
||||
--muted: 215 27.9% 16.9%;
|
||||
--muted-foreground: 217.9 10.6% 64.9%;
|
||||
--accent: 215 27.9% 16.9%;
|
||||
--accent-foreground: 210 20% 98%;
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
|
||||
--surface-1: 222 28% 11%;
|
||||
@@ -102,10 +102,10 @@
|
||||
--surface-inverse: 210 40% 98%;
|
||||
--surface-inverse-foreground: 222 33% 8%;
|
||||
|
||||
--border: 221 18% 21%;
|
||||
--border-strong: 221 18% 28%;
|
||||
--input: 221 18% 26%;
|
||||
--ring: 205 88% 64%;
|
||||
--border: 215 27.9% 16.9%;
|
||||
--border-strong: 215 20.2% 25%;
|
||||
--input: 215 27.9% 16.9%;
|
||||
--ring: 216 12.2% 83.9%;
|
||||
|
||||
--status-success: 145 68% 66%;
|
||||
--status-success-soft: 145 36% 18%;
|
||||
@@ -114,16 +114,16 @@
|
||||
|
||||
--brand-primary: 205 88% 64%;
|
||||
--brand-secondary: 190 76% 57%;
|
||||
--ambient-primary-alpha: 0.22;
|
||||
--ambient-secondary-alpha: 0.18;
|
||||
--ambient-grid-alpha: 0.32;
|
||||
--ambient-primary-alpha: 0.08;
|
||||
--ambient-secondary-alpha: 0.06;
|
||||
--ambient-grid-alpha: 0;
|
||||
|
||||
--shadow-xs: 0 1px 2px hsl(220 50% 2% / 0.42);
|
||||
--shadow-sm: 0 14px 30px -20px hsl(220 50% 2% / 0.48);
|
||||
--shadow-md: 0 24px 48px -28px hsl(220 50% 2% / 0.58);
|
||||
--shadow-lg: 0 34px 78px -34px hsl(220 50% 2% / 0.72);
|
||||
--shadow-card: 0 20px 52px -28px hsl(220 50% 2% / 0.55);
|
||||
--shadow-panel: 0 22px 56px -32px hsl(220 50% 2% / 0.52);
|
||||
--shadow-xs: 0 1px 2px hsl(220 50% 2% / 0.32);
|
||||
--shadow-sm: 0 1px 3px hsl(220 50% 2% / 0.28), 0 1px 2px -1px hsl(220 50% 2% / 0.28);
|
||||
--shadow-md: 0 4px 6px -1px hsl(220 50% 2% / 0.32), 0 2px 4px -2px hsl(220 50% 2% / 0.32);
|
||||
--shadow-lg: 0 10px 15px -3px hsl(220 50% 2% / 0.36), 0 4px 6px -4px hsl(220 50% 2% / 0.36);
|
||||
--shadow-card: 0 1px 3px hsl(220 50% 2% / 0.28), 0 1px 2px -1px hsl(220 50% 2% / 0.28);
|
||||
--shadow-panel: 0 4px 6px -1px hsl(220 50% 2% / 0.32), 0 2px 4px -2px hsl(220 50% 2% / 0.32);
|
||||
--shadow-sidebar: inset 0 1px 0 hsl(210 25% 92% / 0.06);
|
||||
|
||||
--sidebar-background: 222 25% 10%;
|
||||
@@ -153,22 +153,7 @@ html.dark {
|
||||
body {
|
||||
@apply min-h-screen text-foreground antialiased;
|
||||
background-color: hsl(var(--background));
|
||||
background-image:
|
||||
radial-gradient(
|
||||
circle at top,
|
||||
hsl(var(--brand-primary) / var(--ambient-primary-alpha)),
|
||||
transparent 34%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at bottom right,
|
||||
hsl(var(--brand-secondary) / var(--ambient-secondary-alpha)),
|
||||
transparent 30%
|
||||
),
|
||||
linear-gradient(hsl(var(--border) / var(--ambient-grid-alpha)) 1px, transparent 1px),
|
||||
linear-gradient(90deg, hsl(var(--border) / var(--ambient-grid-alpha)) 1px, transparent 1px);
|
||||
background-size: auto, auto, 24px 24px, 24px 24px;
|
||||
background-position: center top, right bottom, center center, center center;
|
||||
background-attachment: fixed;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
a {
|
||||
|
||||
+47
-20
@@ -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}
|
||||
|
||||
+20
-6
@@ -171,32 +171,46 @@ export default async function RootPage({ searchParams }: RootPageProps) {
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{!authConfigured ? (
|
||||
<p className="mb-4 rounded-nested border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive">
|
||||
<p className="mb-4 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive">
|
||||
{copy.configMissing}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
{!basicConfigured ? (
|
||||
<p className="mb-4 rounded-nested border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive">
|
||||
<p className="mb-4 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive">
|
||||
{copy.basicAuthMissing}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
{searchParams?.error === "invalid" ? (
|
||||
<p className="mb-4 rounded-nested border border-status-warning/30 bg-status-warning-soft px-3 py-2 text-sm text-status-warning">
|
||||
<p className="mb-4 rounded-md border border-status-warning/30 bg-status-warning-soft px-3 py-2 text-sm text-status-warning">
|
||||
{copy.invalidLogin}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
{searchParams?.error === "locked" || lockState.locked ? (
|
||||
<p className="mb-4 rounded-nested border border-status-warning/30 bg-status-warning-soft px-3 py-2 text-sm text-status-warning">
|
||||
<p className="mb-4 rounded-md border border-status-warning/30 bg-status-warning-soft px-3 py-2 text-sm text-status-warning">
|
||||
{copy.lockedLogin}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
<form action={loginAction} className="space-y-3">
|
||||
<Label htmlFor="password">{copy.passwordLabel}</Label>
|
||||
<Input id="password" type="password" name="password" required />
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="password" className="sr-only">
|
||||
{copy.passwordLabel}
|
||||
</Label>
|
||||
<div className="relative">
|
||||
<LockKeyhole className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
id="password"
|
||||
type="password"
|
||||
name="password"
|
||||
required
|
||||
placeholder={copy.passwordLabel}
|
||||
className="pl-9"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={!authConfigured || !basicConfigured || lockState.locked}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { redirect } from "next/navigation";
|
||||
import { FileText, Hash, Text } from "lucide-react";
|
||||
|
||||
import { MotionFade } from "@/components/motion-fade";
|
||||
import { FlashMessage } from "@/components/root/flash-message";
|
||||
@@ -7,6 +8,7 @@ import { RootDashboardShell } from "@/components/root/root-dashboard-shell";
|
||||
import { AppCard } from "@/components/ui/app-card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
@@ -106,12 +108,18 @@ export default async function RootPortfolioCategoriesPage({
|
||||
>
|
||||
<input type="hidden" name="redirectPath" value="/root/portfolio/categories" />
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="create-slug">Slug</Label>
|
||||
<Input id="create-slug" name="slug" required />
|
||||
<Label htmlFor="create-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="create-slug" name="slug" required placeholder="Slug" className="pl-9" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="create-sortOrder">{copy.sortOrder}</Label>
|
||||
<Input id="create-sortOrder" name="sortOrder" type="number" min="0" defaultValue="0" required />
|
||||
<Label htmlFor="create-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 id="create-sortOrder" name="sortOrder" type="number" min="0" defaultValue="0" required placeholder={copy.sortOrder} className="pl-9" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-2">
|
||||
@@ -126,20 +134,28 @@ export default async function RootPortfolioCategoriesPage({
|
||||
|
||||
{locales.map((locale) => (
|
||||
<TabsContent key={locale.key} value={locale.key}>
|
||||
<div className="grid gap-4 rounded-surface border border-border p-4 md:grid-cols-2">
|
||||
<div className="grid gap-4 rounded-lg border bg-card p-4 shadow-sm md:grid-cols-2">
|
||||
<div className="md:col-span-2 text-sm text-muted-foreground">{locale.hint}</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`create-name-${locale.key}`}>{`Name ${locale.label}`}</Label>
|
||||
<Input id={`create-name-${locale.key}`} name={`name${locale.key}`} required />
|
||||
<Label htmlFor={`create-name-${locale.key}`} className="sr-only">{`Name ${locale.label}`}</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={`create-name-${locale.key}`} name={`name${locale.key}`} required placeholder={`Name ${locale.label}`} className="pl-9" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2 md:col-span-2">
|
||||
<Label htmlFor={`create-description-${locale.key}`}>{`${copy.description} ${locale.label}`}</Label>
|
||||
<Textarea
|
||||
id={`create-description-${locale.key}`}
|
||||
name={`description${locale.key}`}
|
||||
rows={4}
|
||||
required
|
||||
/>
|
||||
<Label htmlFor={`create-description-${locale.key}`} className="sr-only">{`${copy.description} ${locale.label}`}</Label>
|
||||
<div className="relative">
|
||||
<FileText className="pointer-events-none absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
|
||||
<Textarea
|
||||
id={`create-description-${locale.key}`}
|
||||
name={`description${locale.key}`}
|
||||
rows={4}
|
||||
required
|
||||
placeholder={`${copy.description} ${locale.label}`}
|
||||
className="pl-9"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
@@ -147,8 +163,8 @@ export default async function RootPortfolioCategoriesPage({
|
||||
</Tabs>
|
||||
</div>
|
||||
|
||||
<label className="flex items-center gap-3 rounded-nested border border-border px-4 py-3 text-sm md:col-span-2">
|
||||
<input type="checkbox" name="isActive" defaultChecked />
|
||||
<label className="flex items-center gap-3 rounded-md border border-input bg-card px-4 py-3 text-sm md:col-span-2">
|
||||
<Checkbox name="isActive" defaultChecked />
|
||||
{copy.active}
|
||||
</label>
|
||||
|
||||
@@ -175,20 +191,28 @@ export default async function RootPortfolioCategoriesPage({
|
||||
<input type="hidden" name="redirectPath" value="/root/portfolio/categories" />
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`slug-${category.id}`}>Slug</Label>
|
||||
<Input id={`slug-${category.id}`} name="slug" defaultValue={category.slug} required />
|
||||
<Label htmlFor={`slug-${category.id}`} 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-${category.id}`} name="slug" defaultValue={category.slug} required placeholder="Slug" className="pl-9" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`sortOrder-${category.id}`}>{copy.sortOrder}</Label>
|
||||
<Input
|
||||
id={`sortOrder-${category.id}`}
|
||||
name="sortOrder"
|
||||
type="number"
|
||||
min="0"
|
||||
defaultValue={category.sortOrder}
|
||||
required
|
||||
/>
|
||||
<Label htmlFor={`sortOrder-${category.id}`} 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
|
||||
id={`sortOrder-${category.id}`}
|
||||
name="sortOrder"
|
||||
type="number"
|
||||
min="0"
|
||||
defaultValue={category.sortOrder}
|
||||
required
|
||||
placeholder={copy.sortOrder}
|
||||
className="pl-9"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-2">
|
||||
@@ -208,26 +232,36 @@ export default async function RootPortfolioCategoriesPage({
|
||||
|
||||
return (
|
||||
<TabsContent key={`${category.id}-content-${locale.key}`} value={locale.key}>
|
||||
<div className="grid gap-4 rounded-surface border border-border p-4 md:grid-cols-2">
|
||||
<div className="grid gap-4 rounded-lg border bg-card p-4 shadow-sm md:grid-cols-2">
|
||||
<div className="md:col-span-2 text-sm text-muted-foreground">{locale.hint}</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${nameKey}-${category.id}`}>{`Name ${locale.label}`}</Label>
|
||||
<Input
|
||||
id={`${nameKey}-${category.id}`}
|
||||
name={nameKey}
|
||||
defaultValue={category.name[lowerLocale]}
|
||||
required
|
||||
/>
|
||||
<Label htmlFor={`${nameKey}-${category.id}`} className="sr-only">{`Name ${locale.label}`}</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={`${nameKey}-${category.id}`}
|
||||
name={nameKey}
|
||||
defaultValue={category.name[lowerLocale]}
|
||||
required
|
||||
placeholder={`Name ${locale.label}`}
|
||||
className="pl-9"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2 md:col-span-2">
|
||||
<Label htmlFor={`${descriptionKey}-${category.id}`}>{`${copy.description} ${locale.label}`}</Label>
|
||||
<Textarea
|
||||
id={`${descriptionKey}-${category.id}`}
|
||||
name={descriptionKey}
|
||||
rows={4}
|
||||
defaultValue={category.description[lowerLocale]}
|
||||
required
|
||||
/>
|
||||
<Label htmlFor={`${descriptionKey}-${category.id}`} className="sr-only">{`${copy.description} ${locale.label}`}</Label>
|
||||
<div className="relative">
|
||||
<FileText className="pointer-events-none absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
|
||||
<Textarea
|
||||
id={`${descriptionKey}-${category.id}`}
|
||||
name={descriptionKey}
|
||||
rows={4}
|
||||
defaultValue={category.description[lowerLocale]}
|
||||
required
|
||||
placeholder={`${copy.description} ${locale.label}`}
|
||||
className="pl-9"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
@@ -236,8 +270,8 @@ export default async function RootPortfolioCategoriesPage({
|
||||
</Tabs>
|
||||
</div>
|
||||
|
||||
<label className="flex items-center gap-3 rounded-nested border border-border px-4 py-3 text-sm">
|
||||
<input type="checkbox" name="isActive" defaultChecked={category.isActive} />
|
||||
<label className="flex items-center gap-3 rounded-md border border-input bg-card px-4 py-3 text-sm">
|
||||
<Checkbox name="isActive" defaultChecked={category.isActive} />
|
||||
{copy.active}
|
||||
</label>
|
||||
|
||||
|
||||
+13
-192
@@ -1,26 +1,17 @@
|
||||
import { Boxes, ExternalLink, FolderKanban, Layers3, Plus, Tags } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
import { RootDashboardShell } from "@/components/root/root-dashboard-shell";
|
||||
import { MotionFade } from "@/components/motion-fade";
|
||||
import { FlashMessage } from "@/components/root/flash-message";
|
||||
import { AppCard } from "@/components/ui/app-card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { PortfolioProjectsOverview } from "@/components/root/portfolio-projects-overview";
|
||||
import { clearAdminSessionCookie, isAdminAuthenticated } from "@/lib/admin-auth";
|
||||
import {
|
||||
getAdminPortfolioCategories,
|
||||
getAdminPortfolioProjects,
|
||||
getLocalizedValue,
|
||||
} from "@/lib/portfolio";
|
||||
import { getLocalizedPath } from "@/lib/locale";
|
||||
import { getAdminPortfolioCategories, getAdminPortfolioProjects } from "@/lib/portfolio";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
const copy = {
|
||||
title: "Portfolio",
|
||||
subtitle: "Verwaltung fuer Kategorien, Projekte und Inhalte.",
|
||||
subtitle: "Zentrale Steuerung fuer Projekte, Inhalte und Medien.",
|
||||
overview: "Uebersicht",
|
||||
maintenance: "Wartungsmodus",
|
||||
uiKit: "UI Kit",
|
||||
@@ -29,23 +20,6 @@ const copy = {
|
||||
portfolio: "Portfolio",
|
||||
logout: "Ausloggen",
|
||||
backToSite: "Zur Website",
|
||||
totalCategories: "Kategorien",
|
||||
totalProjects: "Projekte",
|
||||
publishedProjects: "Veroeffentlicht",
|
||||
newProject: "Neues Projekt",
|
||||
newCategory: "Neue Kategorie",
|
||||
category: "Kategorie",
|
||||
all: "Alle",
|
||||
status: "Status",
|
||||
draft: "Entwurf",
|
||||
published: "Veroeffentlicht",
|
||||
filter: "Filtern",
|
||||
sort: "Sortierung",
|
||||
previewSet: "Preview Link gesetzt",
|
||||
previewMissing: "Kein Preview Link",
|
||||
editProject: "Projekt bearbeiten",
|
||||
openProject: "Projekt ansehen",
|
||||
empty: "Keine Projekte fuer die aktuellen Filter gefunden.",
|
||||
};
|
||||
|
||||
type RootPortfolioPageProps = {
|
||||
@@ -69,17 +43,19 @@ export default async function RootPortfolioPage({ searchParams }: RootPortfolioP
|
||||
redirect("/root");
|
||||
}
|
||||
|
||||
const selectedCategory = searchParams?.category && searchParams.category !== "__all__"
|
||||
? searchParams.category
|
||||
: "";
|
||||
const selectedStatus = searchParams?.status === "draft" || searchParams?.status === "published"
|
||||
? searchParams.status
|
||||
: "all";
|
||||
const [categories, projects] = await Promise.all([
|
||||
getAdminPortfolioCategories(),
|
||||
getAdminPortfolioProjects({
|
||||
categoryId: searchParams?.category || undefined,
|
||||
categoryId: selectedCategory || undefined,
|
||||
status: selectedStatus,
|
||||
}),
|
||||
]);
|
||||
const publishedProjects = projects.filter((project) => project.isPublished).length;
|
||||
|
||||
return (
|
||||
<RootDashboardShell
|
||||
@@ -89,22 +65,6 @@ export default async function RootPortfolioPage({ searchParams }: RootPortfolioP
|
||||
logoutAction={logoutAction}
|
||||
headerTitle={copy.title}
|
||||
headerDescription={copy.subtitle}
|
||||
headerActions={
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Button asChild>
|
||||
<Link href="/root/portfolio/projects/new">
|
||||
<Plus className="h-4 w-4" />
|
||||
{copy.newProject}
|
||||
</Link>
|
||||
</Button>
|
||||
<Button asChild variant="outline">
|
||||
<Link href="/root/portfolio/categories">
|
||||
<Tags className="h-4 w-4" />
|
||||
{copy.newCategory}
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className="space-y-6">
|
||||
{searchParams?.success ? (
|
||||
@@ -119,151 +79,12 @@ export default async function RootPortfolioPage({ searchParams }: RootPortfolioP
|
||||
</MotionFade>
|
||||
) : null}
|
||||
|
||||
<section className="grid gap-4 md:grid-cols-3">
|
||||
{[
|
||||
{
|
||||
icon: Layers3,
|
||||
label: copy.totalCategories,
|
||||
value: categories.length,
|
||||
},
|
||||
{
|
||||
icon: FolderKanban,
|
||||
label: copy.totalProjects,
|
||||
value: projects.length,
|
||||
},
|
||||
{
|
||||
icon: Boxes,
|
||||
label: copy.publishedProjects,
|
||||
value: publishedProjects,
|
||||
},
|
||||
].map((item, index) => {
|
||||
const Icon = item.icon;
|
||||
|
||||
return (
|
||||
<MotionFade key={item.label} delay={index * 0.05}>
|
||||
<AppCard level={2}>
|
||||
<CardContent className="flex items-center gap-4 p-6">
|
||||
<div className="flex h-12 w-12 items-center justify-center rounded-pill bg-surface-1">
|
||||
<Icon className="h-5 w-5 text-brand-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">{item.label}</p>
|
||||
<p className="text-3xl font-semibold text-foreground">{item.value}</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</AppCard>
|
||||
</MotionFade>
|
||||
);
|
||||
})}
|
||||
</section>
|
||||
|
||||
<MotionFade delay={0.15}>
|
||||
<AppCard>
|
||||
<CardContent className="p-6">
|
||||
<form className="grid gap-4 md:grid-cols-3">
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="category" className="text-sm font-medium text-foreground">
|
||||
{copy.category}
|
||||
</label>
|
||||
<select
|
||||
id="category"
|
||||
name="category"
|
||||
defaultValue={searchParams?.category ?? ""}
|
||||
className="flex h-11 w-full rounded-pill border border-border bg-background px-4 text-sm text-foreground shadow-sm"
|
||||
>
|
||||
<option value="">{copy.all}</option>
|
||||
{categories.map((category) => (
|
||||
<option key={category.id} value={category.id}>
|
||||
{category.name.de}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="status" className="text-sm font-medium text-foreground">
|
||||
{copy.status}
|
||||
</label>
|
||||
<select
|
||||
id="status"
|
||||
name="status"
|
||||
defaultValue={selectedStatus}
|
||||
className="flex h-11 w-full rounded-pill border border-border bg-background px-4 text-sm text-foreground shadow-sm"
|
||||
>
|
||||
<option value="all">{copy.all}</option>
|
||||
<option value="draft">{copy.draft}</option>
|
||||
<option value="published">{copy.published}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="flex items-end">
|
||||
<Button type="submit" variant="outline">
|
||||
{copy.filter}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
</AppCard>
|
||||
</MotionFade>
|
||||
|
||||
<div className="grid gap-4">
|
||||
{projects.map((project, index) => (
|
||||
<MotionFade key={project.id} delay={0.18 + index * 0.03}>
|
||||
<AppCard interactive>
|
||||
<CardHeader className="flex flex-row items-center justify-between gap-4">
|
||||
<div>
|
||||
<CardTitle>{getLocalizedValue(project.title, "de")}</CardTitle>
|
||||
<p className="mt-1 text-sm text-muted-foreground">
|
||||
{project.category.name.de}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
|
||||
<span className="rounded-pill border border-border px-3 py-1">
|
||||
{project.isPublished ? copy.published : copy.draft}
|
||||
</span>
|
||||
<span className="rounded-pill border border-border px-3 py-1">
|
||||
{project.projectYear}
|
||||
</span>
|
||||
<span className="rounded-pill border border-border px-3 py-1">
|
||||
{copy.sort} {project.sortOrder}
|
||||
</span>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-wrap items-center justify-between gap-4">
|
||||
<div className="space-y-1 text-sm text-muted-foreground">
|
||||
<p>{project.slug}</p>
|
||||
<p>{project.previewUrl ? copy.previewSet : copy.previewMissing}</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Button asChild variant="outline">
|
||||
<Link
|
||||
href={getLocalizedPath("de", `/portfolio/${project.slug}`)}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<ExternalLink className="h-4 w-4" />
|
||||
{copy.openProject}
|
||||
</Link>
|
||||
</Button>
|
||||
<Button asChild>
|
||||
<Link href={`/root/portfolio/projects/${project.id}`}>{copy.editProject}</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</AppCard>
|
||||
</MotionFade>
|
||||
))}
|
||||
|
||||
{projects.length === 0 ? (
|
||||
<MotionFade delay={0.18}>
|
||||
<AppCard>
|
||||
<CardContent className="p-6 text-sm text-muted-foreground">
|
||||
{copy.empty}
|
||||
</CardContent>
|
||||
</AppCard>
|
||||
</MotionFade>
|
||||
) : null}
|
||||
</div>
|
||||
<PortfolioProjectsOverview
|
||||
categories={categories}
|
||||
projects={projects}
|
||||
selectedCategory={selectedCategory}
|
||||
selectedStatus={selectedStatus}
|
||||
/>
|
||||
</div>
|
||||
</RootDashboardShell>
|
||||
);
|
||||
|
||||
@@ -1,7 +1,27 @@
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
import { MotionFade } from "@/components/motion-fade";
|
||||
import { FlashMessage } from "@/components/root/flash-message";
|
||||
import { PortfolioProjectsOverview } from "@/components/root/portfolio-projects-overview";
|
||||
import { RootDashboardShell } from "@/components/root/root-dashboard-shell";
|
||||
import { clearAdminSessionCookie, isAdminAuthenticated } from "@/lib/admin-auth";
|
||||
import { getAdminPortfolioCategories, getAdminPortfolioProjects } from "@/lib/portfolio";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
const copy = {
|
||||
title: "Portfolio Projekte",
|
||||
subtitle: "Projektliste und Einstieg in die komplette Bearbeitung.",
|
||||
overview: "Uebersicht",
|
||||
maintenance: "Wartungsmodus",
|
||||
uiKit: "UI Kit",
|
||||
media: "Media",
|
||||
siteSettings: "SEO",
|
||||
portfolio: "Portfolio",
|
||||
logout: "Ausloggen",
|
||||
backToSite: "Zur Website",
|
||||
};
|
||||
|
||||
type RootPortfolioProjectsPageProps = {
|
||||
searchParams?: {
|
||||
category?: string;
|
||||
@@ -14,23 +34,60 @@ type RootPortfolioProjectsPageProps = {
|
||||
export default async function RootPortfolioProjectsPage({
|
||||
searchParams,
|
||||
}: RootPortfolioProjectsPageProps) {
|
||||
const params = new URLSearchParams();
|
||||
|
||||
if (searchParams?.category) {
|
||||
params.set("category", searchParams.category);
|
||||
if (!isAdminAuthenticated()) {
|
||||
redirect("/root");
|
||||
}
|
||||
|
||||
if (searchParams?.status) {
|
||||
params.set("status", searchParams.status);
|
||||
async function logoutAction() {
|
||||
"use server";
|
||||
|
||||
clearAdminSessionCookie();
|
||||
redirect("/root");
|
||||
}
|
||||
|
||||
if (searchParams?.success) {
|
||||
params.set("success", searchParams.success);
|
||||
}
|
||||
const selectedCategory = searchParams?.category && searchParams.category !== "__all__"
|
||||
? searchParams.category
|
||||
: "";
|
||||
const selectedStatus = searchParams?.status === "draft" || searchParams?.status === "published"
|
||||
? searchParams.status
|
||||
: "all";
|
||||
const [categories, projects] = await Promise.all([
|
||||
getAdminPortfolioCategories(),
|
||||
getAdminPortfolioProjects({
|
||||
categoryId: selectedCategory || undefined,
|
||||
status: selectedStatus,
|
||||
}),
|
||||
]);
|
||||
|
||||
if (searchParams?.error) {
|
||||
params.set("error", searchParams.error);
|
||||
}
|
||||
return (
|
||||
<RootDashboardShell
|
||||
copy={copy}
|
||||
active="portfolio"
|
||||
portfolioChild="projects"
|
||||
logoutAction={logoutAction}
|
||||
headerTitle={copy.title}
|
||||
headerDescription={copy.subtitle}
|
||||
>
|
||||
<div className="space-y-6">
|
||||
{searchParams?.success ? (
|
||||
<MotionFade delay={0.08}>
|
||||
<FlashMessage type="success" message={searchParams.success} />
|
||||
</MotionFade>
|
||||
) : null}
|
||||
|
||||
redirect(params.toString() ? `/root/portfolio?${params.toString()}` : "/root/portfolio");
|
||||
{searchParams?.error ? (
|
||||
<MotionFade delay={0.1}>
|
||||
<FlashMessage type="error" message={searchParams.error} />
|
||||
</MotionFade>
|
||||
) : null}
|
||||
|
||||
<PortfolioProjectsOverview
|
||||
categories={categories}
|
||||
projects={projects}
|
||||
selectedCategory={selectedCategory}
|
||||
selectedStatus={selectedStatus}
|
||||
/>
|
||||
</div>
|
||||
</RootDashboardShell>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user