web-portfolio/components/ui/section-heading.tsx

import type { ReactNode } from 'react';

type Props = {
	title: string;
	children?: ReactNode;
};

const SectionHeading = ({ title, children }: Props) => (
	<div className="mb-6 flex flex-col justify-between gap-2 border-b border-white/15 pb-4 sm:flex-row sm:items-end">
		<div className="flex items-center gap-3">
			<span aria-hidden className="h-px w-5 bg-aurora" />
			<h2 className="font-display text-2xl font-normal tracking-tight text-ink md:text-3xl">
				{title}
			</h2>
		</div>
		{children && <p className="text-sm text-ink/70">{children}</p>}
	</div>
);

export default SectionHeading;