- implement ability to rename sections

- clean up kannada translations

src/components/builder/right/RightSidebar.js

@@ -1,5 +1,4 @@
 import React, { Fragment, memo } from 'react';
-import { useTranslation } from 'react-i18next';
 import { Element } from 'react-scroll';
 import sections from '../../../data/rightSections';
 import RightNavbar from './RightNavbar';
@@ -33,28 +32,24 @@ const getComponent = (id) => {
   }
 };
 
-const RightSidebar = () => {
-  const { t } = useTranslation();
+const SidebarSection = ({ id, event }) => {
+  const Component = getComponent(id);
 
+  return (
+    <Fragment key={id}>
+      <Element name={id}>
+        <Component id={id} event={event} />
+      </Element>
+      <hr />
+    </Fragment>
+  );
+};
+
+const RightSidebar = () => {
   return (
     <div className="flex">
       <div id="RightSidebar" className={styles.container}>
-        {sections.map(({ id, event }) => {
-          const Component = getComponent(id);
-
-          return (
-            <Fragment key={id}>
-              <Element name={id}>
-                <Component
-                  id={id}
-                  name={t(`builder.sections.${id}`)}
-                  event={event}
-                />
-              </Element>
-              <hr />
-            </Fragment>
-          );
-        })}
+        {sections.map(SidebarSection)}
       </div>
 
       <RightNavbar />

src/components/builder/right/sections/About.js

@@ -6,12 +6,12 @@ import Button from '../../../shared/Button';
 import Heading from '../../../shared/Heading';
 import styles from './About.module.css';
 
-const About = ({ name }) => {
+const About = ({ id }) => {
   const { t } = useTranslation();
 
   return (
     <section>
-      <Heading>{name}</Heading>
+      <Heading id={id} />
 
       <div className={styles.container}>
         <h5>{t('builder.about.donate.heading')}</h5>

src/components/builder/right/sections/Actions.js

@@ -8,7 +8,7 @@ import Heading from '../../../shared/Heading';
 import Input from '../../../shared/Input';
 import styles from './Actions.module.css';
 
-const Actions = ({ name }) => {
+const Actions = ({ id }) => {
   const { t } = useTranslation();
 
   const [loadDemoText, setLoadDemoText] = useState(
@@ -59,7 +59,7 @@ const Actions = ({ name }) => {
 
   return (
     <section>
-      <Heading>{name}</Heading>
+      <Heading id={id} />
 
       <div className={styles.container}>
         <h5>{t('builder.actions.import.heading')}</h5>

src/components/builder/right/sections/Colors.js

@@ -8,7 +8,7 @@ import Heading from '../../../shared/Heading';
 import Input from '../../../shared/Input';
 import styles from './Colors.module.css';
 
-const Colors = ({ name }) => {
+const Colors = ({ id }) => {
   const dispatch = useDispatch();
   const { t } = useTranslation();
 
@@ -24,7 +24,7 @@ const Colors = ({ name }) => {
 
   return (
     <section>
-      <Heading>{name}</Heading>
+      <Heading id={id} />
 
       <div className="mb-6 grid grid-cols-8 col-gap-2 row-gap-6">
         {colorOptions.map((color) => (

src/components/builder/right/sections/Fonts.js

@@ -6,7 +6,7 @@ import { handleKeyUp } from '../../../../utils';
 import Heading from '../../../shared/Heading';
 import styles from './Fonts.module.css';
 
-const Fonts = ({ name }) => {
+const Fonts = ({ id }) => {
   const dispatch = useDispatch();
   const font = useSelector('metadata.font');
 
@@ -22,7 +22,7 @@ const Fonts = ({ name }) => {
 
   return (
     <section>
-      <Heading>{name}</Heading>
+      <Heading id={id} />
 
       <div className="grid grid-cols-2 gap-8">
         {fontOptions.map((x) => (

src/components/builder/right/sections/Layout.js

@@ -7,7 +7,7 @@ import Button from '../../../shared/Button';
 import Heading from '../../../shared/Heading';
 import styles from './Layout.module.css';
 
-const Layout = ({ name }) => {
+const Layout = ({ id }) => {
   const { t } = useTranslation();
   const [resetLayoutText, setResetLayoutText] = useState(
     t('builder.layout.reset'),
@@ -64,7 +64,7 @@ const Layout = ({ name }) => {
 
   return (
     <section>
-      <Heading>{name}</Heading>
+      <Heading id={id} />
 
       <p className="leading-loose">
         {t('builder.layout.text', { count: blocks.length })}

src/components/builder/right/sections/Settings.js

@@ -11,7 +11,7 @@ import themeConfig from '../../../../data/themeConfig';
 import { languages } from '../../../../i18n';
 import { useDispatch } from '../../../../contexts/ResumeContext';
 
-const Settings = ({ name }) => {
+const Settings = ({ id }) => {
   const { t } = useTranslation();
 
   const [deleteText, setDeleteText] = useState(
@@ -48,7 +48,7 @@ const Settings = ({ name }) => {
 
   return (
     <section>
-      <Heading>{name}</Heading>
+      <Heading id={id} />
 
       <Input
         label={t('builder.settings.theme')}

src/components/builder/right/sections/Templates.js

@@ -8,7 +8,7 @@ import { handleKeyUp } from '../../../../utils';
 import Heading from '../../../shared/Heading';
 import styles from './Templates.module.css';
 
-const Templates = ({ name }) => {
+const Templates = ({ id }) => {
   const dispatch = useDispatch();
   const template = useSelector('metadata.template');
 
@@ -71,7 +71,7 @@ const Templates = ({ name }) => {
 
   return (
     <section>
-      <Heading>{name}</Heading>
+      <Heading id={id} />
 
       <div className="grid grid-cols-2 gap-8">
         {templateOptions.map((x) => (