forked from syntaxbullet/aurorabot
49 lines
1.4 KiB
TypeScript
49 lines
1.4 KiB
TypeScript
import React, { type ReactNode } from "react";
|
|
import { cn } from "../lib/utils";
|
|
import { Card, CardHeader, CardTitle, CardContent } from "./ui/card";
|
|
import { Badge } from "./ui/badge";
|
|
|
|
interface FeatureCardProps {
|
|
title: string;
|
|
category: string;
|
|
description?: string;
|
|
icon?: ReactNode;
|
|
children?: ReactNode;
|
|
className?: string;
|
|
delay?: number; // Animation delay in ms or generic unit
|
|
}
|
|
|
|
export function FeatureCard({
|
|
title,
|
|
category,
|
|
description,
|
|
icon,
|
|
children,
|
|
className,
|
|
}: FeatureCardProps) {
|
|
return (
|
|
<Card className={cn(
|
|
"glass-card border-none hover-lift transition-all animate-in slide-up group overflow-hidden",
|
|
className
|
|
)}>
|
|
{icon && (
|
|
<div className="absolute top-0 right-0 p-8 opacity-10 group-hover:opacity-20 transition-opacity">
|
|
{icon}
|
|
</div>
|
|
)}
|
|
<CardHeader>
|
|
<Badge variant="glass" className="w-fit mb-2">{category}</Badge>
|
|
<CardTitle className="text-xl text-primary">{title}</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
{description && (
|
|
<p className="text-muted-foreground text-step--1">
|
|
{description}
|
|
</p>
|
|
)}
|
|
{children}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|