109 lines
2.5 KiB
TypeScript
109 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import { getTechIcon } from "./tech-icons";
|
|
|
|
interface SmartTechIconProps {
|
|
techId: string;
|
|
techName: string;
|
|
className?: string;
|
|
fallbackStyle?: "initial" | "emoji" | "gradient";
|
|
}
|
|
|
|
// Emojis pour certaines technologies populaires
|
|
const TECH_EMOJIS: Record<string, string> = {
|
|
react: "⚛️",
|
|
vue: "💚",
|
|
typescript: "🔷",
|
|
nextjs: "▲",
|
|
nodejs: "🟢",
|
|
python: "🐍",
|
|
javascript: "💛",
|
|
html: "🧡",
|
|
css: "💙",
|
|
docker: "🐳",
|
|
kubernetes: "☸️",
|
|
aws: "☁️",
|
|
git: "🌿",
|
|
github: "🐙",
|
|
mongodb: "🍃",
|
|
postgresql: "🐘",
|
|
redis: "🔴",
|
|
mysql: "🐬",
|
|
flutter: "💙",
|
|
swift: "🦉",
|
|
kotlin: "🟣",
|
|
java: "☕",
|
|
php: "🐘",
|
|
ruby: "💎",
|
|
go: "🐹",
|
|
rust: "🦀",
|
|
csharp: "💜",
|
|
};
|
|
|
|
export function SmartTechIcon({
|
|
techId,
|
|
techName,
|
|
className = "w-6 h-6",
|
|
fallbackStyle = "initial",
|
|
}: SmartTechIconProps) {
|
|
// Essayer d'abord l'icône SVG locale
|
|
const TechIcon = getTechIcon(techId);
|
|
|
|
// Si ce n'est pas l'icône par défaut, l'utiliser
|
|
if (TechIcon !== getTechIcon("default")) {
|
|
return <TechIcon className={className} />;
|
|
}
|
|
|
|
// Sinon, utiliser le style de fallback
|
|
switch (fallbackStyle) {
|
|
case "emoji":
|
|
const emoji = TECH_EMOJIS[techId];
|
|
if (emoji) {
|
|
return (
|
|
<div
|
|
className={`${className} flex items-center justify-center text-lg`}
|
|
>
|
|
{emoji}
|
|
</div>
|
|
);
|
|
}
|
|
break;
|
|
|
|
case "gradient":
|
|
const gradientColors = [
|
|
"from-blue-500 to-purple-500",
|
|
"from-green-500 to-blue-500",
|
|
"from-red-500 to-pink-500",
|
|
"from-yellow-500 to-orange-500",
|
|
"from-purple-500 to-indigo-500",
|
|
];
|
|
const colorIndex = techId.length % gradientColors.length;
|
|
|
|
return (
|
|
<div
|
|
className={`${className} bg-gradient-to-br ${gradientColors[colorIndex]} rounded flex items-center justify-center text-white text-xs font-bold`}
|
|
>
|
|
{techName.charAt(0).toUpperCase()}
|
|
</div>
|
|
);
|
|
|
|
default: // "initial"
|
|
return (
|
|
<div
|
|
className={`${className} bg-muted rounded flex items-center justify-center text-xs font-bold`}
|
|
>
|
|
{techName.charAt(0).toUpperCase()}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Fallback final
|
|
return (
|
|
<div
|
|
className={`${className} bg-muted rounded flex items-center justify-center text-xs font-bold`}
|
|
>
|
|
{techName.charAt(0).toUpperCase()}
|
|
</div>
|
|
);
|
|
}
|