mirror of
https://github.com/Patiun/com.gregkilmer.www.git
synced 2026-11-08 04:08:24 +00:00
Greg Kilmer
80 lines
2.2 KiB
Plaintext
80 lines
2.2 KiB
Plaintext
---
|
|
/**
|
|
* SectionHeader.astro
|
|
* ---------------------------------------------------------------------------
|
|
* Reusable section title block: a mono "kicker" (e.g. "02"), an h2 heading, and
|
|
* an optional supporting line. Keeps section openers visually consistent.
|
|
*
|
|
* `tone` controls contrast:
|
|
* - "default" for headers on lighter CONTENT surfaces (uses --color-text /
|
|
* --color-text-muted, which are tuned for the page body).
|
|
* - "hero" for headers that sit on a dark hero / starfield background: forces
|
|
* near-white title + bright subtitle + a glowing kicker so the text stands
|
|
* out against the deep Milky Way field.
|
|
*/
|
|
import Icon from "@components/Icon.astro";
|
|
|
|
interface Props {
|
|
/** Monospace kicker, e.g. "02" or "Experience". */
|
|
kicker?: string;
|
|
title: string;
|
|
/** Optional subtitle shown under the title. */
|
|
subtitle?: string;
|
|
/** Optional mdi icon shown beside the kicker. */
|
|
icon?: string;
|
|
class?: string;
|
|
align?: "left" | "center";
|
|
/** "hero" = bright text for dark backgrounds; "default" = body content. */
|
|
tone?: "default" | "hero";
|
|
}
|
|
|
|
const {
|
|
kicker,
|
|
title,
|
|
subtitle,
|
|
icon,
|
|
class: className = "",
|
|
align = "left",
|
|
tone = "default",
|
|
} = Astro.props;
|
|
|
|
const isHero = tone === "hero";
|
|
const titleColor = isHero ? "var(--color-cream)" : undefined;
|
|
const subtitleColor = isHero ? "var(--color-cream)" : "var(--color-text-muted)";
|
|
---
|
|
|
|
<div
|
|
class:list={[
|
|
"flex flex-col gap-3",
|
|
align === "center" && "items-center text-center",
|
|
className,
|
|
]}
|
|
>
|
|
{
|
|
kicker && (
|
|
<span
|
|
class="inline-flex items-center gap-2 font-mono text-xs uppercase tracking-[0.22em]"
|
|
style={
|
|
isHero
|
|
? "color: var(--color-accent); text-shadow: 0 0 14px color-mix(in srgb, var(--color-accent) 45%, transparent);"
|
|
: "color: var(--color-accent);"
|
|
}
|
|
>
|
|
{icon && <Icon name={icon} class="h-4 w-4" />}
|
|
{kicker}
|
|
</span>
|
|
)
|
|
}
|
|
<h2 style={titleColor ? `color: ${titleColor};` : undefined}>{title}</h2>
|
|
{
|
|
subtitle && (
|
|
<p
|
|
class="max-w-2xl text-base sm:text-lg"
|
|
style={`color: ${subtitleColor};${isHero ? " opacity: 0.92;" : ""}`}
|
|
>
|
|
{subtitle}
|
|
</p>
|
|
)
|
|
}
|
|
</div>
|