always-on calendar, currency cards

packages/ui-common/src/components/CurrencySelector/CurrencySelector.tsx

@@ -0,0 +1,131 @@
+import { Box, Text } from "@mantine/core";
+import { Check } from "lucide-react";
+
+export interface CurrencySelectorProps {
+  /** Selected currency code, or "" when none picked yet. */
+  value: string;
+  onChange: (currency: "USD" | "ETB") => void;
+  disabled?: boolean;
+  /** Validation error shown under the cards. */
+  error?: string;
+}
+
+const OPTIONS = [
+  {
+    code: "USD",
+    symbol: "$",
+    name: "US Dollar",
+    hint: "As quoted on the contract",
+  },
+  {
+    code: "ETB",
+    symbol: "Br",
+    name: "Ethiopian Birr",
+    hint: "Converted from the USD total",
+  },
+] as const;
+
+/**
+ * Card-style USD/ETB billing-currency picker. Renders unselected when `value`
+ * is "" so a required choice never looks pre-made.
+ */
+export function CurrencySelector({
+  value,
+  onChange,
+  disabled = false,
+  error,
+}: CurrencySelectorProps) {
+  return (
+    <Box>
+      <Box
+        style={{
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))",
+          gap: 10,
+        }}
+      >
+        {OPTIONS.map((o) => {
+          const selected = value === o.code;
+          return (
+            <button
+              key={o.code}
+              type="button"
+              disabled={disabled}
+              aria-pressed={selected}
+              onClick={() => onChange(o.code)}
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: 12,
+                textAlign: "left",
+                padding: "12px 14px",
+                borderRadius: 12,
+                border: selected
+                  ? "1.5px solid #12B981"
+                  : error
+                    ? "1px solid #FCA5A5"
+                    : "1px solid #E6ECF2",
+                background: selected ? "#F6FBF8" : "#fff",
+                cursor: disabled ? "default" : "pointer",
+                opacity: disabled && !selected ? 0.55 : 1,
+                transition: "border-color 120ms ease, background 120ms ease",
+              }}
+            >
+              <Box
+                style={{
+                  width: 38,
+                  height: 38,
+                  flexShrink: 0,
+                  borderRadius: 11,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  fontSize: 15,
+                  fontWeight: 800,
+                  background: selected ? "#ECF6F1" : "#F1F4F7",
+                  color: selected ? "#0A6F4D" : "#6B7C8E",
+                }}
+              >
+                {o.symbol}
+              </Box>
+              <Box style={{ flex: 1, minWidth: 0 }}>
+                <Text fz={14} fw={700} c="#10202F" lh={1.25}>
+                  {o.code}
+                  <Text component="span" fz={12.5} fw={500} c="dimmed">
+                    {" "}
+                    · {o.name}
+                  </Text>
+                </Text>
+                <Text fz={11.5} c="dimmed" lh={1.35}>
+                  {o.hint}
+                </Text>
+              </Box>
+              <Box
+                style={{
+                  width: 20,
+                  height: 20,
+                  flexShrink: 0,
+                  borderRadius: "50%",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  border: selected ? "none" : "1.5px solid #D4DDE5",
+                  background: selected ? "#12B981" : "transparent",
+                }}
+              >
+                {selected && <Check size={12} color="#fff" strokeWidth={3.5} />}
+              </Box>
+            </button>
+          );
+        })}
+      </Box>
+      {error && (
+        <Text fz={12.5} c="red.6" mt={6}>
+          {error}
+        </Text>
+      )}
+    </Box>
+  );
+}
+
+export default CurrencySelector;

packages/ui-common/src/components/CurrencySelector/index.ts

@@ -0,0 +1,2 @@
+export { CurrencySelector, default } from "./CurrencySelector";
+export type { CurrencySelectorProps } from "./CurrencySelector";