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

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

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