popover

1"use client"
2 
3import React from "react"
4import { Image as ImageIcon, Paintbrush, Plus } from "lucide-react"
5 
6import {
7  PopoverBody,
8  PopoverButton,
9  PopoverCloseButton,
10  PopoverContent,
11  PopoverFooter,
12  PopoverForm,
13  PopoverHeader,
14  PopoverLabel,
15  PopoverRoot,
16  PopoverSubmitButton,
17  PopoverTextarea,
18  PopoverTrigger,
19} from "../ui/popover"
20 
21function PopoverInput() {
22  const handleSubmit = (note: string) => {
23    console.log("Submitted note:", note)
24  }
25 
26  return (
27    <PopoverRoot>
28      <PopoverTrigger>Add Feedback</PopoverTrigger>
29      <PopoverContent>
30        <PopoverForm onSubmit={handleSubmit}>
31          <PopoverLabel>Add Feedback</PopoverLabel>
32          <PopoverTextarea />
33          <PopoverFooter>
34            <PopoverCloseButton />
35            <PopoverSubmitButton />
36          </PopoverFooter>
37        </PopoverForm>
38      </PopoverContent>
39    </PopoverRoot>
40  )
41}
42 
43const ColorPickerPopover = () => {
44  const colors = [
45    "#FF5733",
46    "#33FF57",
47    "#3357FF",
48    "#FF33F1",
49    "#33FFF1",
50    "#F1FF33",
51  ]
52 
53  return (
54    <PopoverRoot>
55      <PopoverTrigger>Choose Color</PopoverTrigger>
56      <PopoverContent className="w-48 h-48">
57        <PopoverHeader>Pick a Color</PopoverHeader>
58        <PopoverBody className="flex flex-col justify-center items-center">
59          <div className="grid grid-cols-3 gap-2">
60            {colors.map((color) => (
61              <button
62                key={color}
63                className="w-8 h-8 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2"
64                style={{ backgroundColor: color }}
65                onClick={() => console.log(`Selected color: ${color}`)}
66              />
67            ))}
68          </div>
69        </PopoverBody>
70        <PopoverFooter>
71          <PopoverCloseButton />
72        </PopoverFooter>
73      </PopoverContent>
74    </PopoverRoot>
75  )
76}
77 
78const QuickActionsPopover = () => {
79  const actions = [
80    {
81      icon: <Plus className="w-4 h-4" />,
82      label: "New File",
83      action: () => console.log("New File"),
84    },
85    {
86      icon: <ImageIcon className="w-4 h-4" />,
87      label: "Upload Image",
88      action: () => console.log("Upload Image"),
89    },
90    {
91      icon: <Paintbrush className="w-4 h-4" />,
92      label: "Edit Colors",
93      action: () => console.log("Edit Colors"),
94    },
95  ]
96 
97  return (
98    <PopoverRoot>
99      <PopoverTrigger>Quick Actions</PopoverTrigger>
100      <PopoverContent className="w-48 h-48">
101        <PopoverHeader>Quick Actions</PopoverHeader>
102        <PopoverBody>
103          {actions.map((action, index) => (
104            <PopoverButton key={index} onClick={action.action}>
105              {action.icon}
106              <span>{action.label}</span>
107            </PopoverButton>
108          ))}
109        </PopoverBody>
110      </PopoverContent>
111    </PopoverRoot>
112  )
113}
114 
115const ImagePreviewPopover = () => {
116  return (
117    <PopoverRoot>
118      <PopoverTrigger>Preview Image</PopoverTrigger>
119      <PopoverContent className="w-96 h-[500px]">
120        <PopoverHeader>Image Preview</PopoverHeader>
121        <PopoverBody>
122          <img
123            src="/placeholder.svg?height=200&width=300"
124            alt="Preview"
125            className="w-full h-auto rounded-md"
126          />
127          <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-400">
128            Image preview description goes here.
129          </p>
130        </PopoverBody>
131        <PopoverFooter>
132          <PopoverCloseButton />
133        </PopoverFooter>
134      </PopoverContent>
135    </PopoverRoot>
136  )
137}
138 
139export function PopoverExamples() {
140  return (
141    <div className="p-8 space-y-8">
142      <div className="grid md:grid-cols-2 gap-36">
143        <div className="flex flex-col gap-24 flex-wrap ">
144          <PopoverInput />
145          <ColorPickerPopover />
146        </div>
147        <div className="flex flex-col gap-24 flex-wrap ">
148          <QuickActionsPopover />
149          <ImagePreviewPopover />
150        </div>
151      </div>
152    </div>
153  )
154}