Component cleanup

2026-04-29 07:20:16 -06:00
parent 252848eba9
commit e6127f1a3f
267 changed files with 2087 additions and 2196 deletions
@@ -0,0 +1,105 @@
+"use client";
+
+import Image from "next/image";
+import { memo } from "react";
+import ArrowBackIcon from "./arrow_back.svg";
+import ContentCopyIcon from "./content_copy.svg";
+import EditIcon from "./edit.svg";
+import ExclamationIcon from "./exclamation.svg";
+import ChevronRightIcon from "./chevron_right.svg";
+import LogOutIcon from "./log_out.svg";
+import MailIcon from "./mail.svg";
+import WarningIcon from "./warning.svg";
+
+export const ICON_NAME_OPTIONS = [
+  "arrow_back",
+  "chevron_right",
+  "content_copy",
+  "edit",
+  "exclamation",
+  "log_out",
+  "mail",
+  "warning",
+] as const;
+
+export type IconName = (typeof ICON_NAME_OPTIONS)[number];
+
+type SvgComponent =
+  | React.ComponentType<React.SVGProps<SVGSVGElement>>
+  | { default: React.ComponentType<React.SVGProps<SVGSVGElement>> };
+
+/** SVG import may be a React component or a module object { default: Component } (e.g. with Turbopack) */
+const iconMap: Record<IconName, SvgComponent> = {
+  arrow_back: ArrowBackIcon,
+  chevron_right: ChevronRightIcon,
+  content_copy: ContentCopyIcon,
+  edit: EditIcon,
+  exclamation: ExclamationIcon,
+  log_out: LogOutIcon,
+  mail: MailIcon,
+  warning: WarningIcon,
+};
+
+function resolveSvgComponent(module: SvgComponent) {
+  if (
+    typeof module === "object" &&
+    module !== null &&
+    "default" in module
+  ) {
+    return (
+      module as {
+        default: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+      }
+    ).default;
+  }
+  return module as React.ComponentType<React.SVGProps<SVGSVGElement>>;
+}
+
+export interface IconProps {
+  name: IconName;
+  className?: string;
+  /** Width and height (default 24) */
+  size?: number;
+  "aria-hidden"?: boolean;
+}
+
+function IconComponent({
+  name,
+  className = "",
+  size = 24,
+  "aria-hidden": ariaHidden = true,
+}: IconProps) {
+  const SvgModule = iconMap[name];
+  if (!SvgModule) return null;
+  const resolved = resolveSvgComponent(SvgModule);
+
+  // Turbopack/webpack mismatch: `.svg` may be a URL string instead of SVGR output.
+  if (typeof resolved === "string") {
+    return (
+      <Image
+        src={resolved}
+        width={size}
+        height={size}
+        className={className}
+        alt=""
+        unoptimized
+        aria-hidden={ariaHidden}
+      />
+    );
+  }
+
+  if (resolved == null) return null;
+
+  const Svg = resolved as React.ComponentType<React.SVGProps<SVGSVGElement>>;
+
+  return (
+    <Svg
+      width={size}
+      height={size}
+      className={className}
+      aria-hidden={ariaHidden}
+    />
+  );
+}
+
+export default memo(IconComponent);
@@ -0,0 +1,3 @@
+export { default } from "./Icon";
+export { ICON_NAME_OPTIONS } from "./Icon";
+export type { IconName, IconProps } from "./Icon";