feat: first draft

components/ui/editable-list.tsx

@@ -0,0 +1,32 @@
+import { Input } from '@components/ui/input';
+import { Button } from '@components/ui/button';
+import { X } from 'lucide-react';
+
+export function EditableList({
+  items,
+  onAdd,
+  onRemove,
+  onUpdate,
+}: {
+  items: string[];
+  onAdd: () => void;
+  onRemove: (index: number) => void;
+  onUpdate: (index: number, value: string) => void;
+}) {
+  return (
+    <div className="space-y-2">
+      {items.map((item, index) => (
+        <div key={index} className="flex gap-2">
+          <Input
+            value={item}
+            onChange={(e) => onUpdate(index, e.target.value)}
+          />
+          <Button variant="ghost" size="icon" onClick={() => onRemove(index)}>
+            <X className="h-4 w-4" />
+          </Button>
+        </div>
+      ))}
+      <Button onClick={onAdd}>Add</Button>
+    </div>
+  );
+}