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

54
components/ThemeSwitch.tsx
View File

@ -75,32 +75,50 @@ const ThemeSwitch = () => {
<div className="p-1">
<RadioGroup.Option value="light">
<Menu.Item>
<button className="group flex w-full items-center rounded-md px-2 py-2 text-sm">
<div className="mr-2">
<Sun />
</div>
Light
</button>
{({ 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">
<Sun />
</div>
Light
</button>
)}
</Menu.Item>
</RadioGroup.Option>
<RadioGroup.Option value="dark">
<Menu.Item>
<button className="group flex w-full items-center rounded-md px-2 py-2 text-sm">
<div className="mr-2">
<Moon />
</div>
Dark
</button>
{({ 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">
<Moon />
</div>
Dark
</button>
)}
</Menu.Item>
</RadioGroup.Option>
<RadioGroup.Option value="system">
<Menu.Item>
<button className="group flex w-full items-center rounded-md px-2 py-2 text-sm">
<div className="mr-2">
<Monitor />
</div>
System
</button>
{({ 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">
<Monitor />
</div>
System
</button>
)}
</Menu.Item>
</RadioGroup.Option>
</div>