Initial commit

components/converter/currency-icon.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { useMemo, useState } from "react";
+
+import type { AssetType } from "@/lib/assets";
+import { FIAT_FLAG_CODES } from "@/lib/fiat-flag-codes";
+import { cn } from "@/lib/utils";
+
+const sizeClassMap = {
+  sm: "h-5 w-5",
+  md: "h-6 w-6",
+  lg: "h-8 w-8"
+} as const;
+
+type IconSize = keyof typeof sizeClassMap;
+
+interface CurrencyIconProps {
+  code: string;
+  type: AssetType;
+  size?: IconSize;
+  className?: string;
+}
+
+export function CurrencyIcon({
+  code,
+  type,
+  size = "md",
+  className
+}: CurrencyIconProps) {
+  const [cryptoMissing, setCryptoMissing] = useState(false);
+
+  const lowerCode = useMemo(() => code.toLowerCase(), [code]);
+  const wrapperSize = sizeClassMap[size];
+
+  if (type === "fiat" && FIAT_FLAG_CODES.has(lowerCode)) {
+    return (
+      <span
+        className={cn(
+          "inline-flex items-center justify-center overflow-hidden rounded-full border border-border/70 bg-background/60 shadow-[inset_0_1px_0_rgba(255,255,255,0.05)]",
+          wrapperSize,
+          className
+        )}
+        aria-hidden
+      >
+        <span
+          className={`currency-flag currency-flag-${lowerCode}`}
+          style={{
+            width: "100%",
+            height: "100%",
+            backgroundSize: "cover",
+            backgroundPosition: "center"
+          }}
+        />
+      </span>
+    );
+  }
+
+  if (type === "crypto" && !cryptoMissing) {
+    return (
+      <img
+        src={`/icons/crypto/${lowerCode}.png`}
+        alt=""
+        aria-hidden
+        className={cn("rounded-full object-cover", wrapperSize, className)}
+        onError={() => setCryptoMissing(true)}
+      />
+    );
+  }
+
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center justify-center rounded-full border border-border/70 bg-muted text-[10px] font-semibold uppercase text-muted-foreground",
+        wrapperSize,
+        className
+      )}
+      aria-hidden
+    >
+      {code.slice(0, 2)}
+    </span>
+  );
+}