Reorganize components

2026-02-05 22:37:00 -07:00
parent db3c0274f6
commit 6f178e934f
61 changed files with 45 additions and 44 deletions
@@ -0,0 +1,97 @@
+"use client";
+
+import { memo, useMemo } from "react";
+import MiniCardView from "./MiniCard.view";
+import type { MiniCardProps } from "./MiniCard.types";
+
+const MiniCardContainer = memo<MiniCardProps>(
+  ({
+    children,
+    className = "",
+    backgroundColor = "bg-[var(--color-surface-default-brand-royal)]",
+    panelContent,
+    label,
+    labelLine1,
+    labelLine2,
+    onClick,
+    href,
+    ariaLabel,
+  }) => {
+    // Compute aria-label
+    const computedAriaLabel = useMemo(
+      () =>
+        ariaLabel ||
+        (labelLine1 && labelLine2
+          ? `${labelLine1} ${labelLine2}`
+          : label || "Feature card"),
+      [ariaLabel, labelLine1, labelLine2, label],
+    );
+
+    // Determine wrapper element and props
+    const { wrapperElement, wrapperProps } = useMemo(() => {
+      const baseProps = {
+        "aria-label": computedAriaLabel,
+      };
+
+      if (href) {
+        return {
+          wrapperElement: "a" as const,
+          wrapperProps: {
+            ...baseProps,
+            href,
+            className:
+              "block focus:outline-none focus:ring-2 focus:ring-[var(--color-surface-default-brand-royal)] focus:ring-offset-2 rounded-[var(--radius-measures-radius-xlarge)] transition-all duration-200 hover:scale-[1.02]",
+            tabIndex: 0,
+          },
+        };
+      }
+
+      if (onClick) {
+        return {
+          wrapperElement: "button" as const,
+          wrapperProps: {
+            ...baseProps,
+            onClick,
+            className:
+              "block w-full text-left focus:outline-none focus:ring-2 focus:ring-[var(--color-surface-default-brand-royal)] focus:ring-offset-2 rounded-[var(--radius-measures-radius-xlarge)] transition-all duration-200 hover:scale-[1.02]",
+            tabIndex: 0,
+            onKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onClick();
+              }
+            },
+          },
+        };
+      }
+
+      return {
+        wrapperElement: "div" as const,
+        wrapperProps: {
+          ...baseProps,
+          className: "block",
+        },
+      };
+    }, [href, onClick, computedAriaLabel]);
+
+    return (
+      <MiniCardView
+        className={className}
+        backgroundColor={backgroundColor}
+        panelContent={panelContent}
+        label={label}
+        labelLine1={labelLine1}
+        labelLine2={labelLine2}
+        computedAriaLabel={computedAriaLabel}
+        wrapperElement={wrapperElement}
+        wrapperProps={wrapperProps}
+      >
+        {children}
+      </MiniCardView>
+    );
+  },
+);
+
+MiniCardContainer.displayName = "MiniCard";
+
+export default MiniCardContainer;
@@ -0,0 +1,28 @@
+export interface MiniCardProps {
+  children?: React.ReactNode;
+  className?: string;
+  backgroundColor?: string;
+  panelContent?: string;
+  label?: string;
+  labelLine1?: string;
+  labelLine2?: string;
+  onClick?: () => void;
+  href?: string;
+  ariaLabel?: string;
+}
+
+export interface MiniCardViewProps {
+  children?: React.ReactNode;
+  className: string;
+  backgroundColor: string;
+  panelContent?: string;
+  label?: string;
+  labelLine1?: string;
+  labelLine2?: string;
+  computedAriaLabel: string;
+  wrapperElement: "a" | "button" | "div";
+  wrapperProps:
+    | React.AnchorHTMLAttributes<HTMLAnchorElement>
+    | React.ButtonHTMLAttributes<HTMLButtonElement>
+    | React.HTMLAttributes<HTMLDivElement>;
+}
@@ -0,0 +1,86 @@
+"use client";
+
+import { memo } from "react";
+import Image from "next/image";
+import type { MiniCardViewProps } from "./MiniCard.types";
+
+function MiniCardView({
+  children,
+  className,
+  backgroundColor,
+  panelContent,
+  label,
+  labelLine1,
+  labelLine2,
+  computedAriaLabel,
+  wrapperElement,
+  wrapperProps,
+}: MiniCardViewProps) {
+  const cardContentElement = (
+    <div className={`h-[186px] flex flex-col gap-[7px] ${className}`}>
+      {/* Top part - Inner panel */}
+      <div
+        className={`flex-1 rounded-[var(--radius-measures-radius-xlarge)] border border-[1px] py-[var(--spacing-scale-032)] px-[var(--spacing-scale-024)] ${backgroundColor} flex items-center justify-center transition-all duration-200 hover:scale-[1.02] hover:shadow-lg`}
+      >
+        {/* Content for the inner panel */}
+        {panelContent && (
+          <div className="flex items-center justify-center w-full h-full">
+            <Image
+              src={panelContent}
+              alt={computedAriaLabel}
+              className="max-w-[58px] max-h-[58px] w-auto h-auto object-contain"
+              width={58}
+              height={58}
+              sizes="(max-width: 768px) 50vw, 25vw"
+              loading="lazy"
+              placeholder="blur"
+              blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAABAAEDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAv/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAX/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwCdABmX/9k="
+            />
+          </div>
+        )}
+        {children}
+      </div>
+
+      {/* Bottom part - Text container */}
+      <div className="font-inter font-medium text-[12px] leading-[14px] text-center text-[var(--color-content-default-primary)]">
+        {labelLine1 && labelLine2 ? (
+          <>
+            <div>{labelLine1}</div>
+            <div>{labelLine2}</div>
+            <div>&nbsp;</div>
+          </>
+        ) : (
+          label
+        )}
+      </div>
+    </div>
+  );
+
+  if (wrapperElement === "a") {
+    return (
+      <a {...(wrapperProps as React.AnchorHTMLAttributes<HTMLAnchorElement>)}>
+        {cardContentElement}
+      </a>
+    );
+  }
+
+  if (wrapperElement === "button") {
+    return (
+      <button
+        {...(wrapperProps as React.ButtonHTMLAttributes<HTMLButtonElement>)}
+      >
+        {cardContentElement}
+      </button>
+    );
+  }
+
+  return (
+    <div {...(wrapperProps as React.HTMLAttributes<HTMLDivElement>)}>
+      {cardContentElement}
+    </div>
+  );
+}
+
+MiniCardView.displayName = "MiniCardView";
+
+export default memo(MiniCardView);
@@ -0,0 +1,2 @@
+export { default } from "./MiniCard.container";
+export type { MiniCardProps } from "./MiniCard.types";