80 lines
2.1 KiB
TypeScript
80 lines
2.1 KiB
TypeScript
import Link from "next/link";
|
|
import {
|
|
Wind, Wrench, ThermometerSun, Paintbrush, Droplet, Tv, HelpCircle, ArrowRight,
|
|
PaintBucket, Refrigerator, Hammer, Key, Bath, PaintRoller, Grid, Layers,
|
|
AlertTriangle, Waves, Droplets, WashingMachine, Snowflake, Store, ScanLine, Settings
|
|
} from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface IconCardProps {
|
|
title: string;
|
|
description: string;
|
|
iconName: string;
|
|
href?: string;
|
|
className?: string;
|
|
}
|
|
|
|
const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
|
|
Wind,
|
|
Wrench,
|
|
ThermometerSun,
|
|
Paintbrush,
|
|
Droplet,
|
|
Tv,
|
|
PaintBucket,
|
|
Refrigerator,
|
|
Hammer,
|
|
Key,
|
|
Bath,
|
|
PaintRoller,
|
|
Grid,
|
|
Layers,
|
|
AlertTriangle,
|
|
Waves,
|
|
Droplets,
|
|
WashingMachine,
|
|
Snowflake,
|
|
Store,
|
|
ScanLine,
|
|
Settings,
|
|
};
|
|
|
|
export function IconCard({ title, description, iconName, href, className }: IconCardProps) {
|
|
const Icon = iconMap[iconName] || HelpCircle;
|
|
|
|
const cardContent = (
|
|
<>
|
|
<div className="p-3 rounded-lg bg-slate-100 text-primary w-fit group-hover:bg-accent-light group-hover:text-accent transition-colors duration-300">
|
|
<Icon className="size-6" />
|
|
</div>
|
|
<h3 className="text-lg font-semibold text-primary font-heading mt-4 group-hover:text-accent transition-colors">
|
|
{title}
|
|
</h3>
|
|
<p className="text-sm text-text-muted mt-2 leading-relaxed flex-grow">
|
|
{description}
|
|
</p>
|
|
{href && (
|
|
<div className="flex items-center gap-1 text-xs font-semibold text-primary group-hover:text-accent mt-4 transition-colors">
|
|
<span>Dowiedz się więcej</span>
|
|
<ArrowRight className="size-3.5 group-hover:translate-x-1 transition-transform" />
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
|
|
const cardClasses = cn(
|
|
"group border border-border rounded-xl p-6 bg-white hover:shadow-md transition-all duration-300 flex flex-col justify-between h-full",
|
|
className
|
|
);
|
|
|
|
if (href) {
|
|
return (
|
|
<Link href={href} className={cardClasses}>
|
|
{cardContent}
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
return <div className={cardClasses}>{cardContent}</div>;
|
|
}
|