31 lines
844 B
TypeScript
31 lines
844 B
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { type ReactNode } from "react";
|
||
|
|
|
||
|
|
type Props = {
|
||
|
|
id?: string;
|
||
|
|
title: string;
|
||
|
|
children: ReactNode;
|
||
|
|
};
|
||
|
|
|
||
|
|
export default function Section({ id, title, children }: Props) {
|
||
|
|
return (
|
||
|
|
<section id={id} className="mx-auto max-w-6xl px-4 py-14 sm:px-6">
|
||
|
|
<h2 className="text-2xl font-semibold tracking-tight text-zinc-900 opacity-0 animate-[fadein_500ms_ease-out_forwards] dark:text-zinc-100 sm:text-3xl">
|
||
|
|
{title}
|
||
|
|
</h2>
|
||
|
|
<div className="mt-5 text-zinc-700 opacity-0 animate-[fadein_500ms_ease-out_forwards] [animation-delay:60ms] dark:text-zinc-300">
|
||
|
|
{children}
|
||
|
|
</div>
|
||
|
|
<style jsx>{`
|
||
|
|
@keyframes fadein {
|
||
|
|
from { opacity: 0; transform: translateY(8px); }
|
||
|
|
to { opacity: 1; transform: translateY(0); }
|
||
|
|
}
|
||
|
|
`}</style>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
|