87 lines
4.0 KiB
TypeScript
87 lines
4.0 KiB
TypeScript
|
||
import { createClient } from "@/lib/supabase-server"
|
||
import { Card, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
|
||
import { Button } from "@/components/ui/button"
|
||
import Link from "next/link"
|
||
import Image from "next/image"
|
||
|
||
|
||
|
||
// Helper to get products
|
||
async function getProducts() {
|
||
const supabase = createClient()
|
||
const { data, error } = await supabase
|
||
.from("products")
|
||
.select("*")
|
||
.eq("is_active", true)
|
||
.order("created_at", { ascending: false })
|
||
|
||
if (error) {
|
||
console.error("Error fetching products:", error)
|
||
return []
|
||
}
|
||
return data
|
||
}
|
||
|
||
export default async function ProductsPage() {
|
||
const products = await getProducts()
|
||
|
||
return (
|
||
<div className="container py-12 md:py-24">
|
||
<div className="flex flex-col items-center mb-12 text-center">
|
||
<h1 className="text-4xl font-bold tracking-tight mb-4 font-outfit">Ürün Koleksiyonumuz</h1>
|
||
<p className="text-muted-foreground max-w-2xl">
|
||
Güvenliğiniz için en son teknoloji ile üretilmiş, sertifikalı çelik kasa çözümlerimizi inceleyin.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
{products && products.length > 0 ? (
|
||
products.map((product) => (
|
||
<Card key={product.id} className="overflow-hidden border-0 shadow-md hover:shadow-xl transition-all duration-300 group">
|
||
<div className="aspect-[4/5] relative bg-slate-100 dark:bg-slate-800">
|
||
{product.image_url ? (
|
||
<Image
|
||
src={product.image_url}
|
||
alt={product.name}
|
||
fill
|
||
className="object-cover transition-transform duration-500 group-hover:scale-105"
|
||
/>
|
||
) : (
|
||
<div className="absolute inset-0 flex items-center justify-center text-slate-400">
|
||
<span className="text-sm">Görsel Yok</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
<CardHeader className="p-4">
|
||
<div className="flex justify-between items-start">
|
||
<div className="w-full">
|
||
<div className="flex justify-between items-center w-full">
|
||
<span className="text-xs font-medium text-slate-500 uppercase tracking-wider">{product.category}</span>
|
||
{product.product_code && (
|
||
<span className="text-xs font-semibold text-slate-400">#{product.product_code}</span>
|
||
)}
|
||
</div>
|
||
<CardTitle className="text-lg mt-1">{product.name}</CardTitle>
|
||
</div>
|
||
</div>
|
||
</CardHeader>
|
||
<CardFooter className="p-4 pt-0">
|
||
<Button className="w-full" variant="outline" asChild>
|
||
<Link href={`/products/${product.id}`}>
|
||
Detayları İncele
|
||
</Link>
|
||
</Button>
|
||
</CardFooter>
|
||
</Card>
|
||
))
|
||
) : (
|
||
<div className="col-span-full text-center py-12">
|
||
<p className="text-muted-foreground">Henüz vitrinde ürünümüz bulunmuyor.</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|