store user login

src/features/store-user/ui.tsx

@@ -0,0 +1,219 @@
+import { useState, type ReactNode } from 'react';
+import { ImageOff } from 'lucide-react';
+
+/**
+ * The pieces every Store user page is built from.
+ *
+ * Copied — deliberately, and once — from the Store Admin pages rather than
+ * invented, so the two workspaces are the same product seen from two heights.
+ * The values are not arbitrary: 32px controls, radius 12, 13px labels, centred
+ * table cells and a soft chip in the row's own colour are the corrections the
+ * merchant pages already went through.
+ */
+
+/** A page tab, as used in the Store Admin's PageHeader tab row. */
+export function TabButton({
+  label,
+  icon,
+  isActive,
+  onClick,
+  badge,
+}: {
+  label: string;
+  icon: ReactNode;
+  isActive: boolean;
+  onClick: () => void;
+  badge?: number;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-pressed={isActive}
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 6,
+        height: 32,
+        padding: '0 12px',
+        borderRadius: 12,
+        border: 0,
+        background: isActive ? 'var(--color-brand-tint)' : 'transparent',
+        color: isActive ? 'var(--color-brand)' : 'var(--color-ink-3)',
+        fontSize: 13,
+        fontWeight: isActive ? 600 : 500,
+        cursor: 'pointer',
+        transition: 'background .2s, color .2s',
+      }}
+    >
+      {icon}
+      {label}
+      {badge ? (
+        <span
+          style={{
+            minWidth: 18,
+            height: 18,
+            padding: '0 5px',
+            borderRadius: 999,
+            background: 'var(--color-warning, #b7860b)',
+            color: '#fff',
+            fontSize: 11,
+            fontWeight: 700,
+            display: 'grid',
+            placeItems: 'center',
+          }}
+        >
+          {badge}
+        </span>
+      ) : null}
+    </button>
+  );
+}
+
+/** A header action drawn like the tabs, so the two rows read as one bar. */
+export function BarAction({
+  label,
+  icon,
+  onClick,
+  isDisabled,
+}: {
+  label: string;
+  icon: ReactNode;
+  onClick: () => void;
+  isDisabled?: boolean;
+}) {
+  const [isHovered, setIsHovered] = useState(false);
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={isDisabled}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 6,
+        height: 32,
+        padding: '0 12px',
+        borderRadius: 12,
+        border: 0,
+        background: isHovered && !isDisabled ? 'var(--color-surface-sunken)' : 'transparent',
+        color: isDisabled ? 'var(--color-ink-4)' : 'var(--color-ink-3)',
+        fontSize: 13,
+        fontWeight: 500,
+        cursor: isDisabled ? 'not-allowed' : 'pointer',
+        transition: 'background .2s, color .2s',
+      }}
+    >
+      {icon}
+      {label}
+    </button>
+  );
+}
+
+export function Th({ children }: { children?: ReactNode }) {
+  return (
+    <th
+      style={{
+        textAlign: 'center',
+        padding: '10px',
+        borderBottom: '1px solid var(--color-line)',
+        fontSize: 12,
+        fontWeight: 600,
+        color: 'var(--color-ink-3)',
+        whiteSpace: 'nowrap',
+      }}
+    >
+      {children}
+    </th>
+  );
+}
+
+export function Td({
+  children,
+  isMuted,
+  isStrong,
+}: {
+  children: ReactNode;
+  isMuted?: boolean;
+  isStrong?: boolean;
+}) {
+  return (
+    <td
+      style={{
+        textAlign: 'center',
+        padding: '10px',
+        borderBottom: '1px solid color-mix(in oklab, var(--color-line) 55%, transparent)',
+        color: isMuted ? 'var(--color-ink-3)' : 'var(--color-ink-1)',
+        fontWeight: isStrong ? 600 : 400,
+        verticalAlign: 'middle',
+      }}
+    >
+      {children}
+    </td>
+  );
+}
+
+/** Soft fill, 26% border, in its own colour — the console's one status chip. */
+export function Chip({ label, color }: { label: string; color: string }) {
+  return (
+    <span
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        borderRadius: 999,
+        padding: '2px 9px',
+        fontSize: 11.5,
+        fontWeight: 600,
+        whiteSpace: 'nowrap',
+        color,
+        background: `color-mix(in oklab, ${color} 12%, transparent)`,
+        border: `1px solid color-mix(in oklab, ${color} 26%, transparent)`,
+      }}
+    >
+      {label}
+    </span>
+  );
+}
+
+/**
+ * A 40px pack shot.
+ *
+ * `mix-blend-multiply` because catalogue photography is shot on white — without
+ * it every thumbnail carries a grey square where the photo's ground meets the
+ * row.
+ */
+export function Thumb({ images, alt }: { images: readonly string[]; alt: string }) {
+  const [failed, setFailed] = useState(false);
+  const src = images[0];
+
+  return (
+    <span
+      style={{
+        width: 40,
+        height: 40,
+        flex: 'none',
+        display: 'grid',
+        placeItems: 'center',
+        borderRadius: 10,
+        border: '1px solid var(--color-line)',
+        background: 'var(--color-surface)',
+        overflow: 'hidden',
+      }}
+    >
+      {src && !failed ? (
+        <img
+          src={src}
+          alt={alt}
+          loading="lazy"
+          referrerPolicy="no-referrer"
+          onError={() => setFailed(true)}
+          style={{ width: '100%', height: '100%', objectFit: 'contain', mixBlendMode: 'multiply' }}
+        />
+      ) : (
+        <ImageOff size={15} style={{ color: 'var(--color-line)' }} />
+      )}
+    </span>
+  );
+}