Select and upload templates

2026-02-09 19:05:28 -07:00
parent 2e1538770c
commit 4bb6fe0a89
9 changed files with 606 additions and 9 deletions
@@ -0,0 +1,29 @@
+"use client";
+
+import { memo } from "react";
+import UploadView from "./Upload.view";
+import type { UploadProps } from "./Upload.types";
+
+const UploadContainer = memo<UploadProps>(
+  ({
+    active = true,
+    label,
+    showHelpIcon = true,
+    onClick,
+    className = "",
+  }) => {
+    return (
+      <UploadView
+        active={active}
+        label={label}
+        showHelpIcon={showHelpIcon}
+        onClick={onClick}
+        className={className}
+      />
+    );
+  },
+);
+
+UploadContainer.displayName = "Upload";
+
+export default UploadContainer;
@@ -0,0 +1,34 @@
+export interface UploadProps {
+  /**
+   * Whether the upload component is in active state.
+   * When active, button has white background with black text.
+   * When inactive, button has dark background with gray text.
+   * @default true
+   */
+  active?: boolean;
+  /**
+   * Label text displayed above the upload component
+   */
+  label?: string;
+  /**
+   * Whether to show help icon next to label
+   * @default true
+   */
+  showHelpIcon?: boolean;
+  /**
+   * Callback when upload button is clicked
+   */
+  onClick?: () => void;
+  /**
+   * Additional CSS classes
+   */
+  className?: string;
+}
+
+export interface UploadViewProps {
+  active: boolean;
+  label?: string;
+  showHelpIcon: boolean;
+  onClick?: () => void;
+  className: string;
+}
@@ -0,0 +1,113 @@
+"use client";
+
+import { memo } from "react";
+import InputLabel from "../../utility/InputLabel";
+import type { UploadViewProps } from "./Upload.types";
+
+function UploadView({
+  active = true,
+  label,
+  showHelpIcon = true,
+  onClick,
+  className = "",
+}: UploadViewProps) {
+  const isActive = active;
+
+  // Button styles based on active state
+  const buttonBgClass = isActive
+    ? "bg-[var(--color-surface-invert-primary,white)]"
+    : "bg-[var(--color-surface-default-secondary,#141414)]";
+
+  const buttonTextColor = isActive
+    ? "text-[color:var(--color-content-invert-primary,black)]"
+    : "text-[color:var(--color-content-invert-tertiary,#2d2d2d)]";
+
+  // Description text color based on active state
+  const descriptionTextColor = isActive
+    ? "text-[color:var(--color-content-default-primary,white)]"
+    : "text-[color:var(--color-content-default-tertiary,#b4b4b4)]";
+
+  // Icon color based on active state
+  const iconColor = isActive
+    ? "text-[color:var(--color-content-invert-primary,black)]"
+    : "text-[color:var(--color-content-invert-tertiary,#2d2d2d)]";
+
+  return (
+    <div className={`flex flex-col gap-[var(--measures-spacing-300,12px)] items-start relative w-full ${className}`}>
+      {/* Label using InputLabel component */}
+      {label && (
+        <InputLabel
+          label={label}
+          helpIcon={showHelpIcon}
+          asterisk={false}
+          helperText={false}
+          size="S"
+          palette="Default"
+        />
+      )}
+
+      {/* Upload container */}
+      <div className="bg-[var(--color-surface-default-secondary,#141414)] flex gap-[24px] items-center justify-center px-[var(--measures-spacing-600,24px)] py-[var(--measures-spacing-1200,48px)] rounded-[var(--measures-radius-200,8px)] shrink-0 w-full">
+        {/* Upload button */}
+        <button
+          type="button"
+          onClick={onClick}
+          className={`${buttonBgClass} flex gap-[var(--measures-spacing-150,6px)] items-center justify-center overflow-clip p-[var(--measures-spacing-300,12px)] rounded-[var(--measures-radius-full,9999px)] shrink-0 hover:opacity-80 transition-opacity`}
+          aria-label="Upload"
+        >
+          {/* Upload icon */}
+          <div className={`relative shrink-0 size-[20px] ${iconColor}`}>
+            <svg
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              className="size-full"
+            >
+              <path
+                d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+              <polyline
+                points="17 8 12 3 7 8"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+              <line
+                x1="12"
+                y1="3"
+                x2="12"
+                y2="15"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+          </div>
+          {/* Button text */}
+          <div className={`flex flex-col font-inter font-medium justify-center leading-[0] relative shrink-0 text-[length:var(--sizing-400,16px)] whitespace-nowrap ${buttonTextColor}`}>
+            <p className="leading-[20px]">Upload</p>
+          </div>
+        </button>
+
+        {/* Description text */}
+        <div className={`flex flex-[1_0_0] flex-col font-inter font-normal h-[32px] justify-center leading-[0] min-h-px min-w-px relative text-[length:var(--sizing-350,14px)] ${descriptionTextColor}`}>
+          <p className="leading-[20px] whitespace-pre-wrap">
+            Add images, PDFs, and other files to the policy
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+UploadView.displayName = "UploadView";
+
+export default memo(UploadView);
@@ -0,0 +1,2 @@
+export { default } from "./Upload.container";
+export type { UploadProps } from "./Upload.types";