Split codebase (#455)

2026-05-19 14:17:10 +02:00 · 2026-05-07 15:50:10 -07:00
parent d2dc719cc6
commit 10559c8f4f
742 changed files with 7686 additions and 3249 deletions
@@ -0,0 +1,64 @@
+import classNames from "classnames";
+import type { ReactNode } from "react";
+
+export interface RadioCardOption<T extends string> {
+  value: T;
+  label: ReactNode;
+  description?: ReactNode;
+}
+
+export interface RadioCardsProps<T extends string> {
+  value: T | null;
+  onChange: (value: T) => void;
+  options: RadioCardOption<T>[];
+  name: string;
+}
+
+export function RadioCards<T extends string>({
+  value,
+  onChange,
+  options,
+  name,
+}: RadioCardsProps<T>) {
+  return (
+    <div className="flex flex-col gap-2">
+      {options.map((option) => {
+        const selected = value === option.value;
+        return (
+          <label
+            key={option.value}
+            className={classNames(
+              "flex items-start gap-3 p-3 rounded-lg border cursor-pointer",
+              "transition-colors",
+              selected ? "border-border-focus" : "border-border-subtle hocus:border-text-subtlest",
+            )}
+          >
+            <input
+              type="radio"
+              name={name}
+              value={option.value}
+              checked={selected}
+              onChange={() => onChange(option.value)}
+              className="sr-only"
+            />
+            <div
+              className={classNames(
+                "mt-1 w-4 h-4 flex-shrink-0 rounded-full border",
+                "flex items-center justify-center",
+                selected ? "border-focus" : "border-border",
+              )}
+            >
+              {selected && <div className="w-2 h-2 rounded-full bg-text" />}
+            </div>
+            <div className="flex flex-col gap-0.5">
+              <span className="font-semibold text-text">{option.label}</span>
+              {option.description && (
+                <span className="text-sm text-text-subtle">{option.description}</span>
+              )}
+            </div>
+          </label>
+        );
+      })}
+    </div>
+  );
+}