extracted string from Colors Tab

src/components/RightSidebar/RightSidebar.js

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

src/components/RightSidebar/tabs/Colors.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { toast } from 'react-toastify';
+import { useTranslation } from 'react-i18next';
 
 import TextField from '../../../shared/TextField';
 import { copyToClipboard } from '../../../utils';
@@ -30,9 +31,11 @@ const colorOptions = [
 ];
 
 const ColorsTab = ({ theme, onChange }) => {
+  const { t } = useTranslation('rightSidebar');
+
   const copyColorToClipboard = color => {
     copyToClipboard(color);
-    toast(`Color ${color} copied to clipboard.`, {
+    toast(t('colors.clipboardCopyAction', { color }), {
       bodyClassName: 'text-center text-gray-800 py-2',
     });
     onChange('theme.colors.accent', color);
@@ -41,7 +44,7 @@ const ColorsTab = ({ theme, onChange }) => {
   return (
     <div>
       <div className="uppercase tracking-wide text-gray-600 text-xs font-semibold mb-4">
-        Color Options
+        {t('colors.colorOptions')}
       </div>
       <div className="mb-6 grid grid-cols-8 col-gap-2 row-gap-3">
         {colorOptions.map(color => (
@@ -56,22 +59,6 @@ const ColorsTab = ({ theme, onChange }) => {
 
       <hr className="my-6" />
 
-      {/* <div className="my-6 grid grid-cols-6 items-end">
-        <div
-          className="rounded-full w-8 h-8 mb-2 border-2"
-          style={{ backgroundColor: theme.colors.background }}
-        />
-        <div className="col-span-5">
-          <TextField
-            disabled
-            label="Background Color"
-            placeholder="#FFFFFF"
-            value={theme.colors.background}
-            onChange={v => onChange('theme.colors.background', v)}
-          />
-        </div>
-      </div> */}
-
       <div className="my-6 grid grid-cols-6 items-end">
         <div
           className="rounded-full w-8 h-8 mb-2 border-2"
@@ -79,7 +66,7 @@ const ColorsTab = ({ theme, onChange }) => {
         />
         <div className="col-span-5">
           <TextField
-            label="Primary Color"
+            label={t('colors.primaryColor')}
             placeholder="#FFFFFF"
             value={theme.colors.primary}
             onChange={v => onChange('theme.colors.primary', v)}
@@ -94,7 +81,7 @@ const ColorsTab = ({ theme, onChange }) => {
         />
         <div className="col-span-5">
           <TextField
-            label="Accent Color"
+            label={t('colors.accentColor')}
             placeholder="#FFFFFF"
             value={theme.colors.accent}
             onChange={v => onChange('theme.colors.accent', v)}

src/i18n/resources/en/rightSidebar/colors.json

@@ -0,0 +1,7 @@
+{
+  "title": "Colors",
+  "colorOptions": "Color Options",
+  "primaryColor": "Primary Color",
+  "accentColor": "Accent Color",
+  "clipboardCopyAction": "{{color}} has been copied to clipboard."
+}

src/i18n/resources/en/rightSidebar/index.js

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