forked from phenom/healer-man
36 lines
1.1 KiB
TypeScript
36 lines
1.1 KiB
TypeScript
import type { ReactNode } from "react";
|
|
|
|
export function FrontSurface({ children, className = "", bottom = false, ariaLabel }: {
|
|
children: ReactNode;
|
|
className?: string;
|
|
bottom?: boolean;
|
|
ariaLabel: string;
|
|
}) {
|
|
return (
|
|
<section className={`front-surface ${bottom ? "front-surface--bottom" : "front-surface--top"} ${className}`} aria-label={ariaLabel}>
|
|
<div className="front-grain" aria-hidden="true" />
|
|
{children}
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export function BrandMark({ compact = false, tagline = "Answer the call" }: { compact?: boolean; tagline?: string | null }) {
|
|
return (
|
|
<div className={`front-brand ${compact ? "front-brand--compact" : ""}`}>
|
|
<span className="brand-sigil" aria-hidden="true">+</span>
|
|
<span>{tagline && <small>{tagline}</small>}<strong>Healer Man</strong></span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function ControllerLegend({ back = false }: { back?: boolean }) {
|
|
return (
|
|
<div className="controller-legend" aria-label="Controller help">
|
|
<span><b>A</b> Select</span>
|
|
{back && <span><b>B</b> Back</span>}
|
|
<span><b>+</b> Navigate</span>
|
|
<span><b>Select</b> Companion</span>
|
|
</div>
|
|
);
|
|
}
|