first commit

components/Exporter/SettingsArea.tsx

@@ -0,0 +1,49 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
+
+interface SettingsAreaProps {
+  onExport: () => void;
+  isExporting?: boolean;
+}
+
+export function SettingsArea({ onExport, isExporting }: SettingsAreaProps) {
+  return (
+    <Card className="border-zinc-200 dark:border-zinc-800">
+      <CardHeader>
+        <CardTitle>Export Settings</CardTitle>
+        <CardDescription>Configure your output.</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+              <div className="space-y-2">
+          <Label htmlFor="format">Format</Label>
+          <Select defaultValue="pdf">
+            <SelectTrigger id="format">
+              <SelectValue placeholder="Select format" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="pdf">WEBP</SelectItem>
+              <SelectItem value="png">PNG Image</SelectItem>
+              <SelectItem value="json">Jpeg</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="pt-4">
+          <Button 
+            className="w-full font-medium" 
+            onClick={onExport}
+            disabled={isExporting}
+          >
+            {isExporting ? "Exporting..." : "Start Export"}
+          </Button>
+        </div>
+
+      </CardContent>
+    </Card>
+  )
+}