106 lines
6.1 KiB
TypeScript
106 lines
6.1 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { useParams } from 'next/navigation';
|
|
import PageLayout from '../../components/PageLayout';
|
|
import { useActiveCoffees } from '../hooks/getActiveCoffees';
|
|
import CoffeeDetailGallery from '../components/CoffeeDetailGallery';
|
|
import { useCoffeePictures } from '../hooks/useCoffeePictures';
|
|
import { useTranslation } from '../../i18n/useTranslation';
|
|
|
|
export default function CoffeeAbonnementDetailPage() {
|
|
const { t } = useTranslation();
|
|
const params = useParams();
|
|
const { coffees, loading, error } = useActiveCoffees();
|
|
|
|
const rawId = params?.id;
|
|
const coffeeId = Array.isArray(rawId) ? rawId[0] : rawId;
|
|
const { pictureUrls: endpointPictureUrls, loading: picturesLoading } = useCoffeePictures(coffeeId ? String(coffeeId) : undefined);
|
|
const coffee = coffees.find((item) => item.id === String(coffeeId));
|
|
const fallbackGallery = coffee ? (coffee.gallery.length ? coffee.gallery : (coffee.image ? [coffee.image] : [])) : [];
|
|
const gallery = endpointPictureUrls.length ? endpointPictureUrls : fallbackGallery;
|
|
|
|
return (
|
|
<PageLayout contentClassName="flex-1 relative w-full">
|
|
<div className="min-h-screen bg-[radial-gradient(circle_at_top_left,rgba(251,191,36,0.10),transparent_22%),radial-gradient(circle_at_top_right,rgba(56,189,248,0.10),transparent_24%),linear-gradient(180deg,#f8fafc_0%,#f8fafc_50%,#eef2ff_100%)]">
|
|
<div className="max-w-[1820px] mx-auto px-4 sm:px-6 xl:px-10 py-8 space-y-5">
|
|
<div className="rounded-[28px] border border-white/80 bg-white/90 px-8 py-6 shadow-[0_24px_70px_-40px_rgba(15,23,42,0.3)] backdrop-blur flex flex-wrap items-center justify-between gap-4">
|
|
<div>
|
|
<div className="inline-flex items-center rounded-full border border-slate-200 bg-white px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.28em] text-slate-500">{t('autofix.kbdc4e405')}</div>
|
|
<h1 className="mt-3 text-2xl font-bold tracking-tight text-slate-900">{t('autofix.k50bb594b')}</h1>
|
|
<p className="mt-1 text-sm text-slate-500">{t('autofix.ka157a704')}</p>
|
|
</div>
|
|
<Link
|
|
href="/coffee-abonnements"
|
|
className="inline-flex items-center gap-2 rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm font-semibold text-slate-700 shadow-sm hover:bg-slate-50 transition"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
|
</svg>{t('autofix.k96839795')}</Link>
|
|
</div>
|
|
|
|
{loading && (
|
|
<div className="rounded-[28px] border border-white/80 bg-white/90 p-8 shadow-[0_24px_70px_-40px_rgba(15,23,42,0.3)] backdrop-blur">
|
|
<div className="h-80 rounded-2xl bg-slate-100 animate-pulse" />
|
|
</div>
|
|
)}
|
|
|
|
{!loading && error && (
|
|
<div className="rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
{!loading && !error && !coffee && (
|
|
<div className="rounded-[28px] border border-white/80 bg-white/90 p-8 shadow-[0_24px_70px_-40px_rgba(15,23,42,0.3)] backdrop-blur">
|
|
<h2 className="text-lg font-semibold text-slate-900">{t('autofix.kbcb6ceea')}</h2>
|
|
<p className="mt-2 text-sm text-slate-500">{t('autofix.k8e0e178e')}</p>
|
|
</div>
|
|
)}
|
|
|
|
{!loading && !error && coffee && (
|
|
<div className="grid grid-cols-1 xl:grid-cols-5 gap-5">
|
|
<div className="xl:col-span-3 rounded-[28px] border border-white/80 bg-white/90 p-6 shadow-[0_24px_70px_-40px_rgba(15,23,42,0.3)] backdrop-blur">
|
|
<CoffeeDetailGallery images={gallery} alt={coffee.name} />
|
|
</div>
|
|
|
|
<div className="xl:col-span-2 space-y-5">
|
|
<div className="rounded-[28px] border border-white/80 bg-white/90 p-6 shadow-[0_24px_70px_-40px_rgba(15,23,42,0.3)] backdrop-blur">
|
|
<h2 className="text-xl font-semibold text-slate-900">{coffee.name}</h2>
|
|
<p className="mt-3 text-sm leading-6 text-slate-600">{coffee.description || t('autofix.kec078e54')}</p>
|
|
|
|
<div className="mt-5 space-y-2">
|
|
<div className="flex items-center justify-between rounded-xl border border-slate-200 bg-slate-50 px-4 py-2">
|
|
<span className="text-sm text-slate-600">{t('autofix.kab208d8e')}</span>
|
|
<span className="text-sm font-semibold text-slate-900">EUR {coffee.pricePer10.toFixed(2)}</span>
|
|
</div>
|
|
<div className="flex items-center justify-between rounded-xl border border-slate-200 bg-slate-50 px-4 py-2">
|
|
<span className="text-sm text-slate-600">{t('autofix.ke0eb10f2')}</span>
|
|
<span className="text-sm font-semibold text-slate-900">EUR {(coffee.pricePer10 / 10).toFixed(2)}</span>
|
|
</div>
|
|
<div className="flex items-center justify-between rounded-xl border border-slate-200 bg-slate-50 px-4 py-2">
|
|
<span className="text-sm text-slate-600">{t('autofix.k5bd8edf9')}</span>
|
|
<span className="text-sm font-semibold text-slate-900">
|
|
{picturesLoading ? 'Loading...' : gallery.length}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="rounded-[28px] border border-white/80 bg-white/90 p-6 shadow-[0_24px_70px_-40px_rgba(15,23,42,0.3)] backdrop-blur">
|
|
<p className="text-sm text-slate-600">{t('autofix.k31c4f5d9')}</p>
|
|
<Link
|
|
href="/coffee-abonnements"
|
|
className="mt-4 inline-flex items-center justify-center rounded-xl bg-slate-900 px-4 py-2 text-sm font-semibold text-white hover:bg-slate-800 transition"
|
|
>{t('autofix.k47e6f301')}</Link>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</PageLayout>
|
|
);
|
|
}
|