39 lines
1.3 KiB
TypeScript
39 lines
1.3 KiB
TypeScript
import type { ReactNode } from 'react';
|
|
|
|
interface WorkspaceHeroProps {
|
|
eyebrow: string;
|
|
title: string;
|
|
description: string;
|
|
action?: ReactNode;
|
|
scope?: ReactNode;
|
|
controls?: ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
export function WorkspaceHero({
|
|
eyebrow,
|
|
title,
|
|
description,
|
|
action,
|
|
scope,
|
|
controls,
|
|
className = '',
|
|
}: WorkspaceHeroProps) {
|
|
return (
|
|
<header
|
|
className={`mb-6 rounded-3xl border border-white/5 bg-[radial-gradient(circle_at_2%_2%,rgba(56,189,248,0.12),transparent_40%),linear-gradient(170deg,rgba(15,23,42,0.92),rgba(11,12,16,0.95))] px-5 py-5 sm:px-8 sm:py-8 shadow-[0_32px_64px_-16px_rgba(0,0,0,0.6)] backdrop-blur-2xl ${className}`}
|
|
>
|
|
<p className="system-data text-[10px] uppercase tracking-[0.2em] text-sky-400/70 font-bold">{eyebrow}</p>
|
|
<div className="mt-2 flex flex-wrap items-center justify-between gap-4">
|
|
<div className="flex items-center gap-4">
|
|
<h1 className="ui-text text-2xl font-bold tracking-tight text-text-strong sm:text-4xl">{title}</h1>
|
|
{action}
|
|
</div>
|
|
<p className="ui-text hidden max-w-md text-sm leading-relaxed text-text-muted/90 sm:block">{description}</p>
|
|
</div>
|
|
{scope ? <div className="mt-3">{scope}</div> : null}
|
|
{controls ? <div className="mt-3">{controls}</div> : null}
|
|
</header>
|
|
);
|
|
}
|
|
|