Spaces:
Paused
Paused
import { Fragment } from 'react' | |
import { IconProp } from '@fortawesome/fontawesome-svg-core' | |
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' | |
import { Listbox, Transition } from '@headlessui/react' | |
import { useTranslation } from 'next-i18next' | |
import useLocalStorage from '../utils/useLocalStorage' | |
export const layouts: Array<{ id: number; name: 'Grid' | 'List'; icon: IconProp }> = [ | |
{ id: 1, name: 'List', icon: 'th-list' }, | |
{ id: 2, name: 'Grid', icon: 'th' }, | |
] | |
const SwitchLayout = () => { | |
const [preferredLayout, setPreferredLayout] = useLocalStorage('preferredLayout', layouts[0]) | |
const { t } = useTranslation() | |
return ( | |
<div className="relative w-24 flex-shrink-0 text-sm text-gray-600 dark:text-gray-300 md:w-28"> | |
<Listbox value={preferredLayout} onChange={setPreferredLayout}> | |
<Listbox.Button className="relative w-full cursor-pointer rounded pl-4"> | |
<span className="pointer-events-none flex items-center"> | |
<FontAwesomeIcon className="mr-2 h-3 w-3" icon={preferredLayout.icon} /> | |
<span> | |
{ | |
// t('Grid') | |
// t('List') | |
t(preferredLayout.name) | |
} | |
</span> | |
</span> | |
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"> | |
<FontAwesomeIcon className="h-3 w-3" icon="chevron-down" /> | |
</span> | |
</Listbox.Button> | |
<Transition | |
as={Fragment} | |
enter="transition duration-100 ease-out" | |
enterFrom="transform scale-95 opacity-0" | |
enterTo="transform scale-100 opacity-100" | |
leave="transition duration-75 ease-out" | |
leaveFrom="transform scale-100 opacity-100" | |
leaveTo="transform scale-95 opacity-0" | |
> | |
<Listbox.Options className="absolute right-0 z-20 mt-1 w-32 overflow-auto rounded border border-gray-900/10 bg-white py-1 shadow-lg focus:outline-none dark:border-gray-500/30 dark:bg-gray-800"> | |
{layouts.map(layout => ( | |
<Listbox.Option | |
key={layout.id} | |
className={`${ | |
layout.name === preferredLayout.name && | |
'bg-blue-50 text-blue-700 dark:bg-blue-600/10 dark:text-blue-400' | |
} relative flex cursor-pointer select-none items-center py-1.5 pl-3 text-gray-600 hover:opacity-80 dark:text-gray-300`} | |
value={layout} | |
> | |
<FontAwesomeIcon className="mr-2 h-3 w-3" icon={layout.icon} /> | |
<span className={layout.name === preferredLayout.name ? 'font-medium' : 'font-normal'}> | |
{ | |
// t('Grid') | |
// t('List') | |
t(layout.name) | |
} | |
</span> | |
{layout.name === preferredLayout.name && ( | |
<span className="absolute inset-y-0 right-3 flex items-center"> | |
<FontAwesomeIcon className="h-3 w-3" icon="check" /> | |
</span> | |
)} | |
</Listbox.Option> | |
))} | |
</Listbox.Options> | |
</Transition> | |
</Listbox> | |
</div> | |
) | |
} | |
export default SwitchLayout | |