7a68cafe35
This commit includes the temporary Next.js build cache files, public brand logos, and project configuration added in this change.
45 lines
1.7 KiB
TypeScript
45 lines
1.7 KiB
TypeScript
import * as React from "react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
/* ============================================================================
|
|
* BrandStripe — a horizontal tri-color bar that paints the WFDASH brand
|
|
* identity (blue → orange → red) as a UI accent.
|
|
*
|
|
* Used in:
|
|
* - the sidebar (below the brand block + as a bottom signature)
|
|
* - the login card (top accent strip)
|
|
* - the top of the (app) page, as a thin 2px banner
|
|
*
|
|
* The three hues are the literal peaks of the WFDASH logo (sampled
|
|
* from /public/wfdash-logo.png). The bar's color stops match the
|
|
* logo's geometry: the left peak is narrower (blue), the middle peak
|
|
* wider (orange — the "centre" of the W), and the right peak the
|
|
* widest (red). The order is preserved by the gradient stops below.
|
|
*
|
|
* Implementation is a single absolutely-positioned `<div>` with a
|
|
* `linear-gradient(90deg, …)` background. No DOM children, no ARIA
|
|
* roles — purely decorative.
|
|
* ========================================================================= */
|
|
|
|
type BrandStripeProps = {
|
|
/** Tailwind height class. Defaults to `h-1` (4px). */
|
|
className?: string;
|
|
/** Override the underlying element (e.g. when wrapped in a sticky bar). */
|
|
style?: React.CSSProperties;
|
|
} & Omit<React.HTMLAttributes<HTMLDivElement>, "className" | "style">;
|
|
|
|
export function BrandStripe({ className, style, ...rest }: BrandStripeProps) {
|
|
return (
|
|
<div
|
|
aria-hidden="true"
|
|
className={cn("w-full", className)}
|
|
style={{
|
|
background:
|
|
"linear-gradient(90deg, var(--brand-blue) 0%, var(--brand-blue) 28%, var(--brand-orange) 50%, var(--brand-red) 72%, var(--brand-red) 100%)",
|
|
...style,
|
|
}}
|
|
{...rest}
|
|
/>
|
|
);
|
|
}
|