first commit

components/Exporter/PreviewArea.tsx

@@ -0,0 +1,15 @@
+"use client"
+
+import { Card } from "@/components/ui/card"
+
+export function PreviewArea() {
+  return (
+    <div className="h-full min-h-[500px] w-full border rounded-xl bg-zinc-100 dark:bg-zinc-950 flex items-center justify-center relative overflow-hidden">
+        {/* Placeholder for actual content */}
+        <div className="text-center space-y-2 opacity-50">
+            <p className="font-medium text-sm">Preview Canvas</p>
+            <p className="text-xs">Result will appear here</p>
+        </div>
+    </div>
+  )
+}

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>
+  )
+}

components/Exporter/UploadArea.tsx

@@ -0,0 +1,78 @@
+"use client"
+
+import { useRef, useState } from "react";
+
+import { UploadCloud } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent } from "@/components/ui/card"
+import { cn } from "@/lib/utils";
+
+
+interface ImageUploadAreaProps {
+  onFilesSelected: (files: FileList | null) => void;
+}
+
+
+export function UploadArea() {
+
+      const [isDraggingOver, setIsDraggingOver] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onFilesSelected(e.target.files);
+    if (e.target) e.target.value = "";
+  };
+
+  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    setIsDraggingOver(true);
+  };
+
+  const handleDragLeave = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    setIsDraggingOver(false);
+  };
+
+  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    setIsDraggingOver(false);
+    onFilesSelected(e.dataTransfer.files);
+  };
+
+
+
+  return (
+    <Card>
+      <CardContent className="py-2">
+        <div className="space-y-4">
+          <h3 className="text-lg font-medium">Upload Images</h3>
+
+            <div
+            className={cn(
+              "w-full h-48 rounded-lg border-2 border-dashed flex flex-col items-center justify-center relative transition-colors cursor-pointer hover:border-primary/60",
+              isDraggingOver ? "border-primary bg-accent" : "border-input"
+            )}
+            onDragOver={handleDragOver}
+            onDragLeave={handleDragLeave}
+            onDrop={handleDrop}
+            onClick={() => fileInputRef.current?.click()}
+            >
+            <div className="flex flex-col items-center justify-center text-center text-muted-foreground">
+              <p className="font-semibold">Click or drag & drop to upload</p>
+              <p className="text-xs text-muted-foreground mt-1">PNG, JPG, WEBP are supported</p>
+            </div>
+            <div>
+                <Button variant="outline" className="mt-2">
+                    Select File
+                </Button>
+            </div>
+
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+
+
+    
+  )
+}