72 lines
2.1 KiB
TypeScript
72 lines
2.1 KiB
TypeScript
import Link from "next/link";
|
|
import { ReactNode } from "react";
|
|
|
|
export function SectionHeading({
|
|
eyebrow,
|
|
title,
|
|
desc,
|
|
cta,
|
|
align = "left",
|
|
}: {
|
|
eyebrow: string;
|
|
title: ReactNode;
|
|
desc?: ReactNode;
|
|
cta?: { label: string; href: string };
|
|
align?: "left" | "center" | "split";
|
|
}) {
|
|
if (align === "center") {
|
|
return (
|
|
<div className="section-head--center">
|
|
<span className="eyebrow">{eyebrow}</span>
|
|
<h2 className="display-title ts-34-44 section-head__title">{title}</h2>
|
|
{desc && <p className="section-head__desc section-head__desc--center">{desc}</p>}
|
|
</div>
|
|
);
|
|
}
|
|
if (align === "split") {
|
|
return (
|
|
<div className="section-head--split">
|
|
<div className="section-head__col">
|
|
<span className="eyebrow">{eyebrow}</span>
|
|
<h2 className="display-title ts-32-40 section-head__title">{title}</h2>
|
|
</div>
|
|
<div className="section-head__aside">
|
|
{desc && <p className="section-head__desc">{desc}</p>}
|
|
{cta && (
|
|
<Link href={cta.href} className="link-arrow">
|
|
{cta.label}
|
|
</Link>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
return (
|
|
<div>
|
|
<span className="eyebrow">{eyebrow}</span>
|
|
<h2 className="display-title ts-32-40 section-head__title">{title}</h2>
|
|
{desc && <p className="section-head__desc section-head__desc--left">{desc}</p>}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function Stars({ n = 3, total = 5 }: { n?: number; total?: number }) {
|
|
return (
|
|
<div className="stars">
|
|
{Array.from({ length: total }).map((_, i) => (
|
|
<svg key={i} width="16" height="16" viewBox="0 0 24 24" fill={i < n ? "#FFC107" : "#E3E3E3"}>
|
|
<path d="M12 2l2.9 6.3 6.9.7-5.1 4.6 1.4 6.8L12 17.6 5.9 20.4l1.4-6.8L2.2 9l6.9-.7L12 2z" />
|
|
</svg>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function Arrow({ className = "" }: { className?: string }) {
|
|
return (
|
|
<svg className={className} width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
|
<path d="M5 12h14M13 6l6 6-6 6" strokeLinecap="round" strokeLinejoin="round" />
|
|
</svg>
|
|
);
|
|
}
|