web/components/pages/main/FeatureCard.tsx

31 lines
875 B
TypeScript

import React from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
interface FeatureCardProps {
title: string
description: string
icon: React.ElementType
}
/* TODO: I plan to add a better animation in the future, hover effects are not
good here, in my opinion. */
const FeatureCard = ({ title, description, icon: Icon }: FeatureCardProps) => {
return (
<Card className="bg-background border-accent transition-colors duration-300">
<CardHeader>
<CardTitle className="flex items-center">
<Icon className="h-6 w-6 mr-2 text-blue-400" />
<span className="text-xl">{title}</span>
</CardTitle>
</CardHeader>
<CardContent>
<CardDescription>{description}</CardDescription>
</CardContent>
</Card>
)
}
export default FeatureCard