29 lines
1.2 KiB
JavaScript
29 lines
1.2 KiB
JavaScript
|
import Link from "next/link";
|
||
|
|
import { notFound } from "next/navigation";
|
||
|
|
import { getProduct, products } from "../../lib/products";
|
||
|
|
export function generateStaticParams() { return products.map((p) => ({ id: p.id })); }
|
||
|
|
export default async function ProductPage({ params }) {
|
||
|
|
const { id } = await params;
|
||
|
|
const p = getProduct(id);
|
||
|
|
if (!p) return notFound();
|
||
|
|
return (
|
||
|
|
<section className="detail">
|
||
|
|
<Link href="/" className="back">Volver</Link>
|
||
|
|
<div className="detail-grid">
|
||
|
|
<div className="detail-thumb" style={{ background: `linear-gradient(135deg, ${p.from}, ${p.to})` }}><span>{p.name}</span></div>
|
||
|
|
<div className="detail-info">
|
||
|
|
<span className="chip">{p.category}</span>
|
||
|
|
<h1>{p.name}</h1>
|
||
|
|
<p className="price big">${p.price}</p>
|
||
|
|
<p className="desc">{p.desc}</p>
|
||
|
|
<div className="actions">
|
||
|
|
<button className="btn btn-primary">Agregar al carrito</button>
|
||
|
|
<button className="btn btn-ghost">Guardar</button>
|
||
|
|
</div>
|
||
|
|
<ul className="perks"><li>Envio gratis en 24-48h</li><li>Garantia de 2 anos</li><li>Devolucion sin costo 30 dias</li></ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
}
|