89 lines
4.3 KiB
TypeScript
89 lines
4.3 KiB
TypeScript
import Link from "next/link";
|
|
|
|
import { serverFetch } from "../../lib/api";
|
|
|
|
function toText(value: unknown, fallback = "") {
|
|
return typeof value === "string" && value ? value : fallback;
|
|
}
|
|
|
|
function asWorks(value: unknown): Array<Record<string, unknown>> {
|
|
return Array.isArray(value) ? value as Array<Record<string, unknown>> : [];
|
|
}
|
|
|
|
export default async function ShowcasePage({ params }: { params: Promise<{ slug: string }> }) {
|
|
const { slug } = await params;
|
|
const { showcase } = await serverFetch<{ showcase: Record<string, unknown> }>(`/showcases/${slug}`);
|
|
const works = asWorks(showcase.works);
|
|
const makerName = toText(showcase.maker_name, "Maker");
|
|
const title = toText(showcase.title, "Escaparate");
|
|
const coverImage = toText(showcase.cover_image_url, toText(works[0]?.image_url, "/demo/work-custom.svg"));
|
|
const contactHref = `/consultas/nueva?makerId=${encodeURIComponent(String(showcase.maker_id))}&sourceType=showcase&sourceId=${encodeURIComponent(String(showcase.id))}&makerName=${encodeURIComponent(makerName)}&contextTitle=${encodeURIComponent(title)}&returnTo=${encodeURIComponent(`/showcases/${slug}`)}`;
|
|
|
|
return (
|
|
<main className="page-shell showcase-public-page">
|
|
<section className="showcase-public-phone">
|
|
<section className="showcase-public-hero" style={{ backgroundImage: `url(${coverImage})` }}>
|
|
<div className="maker-public-top-actions">
|
|
<Link href={`/makers/${toText(showcase.maker_slug)}`} className="maker-public-circle-action" aria-label="Volver al maker"><</Link>
|
|
<button className="maker-public-circle-action" type="button" aria-label="Compartir">sh</button>
|
|
</div>
|
|
<div>
|
|
<span className="eyebrow">Escaparate publico</span>
|
|
<h1>{title}</h1>
|
|
<p>{toText(showcase.description, "Coleccion de trabajos destacados del maker.")}</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="showcase-public-stats">
|
|
<article><strong>{works.length}</strong><span>Trabajos</span></article>
|
|
<article><strong>1.284</strong><span>Visitas</span></article>
|
|
<article><strong>38</strong><span>Consultas</span></article>
|
|
<article><strong>4,9</strong><span>Valoracion</span></article>
|
|
</section>
|
|
|
|
{works[0] ? (
|
|
<section className="maker-public-section">
|
|
<span className="eyebrow">Trabajo destacado</span>
|
|
<Link href={`/works/${toText(works[0].slug)}`} className="showcase-featured-work">
|
|
<img src={toText(works[0].image_url, "/demo/work-custom.svg")} alt={toText(works[0].title)} />
|
|
<div>
|
|
<strong>{toText(works[0].title)}</strong>
|
|
<span>{toText(works[0].technology, "FDM")} | {toText(works[0].material, "PLA")}</span>
|
|
</div>
|
|
<b>></b>
|
|
</Link>
|
|
</section>
|
|
) : null}
|
|
|
|
<section className="maker-public-section">
|
|
<div className="maker-public-section-head">
|
|
<h2>Todos los trabajos</h2>
|
|
<span>{works.length}</span>
|
|
</div>
|
|
<div className="showcase-public-work-grid">
|
|
{works.map((work) => (
|
|
<Link key={String(work.id)} href={`/works/${toText(work.slug)}`}>
|
|
<img src={toText(work.image_url, "/demo/work-custom.svg")} alt={toText(work.title)} />
|
|
<strong>{toText(work.title)}</strong>
|
|
<span>{toText(work.technology, "FDM")} | {toText(work.material, "PLA")}</span>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
<section className="maker-public-section maker-public-info-bottom">
|
|
<span className="eyebrow">Compartir escaparate</span>
|
|
<div className="work-detail-share-actions">
|
|
<a className="work-detail-share-option" href={`https://wa.me/?text=${encodeURIComponent(`Mira este escaparate de ${makerName}: ${title} - https://dev.jazari.com.ar/showcases/${slug}`)}`}>WhatsApp</a>
|
|
<button className="work-detail-share-option" type="button">Copiar enlace</button>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
|
|
<div className="maker-public-bottom-cta">
|
|
<a href={contactHref} className="button button-primary">Iniciar consulta desde este escaparate</a>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|