78 lines
1.9 KiB
TypeScript
78 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import { useState } from "react";
|
|
|
|
interface TechIconExternalProps {
|
|
techId: string;
|
|
techName: string;
|
|
className?: string;
|
|
size?: number;
|
|
}
|
|
|
|
// Service Simple Icons pour récupérer les icônes SVG
|
|
export function TechIconExternal({
|
|
techId,
|
|
techName,
|
|
className = "w-6 h-6",
|
|
size = 24,
|
|
}: TechIconExternalProps) {
|
|
const [imageError, setImageError] = useState(false);
|
|
|
|
// URL pour Simple Icons
|
|
const simpleIconUrl = `https://cdn.jsdelivr.net/npm/simple-icons@v9/${techId}.svg`;
|
|
|
|
// URL pour DevIcons
|
|
const devIconUrl = `https://cdn.jsdelivr.net/gh/devicons/devicon/icons/${techId}/${techId}-original.svg`;
|
|
|
|
if (imageError) {
|
|
// Fallback vers initiale si l'icône n'existe pas
|
|
return (
|
|
<div
|
|
className={`${className} bg-muted rounded flex items-center justify-center text-xs font-bold`}
|
|
>
|
|
{techName.charAt(0).toUpperCase()}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Image
|
|
src={simpleIconUrl}
|
|
alt={`${techName} icon`}
|
|
width={size}
|
|
height={size}
|
|
className={className}
|
|
onError={() => setImageError(true)}
|
|
style={{ filter: "brightness(0) saturate(100%) invert(0.5)" }} // Pour s'adapter au thème
|
|
/>
|
|
);
|
|
}
|
|
|
|
// Mapping des IDs pour Simple Icons (ils utilisent parfois des noms différents)
|
|
export const SIMPLE_ICONS_MAPPING: Record<string, string> = {
|
|
react: "react",
|
|
vue: "vuedotjs",
|
|
typescript: "typescript",
|
|
nextjs: "nextdotjs",
|
|
nodejs: "nodedotjs",
|
|
python: "python",
|
|
express: "express",
|
|
postgresql: "postgresql",
|
|
mongodb: "mongodb",
|
|
redis: "redis",
|
|
docker: "docker",
|
|
kubernetes: "kubernetes",
|
|
aws: "amazonwebservices",
|
|
terraform: "terraform",
|
|
jenkins: "jenkins",
|
|
githubactions: "githubactions",
|
|
reactnative: "react",
|
|
flutter: "flutter",
|
|
swift: "swift",
|
|
kotlin: "kotlin",
|
|
expo: "expo",
|
|
tailwindcss: "tailwindcss",
|
|
webpack: "webpack",
|
|
};
|