RevelaNetwork/Revelav3
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

WIP: Dropdown css

Browse source
This commit is contained in:
rift 2023-12-17 12:03:26 -06:00
parent 9e2b7993a8
commit e8dc26de91
1 changed files with 9 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/pages/Settings/Dropdown.tsx
View file

@ -1,4 +1,5 @@
import { useState, useEffect } from "preact/hooks"; import { useState, useEffect } from "preact/hooks";
import { FaAngleDown } from "react-icons/fa";
interface Option { interface Option {
id: string; id: string;
@ -34,9 +35,14 @@ const Dropdown = ({
className="font-roboto flex h-14 w-56 cursor-pointer flex-col items-center justify-center rounded-2xl border border-input-border-color bg-input text-center text-xl" className="font-roboto flex h-14 w-56 cursor-pointer flex-col items-center justify-center rounded-2xl border border-input-border-color bg-input text-center text-xl"
onClick={() => setIsOpen(!isOpen)} onClick={() => setIsOpen(!isOpen)}
> >
<div className="select-none"> <div className="flex select-none flex-row items-center w-full h-full">
<div class="w-3/4">
{options.find((o) => o.id === choice)?.label} {options.find((o) => o.id === choice)?.label}
</div> </div>
<div class="w-1/4">
<FaAngleDown />
</div>
</div>
{isOpen && ( {isOpen && (
<div className="absolute top-full w-full border"> <div className="absolute top-full w-full border">
{options.map((option) => ( {options.map((option) => (
@ -48,7 +54,7 @@ const Dropdown = ({
setChoice(option.id); setChoice(option.id);
localStorage.setItem(storageKey, option.id); localStorage.setItem(storageKey, option.id);
if (refresh == true) { if (refresh == true) {
window.location.reload() window.location.reload();
} }
}} }}
> >