k.karaer/weeding
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: Responsive design for Halls page (switched to Card grid)

Browse Source
This commit is contained in:
Kenan KARAER
2025-12-03 22:00:16 +03:00
parent f670d8220f
commit 2f8ccc28c8
1 changed files with 51 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
src/app/dashboard/halls/page.tsx
View File

@@ -1,63 +1,69 @@
import { createClient } from "@/lib/supabase/server"
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table"
import { Button } from "@/components/ui/button"
import { Plus } from "lucide-react"
import { Plus, Users, Edit } from "lucide-react"
import Link from "next/link"
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
export default async function HallsPage() {
const supabase = await createClient()
const { data: halls } = await supabase.from('halls').select('*').order('created_at', { ascending: false })
return (
<div className="space-y-4">
<div className="flex items-center justify-between">
<div className="space-y-6">
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
<div>
<h2 className="text-3xl font-bold tracking-tight">Salonlar</h2>
<p className="text-muted-foreground">Düğün salonlarınızı ve kapasitelerini yönetin.</p>
</div>
<Link href="/dashboard/halls/new">
<Button>
<Button className="w-full sm:w-auto">
<Plus className="mr-2 h-4 w-4" /> Yeni Salon Ekle
</Button>
</Link>
</div>
<div className="rounded-md border">
<Table>
<TableHeader>
<TableRow>
<TableHead>İsim</TableHead>
<TableHead>Kapasite</TableHead>
<TableHead>Açıklama</TableHead>
<TableHead className="text-right">İşlemler</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{halls?.length === 0 ? (
<TableRow>
<TableCell colSpan={4} className="text-center h-24 text-muted-foreground">
Henüz salon eklenmemiş.
</TableCell>
</TableRow>
) : (
halls?.map((hall) => (
<TableRow key={hall.id}>
<TableCell className="font-medium">{hall.name}</TableCell>
<TableCell>{hall.capacity} Kişi</TableCell>
<TableCell>{hall.description}</TableCell>
<TableCell className="text-right">
<Button variant="ghost" size="sm">Düzenle</Button>
</TableCell>
</TableRow>
))
)}
</TableBody>
</Table>
<div className="flex flex-col items-center justify-center h-64 border rounded-lg bg-muted/10 border-dashed">
<p className="text-muted-foreground mb-4">Henüz salon eklenmemiş.</p>
<Link href="/dashboard/halls/new">
<Button variant="outline">İlk Salonu Ekle</Button>
</Link>
</div>
) : (
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
{halls?.map((hall) => (
<Card key={hall.id} className="flex flex-col overflow-hidden transition-all hover:shadow-md">
<CardHeader className="bg-muted/20 pb-4">
<div className="flex items-start justify-between">
<CardTitle className="text-xl font-semibold">{hall.name}</CardTitle>
<Button variant="ghost" size="icon" className="h-8 w-8 text-muted-foreground hover:text-primary">
<Edit className="h-4 w-4" />
</Button>
</div>
</CardHeader>
<CardContent className="flex-1 pt-6 space-y-4">
<div className="flex items-center text-sm text-muted-foreground bg-muted/50 p-2 rounded-md w-fit">
<Users className="mr-2 h-4 w-4" />
<span className="font-medium text-foreground">{hall.capacity}</span>
<span className="ml-1">Kişi Kapasiteli</span>
</div>
{hall.description && (
<p className="text-sm text-muted-foreground line-clamp-3">
{hall.description}
</p>
)}
</CardContent>
<CardFooter className="border-t bg-muted/10 p-4">
<div className="flex w-full items-center justify-between text-xs text-muted-foreground">
<span>ID: {hall.id.slice(0, 8)}...</span>
<Badge variant="secondary" className="font-normal">Aktif</Badge>
</div>
</CardFooter>
</Card>
))}
</div>
)}
</div>
)
}