added : select component added

Author: faisal004

src/showcase/effects/gradients/CustomGradientGenerator.tsx

@@ -2,17 +2,27 @@
 import Card from '@/showcase/ui-group/Card'
 import { motion, AnimatePresence } from 'framer-motion'
 import { Check, Copy } from 'lucide-react'
-import { useState } from 'react'
 import { toast } from 'sonner'
 import { HexColorPicker } from "react-colorful";
-import { Popover } from '@headlessui/react'
+import { Fragment, useState } from 'react'
+import { Listbox, Popover, Transition } from '@headlessui/react'
+
+const people = [
+  { name: 'Wade Cooper' },
+  { name: 'Arlene Mccoy' },
+  { name: 'Devon Webb' },
+  { name: 'Tom Cook' },
+  { name: 'Tanya Fox' },
+  { name: 'Hellen Schmidt' },
+]
 
 const CustomGradientGenerator = () => {
   const [copied, setCopied] = useState(false)
   const [fromColor, setFromColor] = useState("#aabbcc");
   const [viaColor, setViaColor] = useState("#aabbcc");
   const [toColor, setToColor] = useState("#ddeeff");
-  let gradient = `radial-gradient(circle, ${fromColor},${viaColor} ,${toColor})`;
+  const [selected, setSelected] = useState(people[0])
+    let gradient = `radial-gradient(circle at top left, ${fromColor},${viaColor} ,${toColor})`;
 
   const copyGradient = () => {
     navigator.clipboard.writeText(gradient)
@@ -65,11 +75,13 @@ const CustomGradientGenerator = () => {
         </button>
       </div>
 
-      <div className="flex items-start justify-between px-5 pt-2 gap-3 rounded-xl border border-white ring-1 ring-zinc-200 transition-all ease-in-out hover:cursor-pointer dark:border-transparent dark:ring-zinc-700">
-      <Popover className="relative ">
+      <div className="flex flex-col items-start justify-start px-5 pt-2 gap-3 rounded-xl border border-white ring-1 ring-zinc-200 transition-all ease-in-out hover:cursor-pointer dark:border-transparent dark:ring-zinc-700 ">
+        <div className='flex items-center w-full mx-auto justify-center gap-3
+        '>
+        <Popover className="relative ">
         <Popover.Button className="p-2 border-2 dark:border-zinc-800 border-zinc-200 flex items-center gap-2 justify-between rounded-lg">
               <span>From</span>
-              <div className='h-5 w-5' style={{ backgroundColor: fromColor }}></div>
+              <div className='h-5 w-5' style={{ backgroundColor: fromColor }}></div><span className='hidden md:block'> {fromColor}</span>
             </Popover.Button>
 
 
@@ -82,7 +94,7 @@ const CustomGradientGenerator = () => {
 
             <Popover.Button className="p-2 border-2 dark:border-zinc-800 border-zinc-200 flex items-center gap-2 justify-between rounded-lg">
               <span>Via</span>
-              <div className='h-5 w-5' style={{ backgroundColor: viaColor }}></div>
+                            <div className='h-5 w-5' style={{ backgroundColor: viaColor }}></div><span className='hidden md:block'> {viaColor}</span>
             </Popover.Button>
 
 
@@ -95,14 +107,63 @@ const CustomGradientGenerator = () => {
 
      <Popover.Button className="p-2 border-2 dark:border-zinc-800 border-zinc-200 flex items-center gap-2 justify-between rounded-lg">
        <span>To</span>
-       <div className='h-5 w-5' style={{ backgroundColor: toColor }}></div>
+       <div className='h-5 w-5' style={{ backgroundColor: toColor }}></div><span className='hidden md:block'> {toColor}</span>
      </Popover.Button>
 
 
    <Popover.Panel className="absolute z-10 right-0">
      <HexColorPicker color={toColor} onChange={setToColor} />
    </Popover.Panel>
  </Popover>
+        </div>
+        <div className="w-full px-6 py-3">
+      <Listbox value={selected} onChange={setSelected}>
+        <div className="relative mt-1">
+          <Listbox.Button className="relative w-full cursor-default rounded-lg bg-white py-2 pl-3 pr-10 text-left shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white/75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm">
+            <span className="block truncate">{selected.name}</span>
+            
+          </Listbox.Button>
+          <Transition
+            as={Fragment}
+            leave="transition ease-in duration-100"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <Listbox.Options className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md z-30 bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm">
+              {people.map((person, personIdx) => (
+                <Listbox.Option
+                  key={personIdx}
+                  className={({ active }) =>
+                    `relative cursor-default select-none z-30 py-2 pl-10 pr-4 ${
+                      active ? 'bg-amber-100 text-amber-900' : 'text-gray-900'
+                    }`
+                  }
+                  value={person}
+                >
+                  {({ selected }) => (
+                    <>
+                      <span
+                        className={`block truncate ${
+                          selected ? 'font-medium' : 'font-normal'
+                        }`}
+                      >
+                        {person.name}
+                      </span>
+                      {selected ? (
+                        <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-amber-600">
+Wow
+                        </span>
+                      ) : null}
+                    </>
+                  )}
+                </Listbox.Option>
+              ))}
+            </Listbox.Options>
+          </Transition>
+        </div>
+      </Listbox>
+    </div>
+
       </div>
     </div>
   );