add base Icon component and language icon (wip)
This commit is contained in:
parent
ab75c4caf5
commit
2074a44b66
|
@ -0,0 +1,8 @@
|
||||||
|
@import 'spacing';
|
||||||
|
|
||||||
|
.container {
|
||||||
|
cursor: pointer;
|
||||||
|
width: $spacing_24;
|
||||||
|
height: $spacing_24;
|
||||||
|
margin-left: $spacing_16;
|
||||||
|
}
|
|
@ -0,0 +1,23 @@
|
||||||
|
'use client'
|
||||||
|
|
||||||
|
import React, { PropsWithChildren } from 'react';
|
||||||
|
|
||||||
|
import style from './Icon.module.scss';
|
||||||
|
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
handleClick():void
|
||||||
|
}
|
||||||
|
|
||||||
|
const Menu: React.FC<Props & React.PropsWithChildren> = (props) => {
|
||||||
|
|
||||||
|
const { handleClick, children } = props
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div onClick={handleClick} className={style.container}>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Menu;
|
|
@ -0,0 +1,18 @@
|
||||||
|
'use client'
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import { IoLanguage } from 'react-icons/io5';
|
||||||
|
|
||||||
|
import Icon from '../Icon';
|
||||||
|
|
||||||
|
const Menu: React.FC = () => {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Icon handleClick={() => {}}>
|
||||||
|
{<IoLanguage size={24} />}
|
||||||
|
</Icon>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Menu;
|
|
@ -1,5 +1,6 @@
|
||||||
@import 'spacing';
|
@import 'spacing';
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
width: $spacing_24;
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
}
|
}
|
|
@ -1,3 +0,0 @@
|
||||||
.container {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
|
@ -2,23 +2,23 @@
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import style from './Theme.module.scss';
|
|
||||||
|
|
||||||
import { TbMoon, TbSun } from 'react-icons/tb';
|
import { TbMoon, TbSun } from 'react-icons/tb';
|
||||||
import { useAppDispatch, useAppSelector } from '@/store/store';
|
import { useAppDispatch, useAppSelector } from '@/store/store';
|
||||||
import { Themes } from '@/meta/settings';
|
import { Themes } from '@/meta/settings';
|
||||||
import { setCurrentTheme } from '@/store/settingsSlice';
|
import { setCurrentTheme } from '@/store/settingsSlice';
|
||||||
|
|
||||||
|
import Icon from '../Icon';
|
||||||
|
|
||||||
const Menu: React.FC = () => {
|
const Menu: React.FC = () => {
|
||||||
|
|
||||||
const theme = useAppSelector((state) => state.settings.theme);
|
const theme = useAppSelector((state) => state.settings.theme);
|
||||||
const dispatch = useAppDispatch();
|
const dispatch = useAppDispatch();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div onClick={() => dispatch(setCurrentTheme(theme == Themes.dark ? Themes.light : Themes.dark))} className={style.container}>
|
<Icon handleClick={() => dispatch(setCurrentTheme(theme == Themes.dark ? Themes.light : Themes.dark))}>
|
||||||
{theme == Themes.dark && <TbMoon size={24} />}
|
{theme == Themes.dark && <TbMoon size={24} />}
|
||||||
{theme == Themes.light && <TbSun size={24} />}
|
{theme == Themes.light && <TbSun size={24} />}
|
||||||
</div>
|
</Icon>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -1,11 +1,17 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
|
import style from './Menu.module.scss'
|
||||||
|
|
||||||
import Theme from './Theme';
|
import Theme from './Theme';
|
||||||
|
import Language from './Language';
|
||||||
|
|
||||||
const Menu: React.FC = () => {
|
const Menu: React.FC = () => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<div className={style.container}>
|
||||||
|
<Language />
|
||||||
<Theme />
|
<Theme />
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
$spacing_4: 4px;
|
$spacing_4: 4px;
|
||||||
$spacing_8: 8px;
|
$spacing_8: 8px;
|
||||||
$spacing_16: 16px;
|
$spacing_16: 16px;
|
||||||
|
$spacing_24: 24px;
|
||||||
$spacing_32: 32px;
|
$spacing_32: 32px;
|
||||||
$spacing_48: 48px;
|
$spacing_48: 48px;
|
||||||
$spacing_64: 64px;
|
$spacing_64: 64px;
|
Loading…
Reference in New Issue