Release v0.2.0 #74
|
@ -22,7 +22,8 @@
|
|||
"Settings": {
|
||||
"lang_title": "Please select language",
|
||||
"lang_it": "Italian",
|
||||
"lang_en": "English"
|
||||
"lang_en": "English",
|
||||
"settings_title": "Settings"
|
||||
},
|
||||
"Results": {
|
||||
"query": "Search results for: {{ query }}",
|
||||
|
|
|
@ -22,7 +22,8 @@
|
|||
"Settings": {
|
||||
"lang_title": "Seleziona la lingua",
|
||||
"lang_it": "Italiano",
|
||||
"lang_en": "Inglese"
|
||||
"lang_en": "Inglese",
|
||||
"settings_title": "Impostazioni"
|
||||
},
|
||||
"Results": {
|
||||
"query": "Risultati della ricerca per: {{ query }}",
|
||||
|
|
|
@ -0,0 +1,20 @@
|
|||
@import 'spacing';
|
||||
|
||||
.container {
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.close {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
'use client'
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import { IoCloseCircleOutline } from "react-icons/io5";
|
||||
|
||||
import style from './Modal.module.scss'
|
||||
|
||||
interface Props {
|
||||
handleClose(): void
|
||||
labels: {
|
||||
title: string
|
||||
}
|
||||
}
|
||||
|
||||
const LangSwitcher: React.FC<Props> = (props) => {
|
||||
|
||||
const { labels, handleClose } = props
|
||||
|
||||
return (
|
||||
<dialog open>
|
||||
<article className={style.container}>
|
||||
<header className={style.header}>
|
||||
<div className={style.title}>{labels.title}</div>
|
||||
<div className={style.close} onClick={() => { handleClose() }}><IoCloseCircleOutline size={24} /></div>
|
||||
</header>
|
||||
<p className={style.content}>
|
||||
SETTINGS
|
||||
</p>
|
||||
</article>
|
||||
</dialog >
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
export default LangSwitcher;
|
|
@ -0,0 +1,31 @@
|
|||
'use client'
|
||||
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import { IoSettingsOutline } from 'react-icons/io5';
|
||||
|
||||
import Icon from '../Icon';
|
||||
import Modal from './Modal';
|
||||
|
||||
interface Props {
|
||||
labels: any
|
||||
}
|
||||
|
||||
const Settings: React.FC<Props> = (props) => {
|
||||
|
||||
const { labels } = props
|
||||
|
||||
const [showModal, setShowModal] = useState<boolean>(false)
|
||||
|
||||
return (
|
||||
<>
|
||||
<Icon handleClick={() => setShowModal(true)}>
|
||||
{<IoSettingsOutline size={24} />}
|
||||
</Icon>
|
||||
|
||||
{showModal && <Modal handleClose={() => setShowModal(false)} labels={labels} />}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Settings;
|
|
@ -8,6 +8,7 @@ import Theme from './Theme';
|
|||
import Repo from './Repo';
|
||||
import Language from './Language';
|
||||
import { LangOption } from '@/meta/settings';
|
||||
import Settings from './Settings';
|
||||
|
||||
const Menu: React.FC = () => {
|
||||
|
||||
|
@ -23,11 +24,16 @@ const Menu: React.FC = () => {
|
|||
langs: options
|
||||
}
|
||||
|
||||
const settingsLabels = {
|
||||
title: t('settings_title'),
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={style.container}>
|
||||
<Repo />
|
||||
<Language labels={languageLabels} />
|
||||
<Theme />
|
||||
<Settings labels={settingsLabels} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue