VSinerva/freesewing
1
0
Fork 0
Code Activity

chore(sites): Updates to headers

Browse source
This commit is contained in:
joostdecock 2022-11-23 21:42:22 +01:00
parent 1fb689d779
commit 1e379d68ff
13 changed files with 281 additions and 378 deletions
Download patch file Download diff file Expand all files Collapse all files

32
sites/shared/components/theme-picker.js
View file

@ -5,7 +5,7 @@ import { useTranslation } from 'next-i18next'
import { Popover, Transition } from '@headlessui/react'
import DownIcon from 'shared/components/icons/down'
const ThemePicker = ({ app, className, iconOnly = false }) => {
const ThemePicker = ({ app, className, iconOnly = false, bottom = false }) => {
const { t } = useTranslation(['themes', 'common'])
return (
@ -13,11 +13,11 @@ const ThemePicker = ({ app, className, iconOnly = false }) => {
{() => (
<>
<Popover.Button
className={`group inline-flex items-center px-3 py-2 text-base font-medium text-neural-content rounded-lg px-4 hover:text-secondary-focus`}
className={`group border-0 inline-flex items-center px-3 py-2 text-base font-medium text-neural-content rounded-lg px-4 hover:text-secondary-focus`}
>
<ThemeIcon />
{!iconOnly && <span className="ml-4 font-medium capitalize">{t(`common:theme`)}</span>}
<DownIcon className={`ml-2 h-5 w-5`} aria-hidden="true" />
<DownIcon className={`ml-2 h-5 w-5 ${bottom ? 'rotate-180' : ''}`} aria-hidden="true" />
</Popover.Button>
<Transition
as={Fragment}
@ -28,29 +28,21 @@ const ThemePicker = ({ app, className, iconOnly = false }) => {
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
<Popover.Panel className="absolute z-10 mt-3 w-screen max-w-sm transform px-4 sm:px-0 lg:max-w-xl right-0">
<Popover.Panel
className={`absolute z-10 mb-3 w-64 transform px-4 sm:px-0 lg:max-w-xl right-0 ${
iconOnly ? 'translate-x-4' : ''
} ${bottom ? 'bottom-10' : 'top-12'}`}
>
<div className="overflow-hidden rounded-lg shadow-lg">
<div className="relative grid gap-8 bg-base-100 p-7 lg:grid-cols-1">
<div className="relative grid gap-2 bg-base-100 p-4 grid-cols-1">
{Object.keys(themes).map((theme) => (
<button
data-theme={theme}
key={theme}
onClick={() => app.setTheme(theme)}
data-theme={theme}
className="-m-3 flex rounded-lg p-2 transition duration-150 ease-in-out-50 hover:translate-x-2 hover:cursor-pointer"
className="btn btn-primary"
>
<div className="w-full">
<div className="px-2">
<p className="text-xl font-medium text-base text-left mb-0 pb-0">
{t(`${theme}Theme`)}
</p>
<div className="theme-gradient h-1 w-full mb-2"></div>
<p className="text-base text-left -mt-4 shadow">
{t('common:sloganCome')}
<span className="px-2">|</span>
{t('common:sloganStay')}
</p>
</div>
</div>
{t(`${theme}Theme`)}
</button>
))}
</div>