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,86 @@
+"use client";
+
+import { memo } from "react";
+import Image from "next/image";
+import type { MiniViewProps } from "./Mini.types";
+
+function MiniView({
+  children,
+  className,
+  backgroundColor,
+  panelContent,
+  label,
+  labelLine1,
+  labelLine2,
+  computedAriaLabel,
+  wrapperElement,
+  wrapperProps,
+}: MiniViewProps) {
+  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>
+  );
+}
+
+MiniView.displayName = "MiniView";
+
+export default memo(MiniView);