add base Icon component and language icon (wip)

This commit is contained in:
marco.scaruffi@ticketsms.it 2024-04-26 17:27:17 +02:00
parent ab75c4caf5
commit 2074a44b66
9 changed files with 63 additions and 9 deletions

View File

@ -0,0 +1,8 @@
@import 'spacing';
.container {
cursor: pointer;
width: $spacing_24;
height: $spacing_24;
margin-left: $spacing_16;
}

View File

@ -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;

View File

@ -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;

View File

@ -1,5 +1,6 @@
@import 'spacing'; @import 'spacing';
.container { .container {
width: $spacing_24; display: flex;
flex-direction: row;
} }

View File

@ -1,3 +0,0 @@
.container {
cursor: pointer;
}

View File

@ -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>
); );
}; };

View File

@ -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>
); );
}; };

View File

@ -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;