176 lines
7.0 KiB
TypeScript
176 lines
7.0 KiB
TypeScript
import React, { useState } from 'react'
|
|
import { Link, useParams } from 'react-router-dom'
|
|
import { ArrowLeftIcon, ChevronLeftIcon } from 'lucide-react'
|
|
import { Reveal } from '../components/Reveal'
|
|
import { ButtonLink } from '../components/Button'
|
|
import { ProjectCard } from '../components/ProjectCard'
|
|
import { ContactSection } from '../components/ContactSection'
|
|
import { Lightbox } from '../components/Lightbox'
|
|
import { useEffect } from 'react';
|
|
import { useSite, useStatusLabel } from '../api';
|
|
import { useLang } from '../i18n/lang';
|
|
import { applySeo } from '../seo';
|
|
|
|
export function ProjectDetail() {
|
|
const { slug } = useParams<{ slug: string }>()
|
|
const { projects, brand } = useSite()
|
|
const { t, href, lang } = useLang()
|
|
const project = projects.find((p) => p.slug === slug)
|
|
const statusLabel = useStatusLabel(project?.status ?? '')
|
|
const [lightbox, setLightbox] = useState<number | null>(null)
|
|
|
|
// عنوان تب، توضیح متا و OG از خود پروژه
|
|
useEffect(() => {
|
|
if (!project) return;
|
|
applySeo({
|
|
title: `${project.title} | ${brand.name}`,
|
|
description: project.summary,
|
|
path: href(`/projects/${project.slug}`),
|
|
image: project.image,
|
|
lang,
|
|
});
|
|
}, [project?.id, lang, href]);
|
|
|
|
if (!project) {
|
|
return (
|
|
<section className="flex min-h-[70vh] flex-col items-center justify-center px-6 text-center">
|
|
<h1 className="text-section font-bold text-ivory">{t('projectNotFound')}</h1>
|
|
<p className="mt-4 text-sm font-light text-ivory/60">
|
|
{t('projectNotFoundText')}
|
|
</p>
|
|
<ButtonLink to={href('/projects')} variant="copper" className="mt-8">
|
|
{t('backToProjects')}
|
|
<ArrowLeftIcon className="h-4 w-4 ltr:-scale-x-100" />
|
|
</ButtonLink>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
const related = projects.filter((p) => p.slug !== project.slug).slice(0, 3)
|
|
|
|
const facts = [
|
|
{ label: t('specLocation'), value: project.location },
|
|
{ label: t('specYear'), value: project.year },
|
|
{ label: t('specArea'), value: project.area },
|
|
{ label: t('specFloors'), value: project.floors },
|
|
{ label: t('specUnits'), value: project.units },
|
|
{ label: t('specClient'), value: project.client },
|
|
]
|
|
|
|
return (
|
|
<>
|
|
<section className="relative flex h-[62vh] min-h-[440px] items-end overflow-hidden">
|
|
<img src={project.image} alt="" aria-hidden="true" className="absolute inset-0 h-full w-full object-cover" />
|
|
<div className="absolute inset-0 bg-ink/72" aria-hidden="true" />
|
|
<div
|
|
className="absolute inset-0"
|
|
style={{ background: 'linear-gradient(to top, #27221c 6%, rgba(39,34,28,0.15) 70%)' }}
|
|
aria-hidden="true"
|
|
/>
|
|
<div className="relative mx-auto w-full max-w-site px-6 pb-16 lg:px-10">
|
|
<nav aria-label={t('breadcrumbAria')} className="flex items-center gap-2 text-xs font-light text-ivory/50">
|
|
<Link to={href('/')} className="transition-colors hover:text-copper">
|
|
{t('home')}
|
|
</Link>
|
|
<ChevronLeftIcon className="h-3.5 w-3.5 ltr:rotate-180" />
|
|
<Link to={href('/projects')} className="transition-colors hover:text-copper">
|
|
{t('projects')}
|
|
</Link>
|
|
<ChevronLeftIcon className="h-3.5 w-3.5 ltr:rotate-180" />
|
|
<span className="text-copper">{project.title}</span>
|
|
</nav>
|
|
<h1 className="mt-5 max-w-[700px] text-hero font-bold text-ivory">{project.title}</h1>
|
|
<p className="mt-5 max-w-2xl text-base font-light leading-9 text-ivory/70">{project.summary}</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="bg-char py-20 lg:py-28" aria-label={t('projectDetailsAria')}>
|
|
<div className="mx-auto grid max-w-site items-start gap-12 px-6 lg:grid-cols-2 lg:gap-16 lg:px-10">
|
|
|
|
<Reveal className="order-1">
|
|
<span className="flex items-center gap-3 text-sm font-light text-copper">
|
|
<span aria-hidden="true" className="h-px w-8 bg-copper" />
|
|
{statusLabel}
|
|
</span>
|
|
<h2 className="mt-4 text-3xl font-bold text-ivory">{t('aboutProject')}</h2>
|
|
|
|
{project.body.map((para) => (
|
|
<p key={para} className="mt-5 text-base font-light leading-9 text-ivory/70">
|
|
{para}
|
|
</p>
|
|
))}
|
|
|
|
<dl className="mt-10 grid grid-cols-2 gap-px border border-ivory/10 bg-ivory/10">
|
|
{facts.map((f) => (
|
|
<div key={f.label} className="bg-ink p-6 md:p-8 ltr:text-left rtl:text-right">
|
|
<dt className="text-xs font-light text-ivory/50">{f.label}</dt>
|
|
<dd className="mt-3 text-sm font-bold text-ivory">{f.value}</dd>
|
|
</div>
|
|
))}
|
|
</dl>
|
|
|
|
<div className="mt-10">
|
|
<ButtonLink to={href('/contact')} variant="outline" className="font-light">
|
|
{t('similarProjectCta')}
|
|
</ButtonLink>
|
|
</div>
|
|
</Reveal>
|
|
|
|
<Reveal delay={0.1} className="order-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => setLightbox(0)}
|
|
className="group block w-full overflow-hidden focus:outline-none focus-visible:ring-2 focus-visible:ring-copper"
|
|
>
|
|
<img
|
|
src={project.gallery[0] || project.image}
|
|
alt=""
|
|
className="aspect-[4/3] w-full object-cover transition-transform duration-500 ease-lux group-hover:scale-105"
|
|
/>
|
|
</button>
|
|
<div className="mt-4 grid grid-cols-3 gap-4">
|
|
{project.gallery.slice(1).map((img, i) => (
|
|
<button
|
|
key={img}
|
|
type="button"
|
|
onClick={() => setLightbox(i + 1)}
|
|
className="group block overflow-hidden focus:outline-none focus-visible:ring-2 focus-visible:ring-copper"
|
|
>
|
|
<img
|
|
src={img}
|
|
alt=""
|
|
className="aspect-square w-full object-cover transition-transform duration-500 ease-lux group-hover:scale-105"
|
|
/>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</Reveal>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<section className="bg-ink py-20 lg:py-28" aria-label={t('relatedProjectsAria')}>
|
|
<div className="mx-auto max-w-site px-6 lg:px-10">
|
|
<h2 className="text-section font-bold text-ivory">{t('otherProjects')}</h2>
|
|
<div className="mt-6 h-px w-24 bg-copper/70" />
|
|
<div className="mt-12 grid gap-6 lg:grid-cols-3">
|
|
{related.map((item, i) => (
|
|
<Reveal key={item.slug} delay={0.06 * i} className="h-full">
|
|
<ProjectCard project={item} />
|
|
</Reveal>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<Lightbox
|
|
images={project.gallery}
|
|
index={lightbox}
|
|
onClose={() => setLightbox(null)}
|
|
onChange={setLightbox}
|
|
/>
|
|
|
|
<ContactSection />
|
|
</>
|
|
)
|
|
} |