Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2025-11-14 16:51:33 +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 { data, theme } = state;
const tabs = [t('templates.title'), t('colors.title'), 'Fonts', 'Actions', 'About'];
const [currentTab, setCurrentTab] = useState(t('colors.title'));
const tabs = [t('templates.title'), t('colors.title'), t('fonts.title'), 'Actions', 'About'];
const [currentTab, setCurrentTab] = useState(t('fonts.title'));
const onChange = (key, value) => {
dispatch({
type: 'on_input',
@ -36,7 +36,7 @@ const RightSidebar = () => {
return <TemplatesTab theme={theme} onChange={onChange} />;
case t('colors.title'):
return <ColorsTab theme={theme} onChange={onChange} />;
case 'Fonts':
case t('fonts.title'):
return <FontsTab theme={theme} onChange={onChange} />;
case 'Actions':
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 { useTranslation } from 'react-i18next';
import TextField from '../../../shared/TextField';
const fontOptions = [
@ -14,6 +16,8 @@ const fontOptions = [
];
const FontsTab = ({ theme, onChange }) => {
const { t } = useTranslation('rightSidebar');
return (
<div className="grid grid-cols-1 gap-6">
{fontOptions.map(x => (
@ -29,16 +33,17 @@ const FontsTab = ({ theme, onChange }) => {
</div>
))}
<TextField
label="Font Family"
placeholder="Avenir Next"
value={theme.font.family}
onChange={v => onChange('theme.font.family', v)}
/>
<p className="text-gray-600 text-sm">
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>
<div>
<TextField
className="mb-3"
label={t('fonts.fontFamily.label')}
placeholder="Avenir Next"
value={theme.font.family}
onChange={v => onChange('theme.font.family', v)}
/>
<p className="text-gray-800 text-xs">{t('fonts.fontFamily.helpText')}</p>
</div>
</div>
);
};