1  'use client'
 2  
 3  import { useState } from 'react'
 4  import { Button } from "@/components/ui/button"
 5  import { Input } from "@/components/ui/input"
 6  import { Textarea } from "@/components/ui/textarea"
 7  import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
 8  
 9  export function CreateListForm() {
10    const [isOpen, setIsOpen] = useState(false)
11    const [name, setName] = useState('')
12    const [description, setDescription] = useState('')
13  
14    const handleSubmit = (e: React.FormEvent) => {
15      e.preventDefault()
16      // Here you would typically send this data to your backend
17      console.log('Creating list:', { name, description })
18      setIsOpen(false)
19      setName('')
20      setDescription('')
21    }
22  
23    return (
24      <Dialog open={isOpen} onOpenChange={setIsOpen}>
25        <DialogTrigger asChild>
26          <Button>Create New List</Button>
27        </DialogTrigger>
28        <DialogContent className="sm:max-w-[425px]">
29          <DialogHeader>
30            <DialogTitle>Create a new list</DialogTitle>
31          </DialogHeader>
32          <form onSubmit={handleSubmit} className="space-y-4">
33            <div>
34              <label htmlFor="name" className="block text-sm font-medium text-gray-700">
35                Name
36              </label>
37              <Input
38                id="name"
39                value={name}
40                onChange={(e) => setName(e.target.value)}
41                required
42                className="mt-1"
43              />
44            </div>
45            <div>
46              <label htmlFor="description" className="block text-sm font-medium text-gray-700">
47                Description
48              </label>
49              <Textarea
50                id="description"
51                value={description}
52                onChange={(e) => setDescription(e.target.value)}
53                className="mt-1"
54              />
55            </div>
56            <Button type="submit" className="w-full">Create List</Button>
57          </form>
58        </DialogContent>
59      </Dialog>
60    )
61  }
62