İmage upload,sıkıştırma

app/(dashboard)/dashboard/sliders/page.tsx

@@ -0,0 +1,85 @@
+import Link from "next/link"
+import { Button } from "@/components/ui/button"
+import { Plus, Pencil, Trash2, GripVertical } from "lucide-react"
+import { getSliders, deleteSlider } 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>
+    )
+}