86 lines
4.2 KiB
TypeScript
86 lines
4.2 KiB
TypeScript
import Link from "next/link"
|
||
import { Button } from "@/components/ui/button"
|
||
import { Plus, Pencil, GripVertical } from "lucide-react"
|
||
import { getSliders } from "./actions"
|
||
import { Card, CardContent } from "@/components/ui/card"
|
||
import Image from "next/image"
|
||
import { Badge } from "@/components/ui/badge"
|
||
|
||
export default async function SlidersPage() {
|
||
const { data: sliders, error } = await getSliders()
|
||
|
||
if (error) {
|
||
return <div className="p-8 text-red-500">Hata: {error}</div>
|
||
}
|
||
|
||
return (
|
||
<div className="flex-1 space-y-4 p-8 pt-6">
|
||
<div className="flex items-center justify-between space-y-2">
|
||
<h2 className="text-3xl font-bold tracking-tight">Slider Yönetimi</h2>
|
||
<div className="flex items-center space-x-2">
|
||
<Link href="/dashboard/sliders/new">
|
||
<Button>
|
||
<Plus className="mr-2 h-4 w-4" /> Yeni Slider Ekle
|
||
</Button>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid gap-4">
|
||
{sliders?.length === 0 ? (
|
||
<Card>
|
||
<CardContent className="flex flex-col items-center justify-center p-12 text-muted-foreground">
|
||
<p>Henüz hiç slider eklenmemiş.</p>
|
||
</CardContent>
|
||
</Card>
|
||
) : (
|
||
sliders?.map((slider) => (
|
||
<Card key={slider.id} className="overflow-hidden">
|
||
<div className="flex flex-col sm:flex-row items-center p-2 gap-4">
|
||
<div className="p-2 cursor-move text-muted-foreground">
|
||
<GripVertical className="h-5 w-5" />
|
||
</div>
|
||
|
||
<div className="relative w-full sm:w-48 h-32 sm:h-24 rounded-md overflow-hidden bg-slate-100 flex-shrink-0">
|
||
<Image
|
||
src={slider.image_url}
|
||
alt={slider.title}
|
||
fill
|
||
className="object-cover"
|
||
/>
|
||
</div>
|
||
|
||
<div className="flex-1 min-w-0 grid gap-1 text-center sm:text-left">
|
||
<div className="flex items-center gap-2 justify-center sm:justify-start">
|
||
<h3 className="font-semibold truncate">{slider.title}</h3>
|
||
{!slider.is_active && (
|
||
<Badge variant="secondary">Pasif</Badge>
|
||
)}
|
||
<Badge variant="outline">Sıra: {slider.order}</Badge>
|
||
</div>
|
||
<p className="text-sm text-muted-foreground truncate">
|
||
{slider.description || "Açıklama yok"}
|
||
</p>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-2 p-2">
|
||
<Link href={`/dashboard/sliders/${slider.id}`}>
|
||
<Button variant="ghost" size="icon">
|
||
<Pencil className="h-4 w-4" />
|
||
</Button>
|
||
</Link>
|
||
{/* Delete functionality usually needs a client component or form action,
|
||
for simplicity here we will just link to edit,
|
||
or we can add a delete button with server action in a separate client component if needed.
|
||
Ideally, list items should be client components to handle delete easily.
|
||
*/}
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
))
|
||
)}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|