55 lines
1.5 KiB
TypeScript
55 lines
1.5 KiB
TypeScript
|
'use client'
|
||
|
|
|
||
|
|
import Link from 'next/link'
|
||
|
|
import { motion } from 'framer-motion'
|
||
|
|
import { LucideIcon } from 'lucide-react'
|
||
|
|
import { LiveIndicator } from './LiveIndicator'
|
||
|
|
|
||
|
|
interface FeatureCardProps {
|
||
|
|
icon: LucideIcon
|
||
|
|
title: string
|
||
|
|
description: string
|
||
|
|
href: string
|
||
|
|
stat?: string
|
||
|
|
status?: 'live' | 'offline' | 'pending'
|
||
|
|
}
|
||
|
|
|
||
|
|
export function FeatureCard({
|
||
|
|
icon: Icon,
|
||
|
|
title,
|
||
|
|
description,
|
||
|
|
href,
|
||
|
|
stat,
|
||
|
|
status = 'live',
|
||
|
|
}: FeatureCardProps) {
|
||
|
|
return (
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, y: 20 }}
|
||
|
|
whileInView={{ opacity: 1, y: 0 }}
|
||
|
|
viewport={{ once: true }}
|
||
|
|
transition={{ duration: 0.5 }}
|
||
|
|
>
|
||
|
|
<Link href={href}>
|
||
|
|
<motion.div
|
||
|
|
whileHover={{ y: -8, boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1)' }}
|
||
|
|
className="h-full border border-gray-200 dark:border-gray-700 rounded-lg p-6 hover:shadow-lg transition-shadow cursor-pointer bg-white dark:bg-gray-900"
|
||
|
|
>
|
||
|
|
<div className="flex items-start justify-between mb-4">
|
||
|
|
<Icon className="w-8 h-8 text-blue-600 dark:text-blue-400" />
|
||
|
|
<LiveIndicator status={status} />
|
||
|
|
</div>
|
||
|
|
<h3 className="text-lg font-bold mb-2">{title}</h3>
|
||
|
|
<p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
||
|
|
{description}
|
||
|
|
</p>
|
||
|
|
{stat && (
|
||
|
|
<div className="text-xs font-mono text-blue-600 dark:text-blue-400">
|
||
|
|
{stat}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</motion.div>
|
||
|
|
</Link>
|
||
|
|
</motion.div>
|
||
|
|
)
|
||
|
|
}
|