feat: add ProjectThumbnail component with category-themed visuals for projects without images
This commit is contained in:
241
app/components/ProjectThumbnail.tsx
Normal file
241
app/components/ProjectThumbnail.tsx
Normal file
@@ -0,0 +1,241 @@
|
||||
"use client";
|
||||
|
||||
import { useMemo } from "react";
|
||||
import {
|
||||
Terminal,
|
||||
Smartphone,
|
||||
Globe,
|
||||
Code,
|
||||
LayoutDashboard,
|
||||
MessageSquare,
|
||||
Cloud,
|
||||
Wrench,
|
||||
Cpu,
|
||||
Shield,
|
||||
Boxes,
|
||||
type LucideIcon,
|
||||
} from "lucide-react";
|
||||
|
||||
interface ProjectThumbnailProps {
|
||||
title: string;
|
||||
category?: string;
|
||||
tags?: string[];
|
||||
slug?: string;
|
||||
size?: "card" | "hero";
|
||||
}
|
||||
|
||||
const categoryThemes: Record<
|
||||
string,
|
||||
{
|
||||
icon: LucideIcon;
|
||||
gradient: string;
|
||||
darkGradient: string;
|
||||
iconColor: string;
|
||||
darkIconColor: string;
|
||||
pattern: "dots" | "grid" | "diagonal" | "circuit" | "waves" | "terminal";
|
||||
}
|
||||
> = {
|
||||
"Web Development": {
|
||||
icon: Code,
|
||||
gradient: "from-liquid-sky/20 via-liquid-blue/10 to-liquid-lavender/20",
|
||||
darkGradient: "dark:from-liquid-sky/10 dark:via-liquid-blue/5 dark:to-liquid-lavender/10",
|
||||
iconColor: "text-blue-500",
|
||||
darkIconColor: "dark:text-blue-400",
|
||||
pattern: "circuit",
|
||||
},
|
||||
"Mobile Development": {
|
||||
icon: Smartphone,
|
||||
gradient: "from-liquid-mint/20 via-liquid-teal/10 to-liquid-sky/20",
|
||||
darkGradient: "dark:from-liquid-mint/10 dark:via-liquid-teal/5 dark:to-liquid-sky/10",
|
||||
iconColor: "text-emerald-500",
|
||||
darkIconColor: "dark:text-emerald-400",
|
||||
pattern: "waves",
|
||||
},
|
||||
"Web Application": {
|
||||
icon: Globe,
|
||||
gradient: "from-liquid-lavender/20 via-liquid-purple/10 to-liquid-pink/20",
|
||||
darkGradient: "dark:from-liquid-lavender/10 dark:via-liquid-purple/5 dark:to-liquid-pink/10",
|
||||
iconColor: "text-violet-500",
|
||||
darkIconColor: "dark:text-violet-400",
|
||||
pattern: "dots",
|
||||
},
|
||||
"Backend Development": {
|
||||
icon: Cpu,
|
||||
gradient: "from-liquid-amber/20 via-liquid-yellow/10 to-liquid-peach/20",
|
||||
darkGradient: "dark:from-liquid-amber/10 dark:via-liquid-yellow/5 dark:to-liquid-peach/10",
|
||||
iconColor: "text-amber-500",
|
||||
darkIconColor: "dark:text-amber-400",
|
||||
pattern: "grid",
|
||||
},
|
||||
"Full-Stack Development": {
|
||||
icon: Boxes,
|
||||
gradient: "from-liquid-teal/20 via-liquid-mint/10 to-liquid-lavender/20",
|
||||
darkGradient: "dark:from-liquid-teal/10 dark:via-liquid-mint/5 dark:to-liquid-lavender/10",
|
||||
iconColor: "text-teal-500",
|
||||
darkIconColor: "dark:text-teal-400",
|
||||
pattern: "grid",
|
||||
},
|
||||
DevOps: {
|
||||
icon: Shield,
|
||||
gradient: "from-liquid-coral/20 via-liquid-rose/10 to-liquid-peach/20",
|
||||
darkGradient: "dark:from-liquid-coral/10 dark:via-liquid-rose/5 dark:to-liquid-peach/10",
|
||||
iconColor: "text-red-500",
|
||||
darkIconColor: "dark:text-red-400",
|
||||
pattern: "diagonal",
|
||||
},
|
||||
default: {
|
||||
icon: Wrench,
|
||||
gradient: "from-liquid-peach/20 via-liquid-rose/10 to-liquid-lavender/20",
|
||||
darkGradient: "dark:from-liquid-peach/10 dark:via-liquid-rose/5 dark:to-liquid-lavender/10",
|
||||
iconColor: "text-stone-400",
|
||||
darkIconColor: "dark:text-stone-500",
|
||||
pattern: "dots",
|
||||
},
|
||||
};
|
||||
|
||||
const slugIcons: Record<string, LucideIcon> = {
|
||||
"kernel-panic-404-interactive-terminal": Terminal,
|
||||
"portfolio-website": LayoutDashboard,
|
||||
"real-time-chat-application": MessageSquare,
|
||||
"weather-forecast-app": Cloud,
|
||||
"clarity": Smartphone,
|
||||
"e-commerce-platform-api": Boxes,
|
||||
"task-management-dashboard": LayoutDashboard,
|
||||
};
|
||||
|
||||
function PatternOverlay({ pattern }: { pattern: string }) {
|
||||
const patternMap: Record<string, React.ReactNode> = {
|
||||
dots: (
|
||||
<svg className="absolute inset-0 w-full h-full opacity-[0.07] dark:opacity-[0.05]" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<pattern id="dots" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
|
||||
<circle cx="2" cy="2" r="1.5" fill="currentColor" />
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect width="100%" height="100%" fill="url(#dots)" />
|
||||
</svg>
|
||||
),
|
||||
grid: (
|
||||
<svg className="absolute inset-0 w-full h-full opacity-[0.06] dark:opacity-[0.04]" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<pattern id="grid" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
|
||||
<path d="M 40 0 L 0 0 0 40" fill="none" stroke="currentColor" strokeWidth="1" />
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect width="100%" height="100%" fill="url(#grid)" />
|
||||
</svg>
|
||||
),
|
||||
diagonal: (
|
||||
<svg className="absolute inset-0 w-full h-full opacity-[0.06] dark:opacity-[0.04]" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<pattern id="diagonal" x="0" y="0" width="24" height="24" patternUnits="userSpaceOnUse">
|
||||
<line x1="0" y1="24" x2="24" y2="0" stroke="currentColor" strokeWidth="1" />
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect width="100%" height="100%" fill="url(#diagonal)" />
|
||||
</svg>
|
||||
),
|
||||
circuit: (
|
||||
<svg className="absolute inset-0 w-full h-full opacity-[0.07] dark:opacity-[0.05]" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<pattern id="circuit" x="0" y="0" width="60" height="60" patternUnits="userSpaceOnUse">
|
||||
<path d="M0 30h20m20 0h20M30 0v20m0 20v20" stroke="currentColor" strokeWidth="0.8" fill="none" />
|
||||
<circle cx="30" cy="30" r="3" fill="currentColor" />
|
||||
<circle cx="10" cy="30" r="2" fill="currentColor" />
|
||||
<circle cx="50" cy="30" r="2" fill="currentColor" />
|
||||
<circle cx="30" cy="10" r="2" fill="currentColor" />
|
||||
<circle cx="30" cy="50" r="2" fill="currentColor" />
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect width="100%" height="100%" fill="url(#circuit)" />
|
||||
</svg>
|
||||
),
|
||||
waves: (
|
||||
<svg className="absolute inset-0 w-full h-full opacity-[0.06] dark:opacity-[0.04]" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<pattern id="waves" x="0" y="0" width="100" height="20" patternUnits="userSpaceOnUse">
|
||||
<path d="M0 10 Q25 0 50 10 T100 10" fill="none" stroke="currentColor" strokeWidth="1" />
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect width="100%" height="100%" fill="url(#waves)" />
|
||||
</svg>
|
||||
),
|
||||
terminal: (
|
||||
<svg className="absolute inset-0 w-full h-full opacity-[0.08] dark:opacity-[0.06]" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<pattern id="terminal" x="0" y="0" width="200" height="30" patternUnits="userSpaceOnUse">
|
||||
<text x="4" y="18" fontFamily="monospace" fontSize="10" fill="currentColor">$_</text>
|
||||
<text x="50" y="18" fontFamily="monospace" fontSize="10" fill="currentColor" opacity="0.4">│</text>
|
||||
<text x="70" y="18" fontFamily="monospace" fontSize="10" fill="currentColor" opacity="0.6">404</text>
|
||||
<text x="110" y="18" fontFamily="monospace" fontSize="10" fill="currentColor" opacity="0.4">│</text>
|
||||
<text x="130" y="18" fontFamily="monospace" fontSize="10" fill="currentColor" opacity="0.3">ERR</text>
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect width="100%" height="100%" fill="url(#terminal)" />
|
||||
</svg>
|
||||
),
|
||||
};
|
||||
|
||||
return patternMap[pattern] || patternMap.dots;
|
||||
}
|
||||
|
||||
export default function ProjectThumbnail({
|
||||
title,
|
||||
category,
|
||||
tags,
|
||||
slug,
|
||||
size = "card",
|
||||
}: ProjectThumbnailProps) {
|
||||
const theme = useMemo(() => {
|
||||
if (slug && slugIcons[slug]) {
|
||||
const matchedTheme = categoryThemes[category || ""] || categoryThemes.default;
|
||||
return { ...matchedTheme, icon: slugIcons[slug] };
|
||||
}
|
||||
return categoryThemes[category || ""] || categoryThemes.default;
|
||||
}, [category, slug]);
|
||||
|
||||
const Icon = theme.icon;
|
||||
|
||||
const isHero = size === "hero";
|
||||
|
||||
const displayTags = tags?.slice(0, 3) ?? [];
|
||||
|
||||
const sizeClasses = isHero
|
||||
? ""
|
||||
: "";
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`absolute inset-0 flex items-center justify-center bg-gradient-to-br ${theme.gradient} ${theme.darkGradient} ${sizeClasses}`}
|
||||
>
|
||||
<PatternOverlay pattern={theme.pattern} />
|
||||
|
||||
<div className="relative z-10 flex flex-col items-center gap-3 sm:gap-4">
|
||||
<div
|
||||
className={`flex items-center justify-center rounded-2xl bg-white/60 dark:bg-white/10 backdrop-blur-sm border border-white/40 dark:border-white/10 ${theme.iconColor} ${theme.darkIconColor} ${isHero ? "w-20 h-20 sm:w-28 sm:h-28" : "w-14 h-14 sm:w-20 sm:h-20"}`}
|
||||
>
|
||||
<Icon className={isHero ? "w-10 h-10 sm:w-14 sm:h-14" : "w-7 h-7 sm:w-10 sm:h-10"} strokeWidth={1.5} />
|
||||
</div>
|
||||
|
||||
<span
|
||||
className={`font-black tracking-tighter uppercase ${isHero ? "text-2xl sm:text-4xl md:text-5xl" : "text-sm sm:text-lg"} text-stone-400/80 dark:text-stone-500/80`}
|
||||
>
|
||||
{title}
|
||||
</span>
|
||||
|
||||
{displayTags.length > 0 && (
|
||||
<div className={`flex flex-wrap justify-center gap-1.5 sm:gap-2 ${isHero ? "max-w-md" : "max-w-[200px]"}`}>
|
||||
{displayTags.map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
className={`px-2 py-0.5 rounded-full bg-white/50 dark:bg-white/5 backdrop-blur-sm border border-white/30 dark:border-white/10 text-stone-500 dark:text-stone-400 font-medium ${isHero ? "text-xs sm:text-sm" : "text-[9px] sm:text-[10px]"}`}
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user