41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
import { useInView } from "../hooks";
|
|
import type { ReactNode } from "react";
|
|
|
|
interface SectionShellProps {
|
|
id: string;
|
|
title: string;
|
|
subtitle?: string;
|
|
children: ReactNode;
|
|
}
|
|
|
|
export default function SectionShell({ id, title, subtitle, children }: SectionShellProps) {
|
|
const [ref, inView] = useInView<HTMLElement>();
|
|
return (
|
|
<section
|
|
ref={ref}
|
|
id={id}
|
|
aria-labelledby={`${id}-title`}
|
|
className={`py-20 transition-all duration-700 ease-out ${
|
|
inView
|
|
? "motion-safe:opacity-100 motion-safe:translate-y-0"
|
|
: "motion-safe:opacity-0 motion-safe:translate-y-6"
|
|
}`}
|
|
>
|
|
<div className="container-page">
|
|
<div className="mb-12 max-w-3xl">
|
|
<h2
|
|
id={`${id}-title`}
|
|
className="text-3xl font-bold tracking-[-0.03em] md:text-4xl"
|
|
>
|
|
{title}
|
|
</h2>
|
|
{subtitle && (
|
|
<p className="mt-3 text-base leading-relaxed text-muted-foreground">{subtitle}</p>
|
|
)}
|
|
</div>
|
|
{children}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|