72 lines
2.9 KiB
TypeScript
72 lines
2.9 KiB
TypeScript
import React, { useState } from 'react'
|
|
import { ArrowLeftIcon } from 'lucide-react'
|
|
import { Reveal } from '../Reveal'
|
|
import { ButtonLink } from '../Button'
|
|
import { ProjectCard } from '../ProjectCard'
|
|
import { SectionHeading } from '../SectionHeading'
|
|
import { PROJECTS, type ProjectStatus } from '../../data/site'
|
|
|
|
const FILTERS: { key: ProjectStatus; label: string }[] = [
|
|
{ key: 'done', label: 'انجام شده' },
|
|
{ key: 'progress', label: 'در حال انجام' },
|
|
]
|
|
|
|
export function FeaturedProjects() {
|
|
const [status, setStatus] = useState<ProjectStatus>('done')
|
|
const list = PROJECTS.filter((p) => p.status === status).slice(0, 3)
|
|
|
|
return (
|
|
<section className="bg-ink py-24 lg:py-32" aria-labelledby="projects-title">
|
|
<div className="mx-auto max-w-site px-6 lg:px-10">
|
|
<SectionHeading
|
|
title="پروژههای شاخص"
|
|
lead="کارهایی که بیشترین چیز را درباره استاندارد ما میگویند؛ چه آنهایی که تحویل شدهاند و چه آنهایی که همین امروز در حال ساختاند."
|
|
/>
|
|
|
|
<div className="mt-10 flex flex-wrap items-center gap-3" role="tablist" aria-label="فیلتر وضعیت پروژه">
|
|
{FILTERS.map((filter) => (
|
|
<button
|
|
key={filter.key}
|
|
type="button"
|
|
role="tab"
|
|
aria-selected={status === filter.key}
|
|
onClick={() => setStatus(filter.key)}
|
|
className={`group relative overflow-hidden border px-7 py-3 text-sm transition-colors duration-300 ease-lux ${
|
|
status === filter.key
|
|
? 'border-copper bg-copper font-bold text-char'
|
|
: 'border-ivory/15 font-light text-ivory/65'
|
|
}`}
|
|
>
|
|
{status !== filter.key && (
|
|
<span
|
|
aria-hidden="true"
|
|
className="absolute inset-0 translate-y-full bg-copper transition-transform duration-300 ease-lux group-hover:translate-y-0"
|
|
/>
|
|
)}
|
|
<span className="relative z-10 transition-colors duration-300 ease-lux group-hover:text-char">
|
|
{filter.label}
|
|
</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
<div className="mt-10 grid gap-6 lg:grid-cols-3">
|
|
{list.map((project, i) => (
|
|
<Reveal key={project.slug} delay={0.06 * i} className="h-full">
|
|
<ProjectCard project={project} />
|
|
</Reveal>
|
|
))}
|
|
</div>
|
|
|
|
<Reveal delay={0.1}>
|
|
<div className="mt-12 flex justify-center">
|
|
<ButtonLink to="/projects" variant="outline" className="font-light">
|
|
همه پروژهها
|
|
<ArrowLeftIcon className="h-4 w-4" />
|
|
</ButtonLink>
|
|
</div>
|
|
</Reveal>
|
|
</div>
|
|
</section>
|
|
)
|
|
} |