77 lines
1.9 KiB
TypeScript
77 lines
1.9 KiB
TypeScript
import { cn } from '@/lib/utils';
|
|
import type { LucideIcon } from 'lucide-react';
|
|
|
|
interface FeatureCardProps {
|
|
illustration?: React.ReactNode;
|
|
title: string;
|
|
description: string;
|
|
icon?: LucideIcon;
|
|
children?: React.ReactNode;
|
|
className?: string;
|
|
variant?: 'default' | 'large';
|
|
}
|
|
|
|
interface FeatureCardContainerProps {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
export const FeatureCardBackground = () => (
|
|
<div
|
|
className={cn(
|
|
'pointer-events-none absolute inset-0 bg-linear-to-br opacity-0 blur-2xl transition-opacity duration-300 group-hover:opacity-100',
|
|
'dark:from-blue-500/10 dark:via-transparent dark:to-emerald-500/5',
|
|
'light:from-blue-800/20 light:via-transparent light:to-emerald-900/10',
|
|
)}
|
|
/>
|
|
);
|
|
|
|
export function FeatureCardContainer({
|
|
children,
|
|
className,
|
|
}: FeatureCardContainerProps) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'col gap-8 p-6 rounded-3xl border bg-background group relative overflow-hidden',
|
|
className,
|
|
)}
|
|
>
|
|
<FeatureCardBackground />
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function FeatureCard({
|
|
illustration,
|
|
title,
|
|
description,
|
|
icon: Icon,
|
|
children,
|
|
className,
|
|
}: FeatureCardProps) {
|
|
if (illustration) {
|
|
return (
|
|
<FeatureCardContainer className={className}>
|
|
{illustration}
|
|
<div className="col gap-2" data-content>
|
|
<h3 className="text-xl font-semibold">{title}</h3>
|
|
<p className="text-muted-foreground">{description}</p>
|
|
</div>
|
|
{children}
|
|
</FeatureCardContainer>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<FeatureCardContainer className={className}>
|
|
{Icon && <Icon className="size-6" />}
|
|
<div className="col gap-2">
|
|
<h3 className="text-lg font-semibold">{title}</h3>
|
|
<p className="text-sm text-muted-foreground">{description}</p>
|
|
</div>
|
|
</FeatureCardContainer>
|
|
);
|
|
}
|