forge/frontend/components/ModuleCard.tsx

30 lines
786 B
TypeScript

'use client';
import Link from 'next/link';
import { LucideIcon } from 'lucide-react';
interface ModuleCardProps {
title: string;
description: string;
icon: LucideIcon;
href: string;
color?: string;
}
export default function ModuleCard({
title,
description,
icon: Icon,
href,
color = 'forge-yellow',
}: ModuleCardProps) {
return (
<Link href={href} className="module-card group block h-full">
<div className={`w-12 h-12 bg-${color}/10 rounded-lg flex items-center justify-center mb-4 group-hover:bg-${color}/20 transition-colors`}>
<Icon className={`w-6 h-6 text-${color}`} />
</div>
<h3 className="text-lg font-semibold text-white mb-2">{title}</h3>
<p className="text-gray-400 text-sm">{description}</p>
</Link>
);
}