claude-code

web/components/export/FormatSelector.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { FileText, Braces, Globe, FileDown, AlignLeft } from "lucide-react";
+import { cn } from "@/lib/utils";
+import type { ExportFormat } from "@/lib/types";
+
+interface FormatOption {
+  value: ExportFormat;
+  label: string;
+  description: string;
+  icon: React.ReactNode;
+}
+
+const FORMATS: FormatOption[] = [
+  {
+    value: "markdown",
+    label: "Markdown",
+    description: "Clean .md with code blocks and metadata",
+    icon: <FileText className="w-4 h-4" />,
+  },
+  {
+    value: "json",
+    label: "JSON",
+    description: "Full conversation data with tool use",
+    icon: <Braces className="w-4 h-4" />,
+  },
+  {
+    value: "html",
+    label: "HTML",
+    description: "Self-contained file with embedded styles",
+    icon: <Globe className="w-4 h-4" />,
+  },
+  {
+    value: "pdf",
+    label: "PDF",
+    description: "Print-to-PDF via browser dialog",
+    icon: <FileDown className="w-4 h-4" />,
+  },
+  {
+    value: "plaintext",
+    label: "Plain Text",
+    description: "Stripped of all formatting",
+    icon: <AlignLeft className="w-4 h-4" />,
+  },
+];
+
+interface FormatSelectorProps {
+  value: ExportFormat;
+  onChange: (format: ExportFormat) => void;
+}
+
+export function FormatSelector({ value, onChange }: FormatSelectorProps) {
+  return (
+    <div className="grid grid-cols-5 gap-2">
+      {FORMATS.map((fmt) => (
+        <button
+          key={fmt.value}
+          onClick={() => onChange(fmt.value)}
+          className={cn(
+            "flex flex-col items-center gap-1.5 px-2 py-3 rounded-lg border text-center transition-colors",
+            value === fmt.value
+              ? "border-brand-500 bg-brand-500/10 text-brand-300"
+              : "border-surface-700 bg-surface-800 text-surface-400 hover:border-surface-600 hover:text-surface-200"
+          )}
+          title={fmt.description}
+        >
+          {fmt.icon}
+          <span className="text-xs font-medium leading-none">{fmt.label}</span>
+        </button>
+      ))}
+    </div>
+  );
+}