42 lines
No EOL
1.3 KiB
TypeScript
42 lines
No EOL
1.3 KiB
TypeScript
import { Link } from "react-router-dom";
|
|
import { ArrowRight } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface ThemeCardProps {
|
|
title: string;
|
|
description: string;
|
|
path: string;
|
|
icon?: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
const ThemeCard = ({ title, description, path, icon, className }: ThemeCardProps) => {
|
|
return (
|
|
<Link
|
|
to={path}
|
|
className={cn(
|
|
"group block bg-surface border border-outline rounded-lg p-6 shadow-card hover:shadow-card-hover transition-all duration-200",
|
|
className
|
|
)}
|
|
>
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex-1">
|
|
{icon && (
|
|
<div className="w-12 h-12 bg-surface-variant rounded-lg flex items-center justify-center mb-4 group-hover:bg-accent group-hover:text-accent-foreground transition-colors">
|
|
{icon}
|
|
</div>
|
|
)}
|
|
<h3 className="text-lg font-semibold text-foreground mb-2 group-hover:text-accent transition-colors">
|
|
{title}
|
|
</h3>
|
|
<p className="text-muted-foreground text-sm leading-relaxed">
|
|
{description}
|
|
</p>
|
|
</div>
|
|
<ArrowRight className="w-5 h-5 text-muted-foreground group-hover:text-accent transition-all flex-shrink-0 ml-4" />
|
|
</div>
|
|
</Link>
|
|
);
|
|
};
|
|
|
|
export default ThemeCard; |