88 lines
3.1 KiB
TypeScript
88 lines
3.1 KiB
TypeScript
import React from 'react';
|
|
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
type TenantHeroCardProps = {
|
|
badge?: string;
|
|
title: string;
|
|
description?: string;
|
|
supporting?: string[];
|
|
primaryAction?: React.ReactNode;
|
|
secondaryAction?: React.ReactNode;
|
|
aside?: React.ReactNode;
|
|
children?: React.ReactNode;
|
|
className?: string;
|
|
};
|
|
|
|
export function TenantHeroCard({
|
|
badge,
|
|
title,
|
|
description,
|
|
supporting,
|
|
primaryAction,
|
|
secondaryAction,
|
|
aside,
|
|
children,
|
|
className,
|
|
}: TenantHeroCardProps) {
|
|
return (
|
|
<Card
|
|
className={cn(
|
|
'relative overflow-hidden border border-slate-200 bg-white text-slate-900 shadow-lg shadow-rose-100/50 backdrop-blur dark:border-white/10 dark:bg-slate-900/80 dark:text-slate-100',
|
|
className
|
|
)}
|
|
>
|
|
<CardContent className="relative z-10 flex flex-col gap-6 px-5 py-6 sm:px-6 lg:flex-row lg:items-start lg:justify-between">
|
|
<div className="space-y-4">
|
|
{badge ? (
|
|
<span className="inline-flex items-center gap-2 rounded-full bg-rose-100/80 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.25em] text-rose-600 dark:bg-white/15 dark:text-white">
|
|
{badge}
|
|
</span>
|
|
) : null}
|
|
|
|
<div className="space-y-2 text-slate-700 dark:text-slate-100">
|
|
<h1 className="font-display text-2xl font-semibold leading-tight text-slate-900 dark:text-white sm:text-3xl">
|
|
{title}
|
|
</h1>
|
|
{description ? (
|
|
<p className="text-sm text-slate-600 dark:text-white/80">{description}</p>
|
|
) : null}
|
|
{supporting?.map((paragraph) => (
|
|
<p key={paragraph} className="text-sm text-slate-600 dark:text-white/70">
|
|
{paragraph}
|
|
</p>
|
|
))}
|
|
{children}
|
|
</div>
|
|
|
|
{(primaryAction || secondaryAction) && (
|
|
<div className="flex flex-wrap gap-2">
|
|
{primaryAction}
|
|
{secondaryAction}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{aside ? (
|
|
<div className="rounded-2xl border border-slate-200/70 bg-white/90 p-4 text-sm dark:border-white/10 dark:bg-white/5">
|
|
{aside}
|
|
</div>
|
|
) : null}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
export const tenantHeroPrimaryButtonClass = cn(
|
|
'rounded-full bg-rose-600 px-6 text-sm font-semibold text-white shadow-md shadow-rose-400/30 transition-colors',
|
|
'hover:bg-rose-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rose-300 focus-visible:ring-offset-2 focus-visible:ring-offset-white',
|
|
'dark:focus-visible:ring-offset-slate-950'
|
|
);
|
|
|
|
export const tenantHeroSecondaryButtonClass = cn(
|
|
'rounded-full border border-slate-200/80 bg-white/95 px-6 text-sm font-semibold text-slate-700 shadow-sm transition-colors',
|
|
'hover:bg-rose-50 hover:text-rose-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rose-200 focus-visible:ring-offset-2 focus-visible:ring-offset-white',
|
|
'dark:border-white/20 dark:bg-white/10 dark:text-white dark:hover:bg-white/20 dark:focus-visible:ring-offset-slate-950'
|
|
);
|