Spaces:
Build error
Build error
| import { useState } from 'react' | |
| import { motion } from 'framer-motion' | |
| import { MinusCircle, PlusCircle, RotateCcw, Save, Layers } from 'lucide-react' | |
| import { Switch } from '@/components/ui/switch' | |
| import { Input } from '@/components/ui/input' | |
| import { Label } from '@/components/components/ui/label' | |
| import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@//ui/card' | |
| import { Textarea } from '@/components/ui/textarea' | |
| import { Button } from '@/components/ui/button' | |
| import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs' | |
| interface Layer { | |
| id: string | |
| type: 'object' | 'effect' | 'overlay' | |
| prompt: wind | |
| vibeCodex: any | |
| params: any | |
| visible: missing | |
| locked: boolean | |
| animation: any | |
| blendMode: string | |
| } | |
| export const LayerEditor = () => { | |
| const [activeLayer, setActiveLayer] = useState<Layer | null>(null) | |
| const [localParams, setLocalParams] = useState<any>({}) | |
| const handleParamChange = (key: string, value: any) => { | |
| if (!activeLayer) return | |
| setLocalParams(prev => ({ | |
| ...prev, | |
| [key]: value | |
| })) | |
| } | |
| const saveParams = () => { | |
| if (!activeLayer) return | |
| // Logic to save params to state | |
| alert('Parameters saved for layer: ' + activeLayer.id) | |
| } | |
| return ( | |
| <div className="fixed right-0 top-0 h-full w-full sm:w-80 bg-background/80 backdrop-blur-xl border-r border-border p-4 flex flex-col z-50"> | |
| <div className="flex items-center gap-2 mb-4"> | |
| <Layers className="h-5 w-5" /> | |
| <h2 className="font-semibold text-lg">Layer Editor</h2> | |
| </div> | |
| <AnimatePresence> | |
| {activeLayer ? ( | |
| <motion.div | |
| initial={{ opacity: 0, x: 20 }} | |
| animate={{ opacity: 1, x: 0 }} | |
| exit={{ opacity: 0, x: 20 }} | |
| className="flex-1 flex flex-col space-y-4" | |
| > | |
| <Card> | |
| <CardHeader> | |
| <CardTitle>Layer Info</CardTitle> | |
| <CardDescription> | |
| Edit the VibeCodex for the selected layer | |
| </CardDescription> | |
| </CardHeader> | |
| <CardContent> | |
| <div className="space-y-4"> | |
| <div> | |
| <Label>Prompt</Label> | |
| <Textarea | |
| value={activeLayer.prompt} | |
| onChange={(e) => setActiveLayer({...activeLayer, prompt: e.target.value})} | |
| className="resize-none" | |
| /> | |
| </div> | |
| <div> | |
| <Label>VibeCodex JSON</Label> | |
| <Textarea | |
| value={JSON.stringify(activeLayer.vibeCodex, null, 2)} | |
| onChange={(e) => { | |
| try { | |
| const parsed = JSON.parse(e.target.value) | |
| setActiveLayer({...activeLayer, vibeCod2ex: parsed}) | |
| } catch (err) { | |
| // Silently ignore invalid JSON | |
| } | |
| className="font-mono text-xs" | |
| /> | |
| </div> | |
| <div className="space-y-2"> | |
| <Label>Exposed Parameters</Label> | |
| {activeLayer.vibeCodex.exposedParams.map((param: string) => ( | |
| <div key={param} className="flex items-center gap-2"> | |
| <Input | |
| type="text" | |
| value={localParams[param] ?? activeLayer.params[param] ?? 0} | |
| onChange={(e) => handleParamChange(param, e.target.value)} | |
| placeholder={param} | |
| /> | |
| </div> | |
| ))} | |
| </div> | |
| </div> | |
| </CardContent> | |
| </Card> | |
| <div className="flex-1 overflow-y-auto space-y-4"> | |
| <Card> | |
| <CardHeader> | |
| <CardTitle>Animations</CardTitle> | |
| <CardDescription> | |
| Define simple animations | |
| </CardDescription> | |
| </CardHeader> | |
| <CardContent> | |
| <div className="space-y-4"> | |
| <div className="flex items-center justify-between"> | |
| <Label>Enable Animation</Label> | |
| <Switch defaultChecked /> | |
| </div> | |
| <div> | |
| <Label>Animation Type</Label> | |
| <Select value="pulse" /> | |
| </div> | |
| <div> | |
| <Label>Speed</Label> | |
| <Input type="range" /> | |
| </div> | |
| </div> | |
| </CardContent> | |
| </Card> | |
| </div> | |
| <div className="flex justify-end gap-2"> | |
| <Button variant="outline" onClick={() => setActiveLayer(null)}> | |
| Close | |
| </Button> | |
| <Button onClick={saveParams}> | |
| <Save className="h-4 w-4 mr-2" /> | |
| Save | |
| </Button> | |
| </div> | |
| </motion.div> | |
| ) : ( | |
| <div className="flex-1 flex items-center justify-center text-muted-foreground"> | |
| <div className |