30 lines
1.2 KiB
JavaScript
30 lines
1.2 KiB
JavaScript
|
import { notFound } from "next/navigation";
|
||
|
|
import Link from "next/link";
|
||
|
|
import { getItem, items } from "../../lib/data";
|
||
|
|
|
||
|
|
export function generateStaticParams() {
|
||
|
|
return items.map((it) => ({ id: it.id }));
|
||
|
|
}
|
||
|
|
|
||
|
|
export default async function ItemPage({ params }) {
|
||
|
|
const { id } = await params;
|
||
|
|
const item = getItem(id);
|
||
|
|
if (!item) return notFound();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<section style={{ padding: "60px 0" }}>
|
||
|
|
<Link href="/" style={{ color: "var(--accent)", fontSize: 14, fontWeight: 600 }}>
|
||
|
|
← Volver al inicio
|
||
|
|
</Link>
|
||
|
|
<div style={{ marginTop: 24, borderRadius: 18, overflow: "hidden", border: "1px solid var(--line)" }}>
|
||
|
|
<div className="thumb" style={{ aspectRatio: "16/9" }}>
|
||
|
|
<img src={item.img} alt={item.name} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<h1 style={{ fontSize: "clamp(28px,4vw,42px)", fontWeight: 800, marginTop: 28 }}>{item.name}</h1>
|
||
|
|
<span className="tag" style={{ marginTop: 12, marginBottom: 16, display: "inline-block" }}>{item.tag}</span>
|
||
|
|
<p style={{ fontSize: 17, color: "var(--muted)", lineHeight: 1.7, maxWidth: 680 }}>{item.description}</p>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
}
|