69 lines
2.1 KiB
TypeScript
69 lines
2.1 KiB
TypeScript
'use client';
|
|
|
|
import { useRef, useEffect } from 'react';
|
|
import { useTranslations } from "next-intl";
|
|
|
|
type props = {
|
|
dateLabel: string;
|
|
category: string;
|
|
roles: string[];
|
|
client: string;
|
|
};
|
|
|
|
function MetaItem({ label, children }: { label: string; children: React.ReactNode }) {
|
|
return (
|
|
<div className="flex flex-col gap-2">
|
|
<span className="font-sans text-[10px] uppercase tracking-[0.2em] text-brand-brown/40">
|
|
{label}
|
|
</span>
|
|
<div className="font-sans text-sm text-brand-brown/80 leading-relaxed">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function ProjectMeta({ dateLabel, category, roles, client }: props) {
|
|
const ref = useRef<HTMLElement>(null);
|
|
const t = useTranslations('projectPage.meta');
|
|
|
|
useEffect(() => {
|
|
const el = ref.current;
|
|
if (!el) return;
|
|
const observer = new IntersectionObserver(
|
|
([entry]) => {
|
|
if (entry.isIntersecting) {
|
|
el.classList.add('visible');
|
|
observer.unobserve(el);
|
|
}
|
|
},
|
|
{ threshold: 0.2 }
|
|
);
|
|
observer.observe(el);
|
|
return () => observer.disconnect();
|
|
}, []);
|
|
|
|
return (
|
|
<section ref={ref} className="reveal py-12 md:py-16">
|
|
{/* Top divider */}
|
|
<div className="w-full h-px bg-brand-brown/10 mb-10" />
|
|
|
|
<div className="grid grid-cols-2 gap-8 md:grid-cols-4 md:gap-12">
|
|
<MetaItem label={t('year')}>{dateLabel}</MetaItem>
|
|
<MetaItem label={t('category')}>{category}</MetaItem>
|
|
<MetaItem label={t('roles')}>
|
|
<div className="flex flex-col gap-1">
|
|
{roles.map((role) => (
|
|
<span key={role}>{role}</span>
|
|
))}
|
|
</div>
|
|
</MetaItem>
|
|
<MetaItem label={t('client')}>{client}</MetaItem>
|
|
</div>
|
|
|
|
{/* Bottom divider */}
|
|
<div className="w-full h-px bg-brand-brown/10 mt-10" />
|
|
</section>
|
|
);
|
|
}
|