117 lines
3.6 KiB
TypeScript
117 lines
3.6 KiB
TypeScript
import classNames from 'classnames'
|
|
import Segment from '@/components/ui/Segment'
|
|
import SegmentItemOption from '@/components/shared/SegmentItemOption'
|
|
import DoubleSidedImage from '@/components/shared/DoubleSidedImage'
|
|
import { FaCheckCircle } from 'react-icons/fa'
|
|
import useThemeClass from '@/utils/hooks/useThemeClass'
|
|
import { useStoreState, useStoreActions } from '@/store'
|
|
import {
|
|
LAYOUT_TYPE_CLASSIC,
|
|
LAYOUT_TYPE_MODERN,
|
|
LAYOUT_TYPE_STACKED_SIDE,
|
|
LAYOUT_TYPE_SIMPLE,
|
|
LAYOUT_TYPE_DECKED,
|
|
LAYOUT_TYPE_BLANK,
|
|
} from '@/constants/theme.constant'
|
|
import type { LayoutType } from '@/@types/theme'
|
|
import { useLocalization } from '@/utils/hooks/useLocalization'
|
|
|
|
const layouts = [
|
|
{
|
|
value: LAYOUT_TYPE_CLASSIC,
|
|
label: 'Classic',
|
|
src: '/img/thumbs/layouts/classic.jpg',
|
|
srcDark: '/img/thumbs/layouts/classic-dark.jpg',
|
|
},
|
|
{
|
|
value: LAYOUT_TYPE_MODERN,
|
|
label: 'Modern',
|
|
src: '/img/thumbs/layouts/modern.jpg',
|
|
srcDark: '/img/thumbs/layouts/modern-dark.jpg',
|
|
},
|
|
{
|
|
value: LAYOUT_TYPE_STACKED_SIDE,
|
|
label: 'Stacked Side',
|
|
src: '/img/thumbs/layouts/stackedSide.jpg',
|
|
srcDark: '/img/thumbs/layouts/stackedSide-dark.jpg',
|
|
},
|
|
{
|
|
value: LAYOUT_TYPE_SIMPLE,
|
|
label: 'Simple',
|
|
src: '/img/thumbs/layouts/simple.jpg',
|
|
srcDark: '/img/thumbs/layouts/simple-dark.jpg',
|
|
},
|
|
{
|
|
value: LAYOUT_TYPE_DECKED,
|
|
label: 'Decked',
|
|
src: '/img/thumbs/layouts/decked.jpg',
|
|
srcDark: '/img/thumbs/layouts/decked-dark.jpg',
|
|
},
|
|
{
|
|
value: LAYOUT_TYPE_BLANK,
|
|
label: 'Blank',
|
|
src: '/img/thumbs/layouts/blank.jpg',
|
|
srcDark: '/img/thumbs/layouts/blank-dark.jpg',
|
|
},
|
|
]
|
|
|
|
const LayoutSwitcher = () => {
|
|
const type = useStoreState((state) => state.theme.layout.type)
|
|
const { setLayout } = useStoreActions((actions) => actions.theme)
|
|
|
|
const onLayoutSelect = (val: LayoutType) => {
|
|
setLayout(val)
|
|
}
|
|
|
|
const { textTheme } = useThemeClass()
|
|
|
|
const { translate } = useLocalization()
|
|
|
|
return (
|
|
<div>
|
|
<Segment
|
|
className="w-full"
|
|
value={[type]}
|
|
onChange={(val) => onLayoutSelect(val[0] as LayoutType)}
|
|
>
|
|
<div className="grid grid-cols-3 gap-4 w-full">
|
|
{layouts.map((layout) => (
|
|
<Segment.Item key={layout.value} value={layout.value}>
|
|
{({ active, onSegmentItemClick, disabled }) => {
|
|
return (
|
|
<div className="text-center">
|
|
<SegmentItemOption
|
|
hoverable
|
|
active={active}
|
|
disabled={disabled}
|
|
defaultGutter={false}
|
|
className="relative min-h-[80px] w-full"
|
|
customCheck={
|
|
<FaCheckCircle
|
|
className={classNames(textTheme, 'absolute top-2 right-2 text-lg')}
|
|
/>
|
|
}
|
|
onSegmentItemClick={onSegmentItemClick}
|
|
>
|
|
<DoubleSidedImage
|
|
className="rounded-md"
|
|
src={layout.src}
|
|
darkModeSrc={layout.srcDark}
|
|
alt=""
|
|
/>
|
|
</SegmentItemOption>
|
|
<div className={classNames(active && textTheme, 'mt-2 font-semibold')}>
|
|
{translate('::SidePanel.Layout.' + layout.label)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}}
|
|
</Segment.Item>
|
|
))}
|
|
</div>
|
|
</Segment>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default LayoutSwitcher
|