Implement use cases page

2026-05-17 21:41:54 -06:00
parent b6b9b63608
commit 450da4d8ab
78 changed files with 1870 additions and 118 deletions
@@ -1,16 +1,20 @@
 "use client";

-import { memo } from "react";
+import { memo, useId } from "react";
 import { IconView } from "./Icon.view";
 import type { IconProps } from "./Icon.types";

 const IconContainer = memo<IconProps>(
-  ({ icon, title, description, className = "", onClick }) => {
+  ({ icon, title, description, className = "", onClick, interactive: interactiveProp = true }) => {
+    const layoutTitleId = useId();
+
    const handleClick = () => {
+      if (!interactiveProp) return;
      if (onClick) onClick();
    };

    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (!interactiveProp) return;
      if (event.key === "Enter" || event.key === " ") {
        event.preventDefault();
        handleClick();
@@ -23,6 +27,8 @@ const IconContainer = memo<IconProps>(
        title={title}
        description={description}
        className={className}
+        interactive={interactiveProp}
+        layoutTitleId={layoutTitleId}
        onClick={handleClick}
        onKeyDown={handleKeyDown}
      />