chore(translations): all, subscriptions, board

src/components/board-buttons/board-buttons.tsx

@@ -1,24 +1,28 @@
 import { useSubscribe } from '@plebbit/plebbit-react-hooks';
 import styles from './board-buttons.module.css';
+import { useTranslation } from 'react-i18next';
 
 interface BoardButtonsProps {
   address: string;
 }
 
 const OptionsButton = () => {
-  return <button className='button'>options</button>;
+  const { t } = useTranslation();
+  return <button className='button'>{t('options')}</button>;
 };
 
 const CatalogButton = () => {
-  return <button className='button'>catalog</button>;
+  const { t } = useTranslation();
+  return <button className='button'>{t('catalog')}</button>;
 };
 
 const SubscribeButton = ({ address }: BoardButtonsProps) => {
+  const { t } = useTranslation();
   const { subscribed, subscribe, unsubscribe } = useSubscribe({ subplebbitAddress: address });
 
   return (
     <button className='button' onClick={subscribed ? unsubscribe : subscribe}>
-      {subscribed ? 'Unsubscribe' : 'Subscribe'}
+      {subscribed ? t('unsubscribe') : t('subscribe')}
     </button>
   );
 };

src/components/board-nav/board-nav.module.css

@@ -30,6 +30,7 @@
 }
 
 .boardNavMobile strong {
+  text-transform: capitalize;
   padding-right: 5px;
 }
 

src/components/board-nav/board-nav.tsx

@@ -35,6 +35,7 @@ const BoardNavDesktop = ({ subplebbits }: BoardNavProps) => {
 };
 
 const BoardNavMobile = ({ subplebbits, currentSubplebbit }: BoardNavProps) => {
+  const { t } = useTranslation();
   const navigate = useNavigate();
 
   const boardSelect = (
@@ -52,12 +53,12 @@ const BoardNavMobile = ({ subplebbits, currentSubplebbit }: BoardNavProps) => {
   return (
     <div className={styles.boardNavMobile}>
       <div className={styles.boardSelect}>
-        <strong>Board</strong>
+        <strong>{t('board')}</strong>
         {boardSelect}
       </div>
       <div className={styles.pageJump}>
-        <Link to='settings'>Settings</Link>
-        <Link to='/'>Home</Link>
+        <Link to='settings'>{t('settings')}</Link>
+        <Link to='/'>{t('home')}</Link>
       </div>
     </div>
   );

src/components/post-form/post-form.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import styles from './post-form.module.css';
 import { useTranslation } from 'react-i18next';
 
@@ -7,14 +8,21 @@ export interface PostFormProps {
 
 const PostForm = ({ address }: PostFormProps) => {
   const { t } = useTranslation();
+  const [showForm, setShowForm] = useState(false);
 
   return (
     <>
       <div className={styles.postFormButtonDesktop}>
-        [<button className='button'>{t('start_new_thread')}</button>]
+        [
+        <button className='button' onClick={() => setShowForm(true)}>
+          {t('start_new_thread')}
+        </button>
+        ]
       </div>
       <div className={styles.postFormButtonMobile}>
-        <button className='button'>{t('start_new_thread')}</button>
+        <button className='button' onClick={() => setShowForm(!showForm)}>
+          {showForm ? t('close_post_form') : t('start_new_thread')}
+        </button>
       </div>
     </>
   );