Skip to content

Commit 175ae5e

Browse files
faisal004faisal004
committed
added : directions added
1 parent a1b335c commit 175ae5e

File tree

1 file changed

+73
-86
lines changed

1 file changed

+73
-86
lines changed

‎src/showcase/effects/gradients/CustomGradientGenerator.tsx‎

Lines changed: 73 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -7,22 +7,24 @@ import { HexColorPicker } from "react-colorful";
77
import { Fragment, useState } from 'react'
88
import { Listbox, Popover, Transition } from '@headlessui/react'
99

10-
const people = [
11-
{ name: 'Wade Cooper' },
12-
{ name: 'Arlene Mccoy' },
13-
{ name: 'Devon Webb' },
14-
{ name: 'Tom Cook' },
15-
{ name: 'Tanya Fox' },
16-
{ name: 'Hellen Schmidt' },
10+
const direction = [
11+
{ name: 'Top', value: "top" },
12+
{ name: 'Bottom', value: "bottom" },
13+
{ name: 'Left', value: "left" },
14+
{ name: 'Right', value: "right" },
15+
{ name: 'Top Right', value: "top right" },
16+
{ name: 'Bottom Right', value: "bottom right" },
17+
18+
1719
]
1820

1921
const CustomGradientGenerator = () => {
2022
const [copied, setCopied] = useState(false)
2123
const [fromColor, setFromColor] = useState("#aabbcc");
2224
const [viaColor, setViaColor] = useState("#aabbcc");
2325
const [toColor, setToColor] = useState("#ddeeff");
24-
const [selected, setSelected] = useState(people[0])
25-
let gradient = `radial-gradient(circle at top left, ${fromColor},${viaColor} ,${toColor})`;
26+
const [selected, setSelected] = useState(direction[0])
27+
const gradient = `radial-gradient(circle at ${selected.value}, ${fromColor},${viaColor},${toColor})`;
2628

2729
const copyGradient = () => {
2830
navigator.clipboard.writeText(gradient)
@@ -76,94 +78,79 @@ const CustomGradientGenerator = () => {
7678
</div>
7779

7880
<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 ">
79-
<div className='flex items-center w-full mx-auto justify-center gap-3
80-
'>
81-
<Popover className="relative ">
82-
<Popover.Button className="p-2 border-2 dark:border-zinc-800 border-zinc-200 flex items-center gap-2 justify-between rounded-lg">
81+
<div className='flex items-center w-full mx-auto justify-center gap-3'>
82+
<Popover className="relative ">
83+
<Popover.Button className="p-2 border-2 dark:border-zinc-800 border-zinc-200 flex items-center gap-2 justify-between rounded-lg">
8384
<span>From</span>
8485
<div className='h-5 w-5' style={{ backgroundColor: fromColor }}></div><span className='hidden md:block'> {fromColor}</span>
8586
</Popover.Button>
86-
87+
<Popover.Panel className="absolute z-10">
88+
<HexColorPicker color={fromColor} onChange={setFromColor} />
89+
</Popover.Panel>
90+
</Popover>
8791

88-
<Popover.Panel className="absolute z-10">
89-
<HexColorPicker color={fromColor} onChange={setFromColor} />
90-
</Popover.Panel>
91-
</Popover>
92-
<Popover className="relative ">
93-
94-
92+
<Popover className="relative ">
9593
<Popover.Button className="p-2 border-2 dark:border-zinc-800 border-zinc-200 flex items-center gap-2 justify-between rounded-lg">
9694
<span>Via</span>
97-
<div className='h-5 w-5' style={{ backgroundColor: viaColor }}></div><span className='hidden md:block'> {viaColor}</span>
95+
<div className='h-5 w-5' style={{ backgroundColor: viaColor }}></div><span className='hidden md:block'> {viaColor}</span>
9896
</Popover.Button>
99-
100-
101-
<Popover.Panel className="absolute z-10 right-0">
102-
<HexColorPicker color={viaColor} onChange={setViaColor} />
103-
</Popover.Panel>
104-
</Popover>
105-
<Popover className="relative ">
106-
107-
108-
<Popover.Button className="p-2 border-2 dark:border-zinc-800 border-zinc-200 flex items-center gap-2 justify-between rounded-lg">
109-
<span>To</span>
110-
<div className='h-5 w-5' style={{ backgroundColor: toColor }}></div><span className='hidden md:block'> {toColor}</span>
111-
</Popover.Button>
97+
<Popover.Panel className="absolute z-10 right-0">
98+
<HexColorPicker color={viaColor} onChange={setViaColor} />
99+
</Popover.Panel>
100+
</Popover>
112101

113-
114-
<Popover.Panel className="absolute z-10 right-0">
115-
<HexColorPicker color={toColor} onChange={setToColor} />
116-
</Popover.Panel>
117-
</Popover>
102+
<Popover className="relative ">
103+
<Popover.Button className="p-2 border-2 dark:border-zinc-800 border-zinc-200 flex items-center gap-2 justify-between rounded-lg">
104+
<span>To</span>
105+
<div className='h-5 w-5' style={{ backgroundColor: toColor }}></div><span className='hidden md:block'> {toColor}</span>
106+
</Popover.Button>
107+
<Popover.Panel className="absolute z-10 right-0">
108+
<HexColorPicker color={toColor} onChange={setToColor} />
109+
</Popover.Panel>
110+
</Popover>
118111
</div>
112+
119113
<div className="w-full px-6 py-3">
120-
<Listbox value={selected} onChange={setSelected}>
121-
<div className="relative mt-1">
122-
<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">
123-
<span className="block truncate">{selected.name}</span>
124-
125-
</Listbox.Button>
126-
<Transition
127-
as={Fragment}
128-
leave="transition ease-in duration-100"
129-
leaveFrom="opacity-100"
130-
leaveTo="opacity-0"
131-
>
132-
<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">
133-
{people.map((person, personIdx) => (
134-
<Listbox.Option
135-
key={personIdx}
136-
className={({ active }) =>
137-
`relative cursor-default select-none z-30 py-2 pl-10 pr-4 ${
138-
active ? 'bg-amber-100 text-amber-900' : 'text-gray-900'
139-
}`
140-
}
141-
value={person}
142-
>
143-
{({ selected }) => (
144-
<>
145-
<span
146-
className={`block truncate ${
147-
selected ? 'font-medium' : 'font-normal'
148-
}`}
149-
>
150-
{person.name}
151-
</span>
152-
{selected ? (
153-
<span className="absolute inset-y-0 left-0 flex items-center pl-3 text-amber-600">
154-
Wow
155-
</span>
156-
) : null}
157-
</>
158-
)}
159-
</Listbox.Option>
160-
))}
161-
</Listbox.Options>
162-
</Transition>
114+
<Listbox value={selected} onChange={setSelected} >
115+
<div className="relative mt-1">
116+
<Listbox.Button className="relative w-full cursor-default rounded-lg bg-white py-2 pl-3 pr-10 text-left border-2 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">
117+
<span className="block truncate">{selected.name}</span>
118+
</Listbox.Button>
119+
<Transition
120+
as={Fragment}
121+
leave="transition ease-in duration-100"
122+
leaveFrom="opacity-100"
123+
leaveTo="opacity-0"
124+
>
125+
<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">
126+
{direction.map((directionItem, directionIdx) => (
127+
<Listbox.Option
128+
key={directionIdx}
129+
className={({ active }) =>
130+
`relative cursor-default select-none z-30 py-2 pl-10 pr-4 ${
131+
active ? 'bg-amber-100 text-amber-900' : 'text-gray-900'
132+
}`
133+
}
134+
value={directionItem}
135+
>
136+
{({ selected }) => (
137+
<>
138+
<span
139+
className={`block truncate ${
140+
selected ? 'font-medium' : 'font-normal'
141+
}`}
142+
>
143+
{directionItem.name}
144+
</span>
145+
</>
146+
)}
147+
</Listbox.Option>
148+
))}
149+
</Listbox.Options>
150+
</Transition>
151+
</div>
152+
</Listbox>
163153
</div>
164-
</Listbox>
165-
</div>
166-
167154
</div>
168155
</div>
169156
);

0 commit comments

Comments
 (0)