csa-dashboard-sementara/csa-dashboard/app/(dashboard)/cms/content/page.tsx

86 lines
3.0 KiB
TypeScript

"use client";
import { useRouter } from "next/navigation";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { CMS_TYPES, CMS_TYPE_LABELS } from "@/config/constants";
import { FileText, Sparkles, Image, Layout } from "lucide-react";
const contentTypes = [
{
type: CMS_TYPES.SPLASH,
label: CMS_TYPE_LABELS.splash,
description: "Splash screen content for app launch",
icon: Sparkles,
color: "text-purple-500",
},
{
type: CMS_TYPES.PROMO,
label: CMS_TYPE_LABELS.promo,
description: "Promotional content and offers",
icon: Image,
color: "text-blue-500",
},
{
type: CMS_TYPES.ARTICLE,
label: CMS_TYPE_LABELS.article,
description: "Articles and blog posts",
icon: FileText,
color: "text-green-500",
},
{
type: CMS_TYPES.BANNER,
label: CMS_TYPE_LABELS.banner,
description: "Banner advertisements",
icon: Layout,
color: "text-orange-500",
},
{
type: CMS_TYPES.FLOATING_WIDGET,
label: CMS_TYPE_LABELS.floatingWidget,
description: "Floating widget content",
icon: Image,
color: "text-pink-500",
},
];
export default function ContentOverviewPage() {
const router = useRouter();
return (
<div className="space-y-6">
<div>
<h1 className="text-3xl font-bold">CMS Content Management</h1>
<p className="text-muted-foreground">
Manage different types of content for your applications
</p>
</div>
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
{contentTypes.map((item) => (
<Card key={item.type} className="hover:shadow-lg transition-shadow cursor-pointer">
<CardHeader>
<div className="flex items-center justify-between">
<item.icon className={`h-8 w-8 ${item.color}`} />
<Button
size="sm"
onClick={() => router.push(`/cms/content/${item.type}`)}
>
Manage
</Button>
</div>
<CardTitle>{item.label}</CardTitle>
<CardDescription>{item.description}</CardDescription>
</CardHeader>
<CardContent>
<div className="text-sm text-muted-foreground">
Click &quot;Manage&quot; to view and edit {item.label.toLowerCase()} content
</div>
</CardContent>
</Card>
))}
</div>
</div>
);
}