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,35 @@
+"use client";
+
+import { memo } from "react";
+import { IconView } from "./Icon.view";
+import type { IconProps } from "./Icon.types";
+
+const IconContainer = memo<IconProps>(
+  ({ icon, title, description, className = "", onClick }) => {
+    const handleClick = () => {
+      if (onClick) onClick();
+    };
+
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        handleClick();
+      }
+    };
+
+    return (
+      <IconView
+        icon={icon}
+        title={title}
+        description={description}
+        className={className}
+        onClick={handleClick}
+        onKeyDown={handleKeyDown}
+      />
+    );
+  },
+);
+
+IconContainer.displayName = "Icon";
+
+export default IconContainer;
@@ -0,0 +1,16 @@
+export interface IconProps {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+  className?: string;
+  onClick?: () => void;
+}
+
+export interface IconViewProps {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+  className: string;
+  onClick: () => void;
+  onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+}
@@ -0,0 +1,38 @@
+"use client";
+
+import type { IconViewProps } from "./Icon.types";
+
+export function IconView({
+  icon,
+  title,
+  description,
+  className,
+  onClick,
+  onKeyDown,
+}: IconViewProps) {
+  return (
+    <div
+      className={`border border-[var(--color-border-default-primary)] flex flex-col h-[350px] items-start justify-between p-[var(--measures-spacing-020)] relative w-[288px] bg-transparent cursor-pointer transition-all duration-200 hover:scale-[1.02] hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-brand-primary)] focus:ring-offset-2 ${className}`}
+      tabIndex={0}
+      role="button"
+      aria-label={`${title}: ${description}`}
+      onClick={onClick}
+      onKeyDown={onKeyDown}
+    >
+      {/* Icon */}
+      <div className="shrink-0 w-[36px] h-[36px] flex items-center justify-center">
+        {icon}
+      </div>
+
+      {/* Title - Centered with auto space above and below */}
+      <h3 className="font-inter font-normal text-[32px] leading-[36px] text-[var(--color-content-default-primary)] w-full">
+        {title}
+      </h3>
+
+      {/* Description */}
+      <p className="font-inter font-medium text-[10px] leading-[14px] uppercase text-[var(--color-content-default-primary)] w-full">
+        {description}
+      </p>
+    </div>
+  );
+}
@@ -0,0 +1,2 @@
+export { default } from "./Icon.container";
+export type { IconProps } from "./Icon.types";