jblu/jonbio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Refactor menu items with { active } to use headlessui highlighting

Browse Source
This commit is contained in:
Trillium Smith 2024-06-19 13:20:47 -07:00
parent 44b5637398
commit ee996476d0
1 changed files with 36 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
components/ThemeSwitch.tsx
View File

@ -75,32 +75,50 @@ const ThemeSwitch = () => {
<div className="p-1"> <div className="p-1">
<RadioGroup.Option value="light"> <RadioGroup.Option value="light">
<Menu.Item> <Menu.Item>
<button className="group flex w-full items-center rounded-md px-2 py-2 text-sm"> {({ active }) => (
<button
className={`${
active ? 'bg-primary-600 text-white' : ''
} group flex w-full items-center rounded-md px-2 py-2 text-sm`}
>
<div className="mr-2"> <div className="mr-2">
<Sun /> <Sun />
</div> </div>
Light Light
</button> </button>
)}
</Menu.Item> </Menu.Item>
</RadioGroup.Option> </RadioGroup.Option>
<RadioGroup.Option value="dark"> <RadioGroup.Option value="dark">
<Menu.Item> <Menu.Item>
<button className="group flex w-full items-center rounded-md px-2 py-2 text-sm"> {({ active }) => (
<button
className={`${
active ? 'bg-primary-600 text-white' : ''
} group flex w-full items-center rounded-md px-2 py-2 text-sm`}
>
<div className="mr-2"> <div className="mr-2">
<Moon /> <Moon />
</div> </div>
Dark Dark
</button> </button>
)}
</Menu.Item> </Menu.Item>
</RadioGroup.Option> </RadioGroup.Option>
<RadioGroup.Option value="system"> <RadioGroup.Option value="system">
<Menu.Item> <Menu.Item>
<button className="group flex w-full items-center rounded-md px-2 py-2 text-sm"> {({ active }) => (
<button
className={`${
active ? 'bg-primary-600 text-white' : ''
} group flex w-full items-center rounded-md px-2 py-2 text-sm`}
>
<div className="mr-2"> <div className="mr-2">
<Monitor /> <Monitor />
</div> </div>
System System
</button> </button>
)}
</Menu.Item> </Menu.Item>
</RadioGroup.Option> </RadioGroup.Option>
</div> </div>