72 lines
1.9 KiB
TypeScript
72 lines
1.9 KiB
TypeScript
import { Box } from '@mantine/core';
|
|
import { Tabs } from '/@/renderer/components';
|
|
import type { Variants } from 'framer-motion';
|
|
import { AnimatePresence, motion } from 'framer-motion';
|
|
import { GeneralTab } from '/@/renderer/features/settings/components/general-tab';
|
|
import { PlaybackTab } from '/@/renderer/features/settings/components/playback-tab';
|
|
import { useSettingsStore, useSettingsStoreActions } from '/@/renderer/store/settings.store';
|
|
|
|
export const Settings = () => {
|
|
const currentTab = useSettingsStore((state) => state.tab);
|
|
const { setSettings } = useSettingsStoreActions();
|
|
|
|
const tabVariants: Variants = {
|
|
in: {
|
|
opacity: 1,
|
|
transition: {
|
|
duration: 0.3,
|
|
},
|
|
x: 0,
|
|
},
|
|
out: {
|
|
opacity: 0,
|
|
x: 50,
|
|
},
|
|
};
|
|
|
|
return (
|
|
<Box
|
|
m={5}
|
|
sx={{ height: '50vh', maxHeight: '500px', overflowX: 'hidden' }}
|
|
>
|
|
<AnimatePresence initial={false}>
|
|
<Tabs
|
|
keepMounted={false}
|
|
orientation="vertical"
|
|
styles={{
|
|
tab: {
|
|
fontSize: '1rem',
|
|
padding: '0.5rem 1rem',
|
|
},
|
|
}}
|
|
value={currentTab}
|
|
variant="pills"
|
|
onTabChange={(e) => e && setSettings({ tab: e })}
|
|
>
|
|
<Tabs.List>
|
|
<Tabs.Tab value="general">General</Tabs.Tab>
|
|
<Tabs.Tab value="playback">Playback</Tabs.Tab>
|
|
</Tabs.List>
|
|
<Tabs.Panel value="general">
|
|
<motion.div
|
|
animate="in"
|
|
initial="out"
|
|
variants={tabVariants}
|
|
>
|
|
<GeneralTab />
|
|
</motion.div>
|
|
</Tabs.Panel>
|
|
<Tabs.Panel value="playback">
|
|
<motion.div
|
|
animate="in"
|
|
initial="out"
|
|
variants={tabVariants}
|
|
>
|
|
<PlaybackTab />
|
|
</motion.div>
|
|
</Tabs.Panel>
|
|
</Tabs>
|
|
</AnimatePresence>
|
|
</Box>
|
|
);
|
|
};
|