40 lines
1.0 KiB
TypeScript
40 lines
1.0 KiB
TypeScript
import React from "react";
|
|
import { cn } from "../lib/utils";
|
|
import { Badge } from "./ui/badge";
|
|
|
|
interface SectionHeaderProps {
|
|
badge: string;
|
|
title: string;
|
|
description?: string;
|
|
align?: "center" | "left" | "right";
|
|
className?: string;
|
|
}
|
|
|
|
export function SectionHeader({
|
|
badge,
|
|
title,
|
|
description,
|
|
align = "center",
|
|
className,
|
|
}: SectionHeaderProps) {
|
|
const alignClasses = {
|
|
center: "text-center mx-auto",
|
|
left: "text-left mr-auto", // reset margin if needed
|
|
right: "text-right ml-auto",
|
|
};
|
|
|
|
return (
|
|
<div className={cn("space-y-4 mb-16", alignClasses[align], className)}>
|
|
<Badge variant="glass" className="py-1.5 px-4">{badge}</Badge>
|
|
<h2 className="text-3xl md:text-4xl font-black text-primary tracking-tight">
|
|
{title}
|
|
</h2>
|
|
{description && (
|
|
<p className="text-muted-foreground text-lg max-w-2xl mx-auto">
|
|
{description}
|
|
</p>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|