init

components/icons/tech-icon.tsx

@@ -0,0 +1,77 @@
+"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",
+};