56 lines
2.0 KiB
TypeScript
56 lines
2.0 KiB
TypeScript
import React from 'react';
|
|
import { CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { LucideIcon } from 'lucide-react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
import { FrostedSurface } from '../../components/tenant';
|
|
|
|
export interface HighlightItem {
|
|
id: string;
|
|
icon: LucideIcon;
|
|
title: string;
|
|
description: string;
|
|
badge?: string;
|
|
}
|
|
|
|
interface OnboardingHighlightsGridProps {
|
|
items: HighlightItem[];
|
|
className?: string;
|
|
}
|
|
|
|
export function OnboardingHighlightsGrid({ items, className }: OnboardingHighlightsGridProps) {
|
|
if (!items.length) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className={cn('grid gap-4 md:grid-cols-3', className)}>
|
|
{items.map(({ id, icon: Icon, title, description, badge }) => (
|
|
<FrostedSurface
|
|
key={id}
|
|
className="relative overflow-hidden rounded-3xl border border-white/20 p-6 text-slate-900 shadow-md shadow-rose-200/20 dark:border-slate-800/70 dark:bg-slate-950/80"
|
|
>
|
|
<CardHeader className="space-y-3">
|
|
<div className="flex items-center justify-between">
|
|
<span className="flex size-12 items-center justify-center rounded-full bg-rose-100/80 text-rose-500 shadow-inner shadow-rose-200/60 dark:bg-rose-500/20 dark:text-rose-200">
|
|
<Icon className="size-6" />
|
|
</span>
|
|
{badge && (
|
|
<span className="rounded-full bg-rose-100 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-rose-500 dark:bg-rose-500/20 dark:text-rose-200">
|
|
{badge}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<CardTitle className="text-lg font-semibold text-slate-900 dark:text-slate-100">{title}</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="text-sm text-slate-600 dark:text-slate-400">{description}</p>
|
|
</CardContent>
|
|
</FrostedSurface>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
OnboardingHighlightsGrid.displayName = 'OnboardingHighlightsGrid';
|