59 lines
1.6 KiB
TypeScript
59 lines
1.6 KiB
TypeScript
import type { ReactNode } from "react";
|
|
|
|
type Props = {
|
|
/** English label — logo-style lowercase latin */
|
|
en: string;
|
|
/** Primary Persian phrase (solid black) */
|
|
title: string;
|
|
/** Secondary Persian phrase (lighter black), slider-style */
|
|
titleMuted?: string;
|
|
as?: "h1" | "h2";
|
|
/** Invert colors for dark sections */
|
|
light?: boolean;
|
|
/** Optional sibling (lead, link, CTA) */
|
|
aside?: ReactNode;
|
|
className?: string;
|
|
};
|
|
|
|
/**
|
|
* Section heading inspired by the HOM logo + hero slider title:
|
|
* latin rail (line + red dot), then FA title split into black / muted parts.
|
|
*/
|
|
export function SectionTitle({
|
|
en,
|
|
title,
|
|
titleMuted,
|
|
as = "h2",
|
|
light = false,
|
|
aside,
|
|
className,
|
|
}: Props) {
|
|
const Heading = as;
|
|
|
|
return (
|
|
<div className={`section-title${light ? " section-title--light" : ""}${className ? ` ${className}` : ""}`}>
|
|
<div className="section-title__main">
|
|
<div className="section-title__rail" aria-hidden="true">
|
|
<span className="section-title__en latin">{en}</span>
|
|
<span className="section-title__track">
|
|
<span className="section-title__line" />
|
|
<span className="section-title__capsule" />
|
|
<span className="section-title__line section-title__line--tail" />
|
|
<span className="section-title__dot" />
|
|
</span>
|
|
</div>
|
|
<Heading className="section-title__fa">
|
|
{title}
|
|
{titleMuted ? (
|
|
<>
|
|
{" "}
|
|
<em>{titleMuted}</em>
|
|
</>
|
|
) : null}
|
|
</Heading>
|
|
</div>
|
|
{aside ? <div className="section-title__aside">{aside}</div> : null}
|
|
</div>
|
|
);
|
|
}
|