Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2025-11-13 00:03:27 +10:00
Code Issues Packages Projects Releases Wiki Activity

extracted strings from fonts tab

Browse Source
This commit is contained in:
Amruth Pillai
2020-03-30 11:16:37 +05:30
parent a30c9ffd4b
commit 154e4d22a8
4 changed files with 27 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/RightSidebar/RightSidebar.js
View File

@ -16,8 +16,8 @@ const RightSidebar = () => {
const { state, dispatch } = context; const { state, dispatch } = context;
const { data, theme } = state; const { data, theme } = state;
const tabs = [t('templates.title'), t('colors.title'), 'Fonts', 'Actions', 'About']; const tabs = [t('templates.title'), t('colors.title'), t('fonts.title'), 'Actions', 'About'];
const [currentTab, setCurrentTab] = useState(t('colors.title')); const [currentTab, setCurrentTab] = useState(t('fonts.title'));
const onChange = (key, value) => { const onChange = (key, value) => {
dispatch({ dispatch({
type: 'on_input', type: 'on_input',
@ -36,7 +36,7 @@ const RightSidebar = () => {
return <TemplatesTab theme={theme} onChange={onChange} />; return <TemplatesTab theme={theme} onChange={onChange} />;
case t('colors.title'): case t('colors.title'):
return <ColorsTab theme={theme} onChange={onChange} />; return <ColorsTab theme={theme} onChange={onChange} />;
case 'Fonts': case t('fonts.title'):
return <FontsTab theme={theme} onChange={onChange} />; return <FontsTab theme={theme} onChange={onChange} />;
case 'Actions': case 'Actions':
return <ActionsTab data={data} theme={theme} dispatch={dispatch} />; return <ActionsTab data={data} theme={theme} dispatch={dispatch} />;

25
src/components/RightSidebar/tabs/Fonts.js
View File

@ -1,4 +1,6 @@
import React from 'react'; import React from 'react';
import { useTranslation } from 'react-i18next';
import TextField from '../../../shared/TextField'; import TextField from '../../../shared/TextField';
const fontOptions = [ const fontOptions = [
@ -14,6 +16,8 @@ const fontOptions = [
]; ];
const FontsTab = ({ theme, onChange }) => { const FontsTab = ({ theme, onChange }) => {
const { t } = useTranslation('rightSidebar');
return ( return (
<div className="grid grid-cols-1 gap-6"> <div className="grid grid-cols-1 gap-6">
{fontOptions.map(x => ( {fontOptions.map(x => (
@ -29,16 +33,17 @@ const FontsTab = ({ theme, onChange }) => {
</div> </div>
))} ))}
<TextField <div>
label="Font Family" <TextField
placeholder="Avenir Next" className="mb-3"
value={theme.font.family} label={t('fonts.fontFamily.label')}
onChange={v => onChange('theme.font.family', v)} placeholder="Avenir Next"
/> value={theme.font.family}
<p className="text-gray-600 text-sm"> onChange={v => onChange('theme.font.family', v)}
You can use any font that is installed on your system as well. Just enter the name of the />
font family here and the browser would load it up for you.
</p> <p className="text-gray-800 text-xs">{t('fonts.fontFamily.helpText')}</p>
</div>
</div> </div>
); );
}; };

7
src/i18n/resources/en/rightSidebar/fonts.json Normal file
View File

@ -0,0 +1,7 @@
{
"title": "Fonts",
"fontFamily": {
"label": "Font Family",
"helpText": "You can use any font that is installed on your system as well. Just enter the name of the font family here and the browser would load it up for you."
}
}

2
src/i18n/resources/en/rightSidebar/index.js
View File

@ -1,7 +1,9 @@
import templates from './templates.json'; import templates from './templates.json';
import colors from './colors.json'; import colors from './colors.json';
import fonts from './fonts.json';
export default { export default {
templates, templates,
colors, colors,
fonts,
}; };