add default subplebbit addresses

src/views/home/home.module.css

@@ -29,6 +29,7 @@
 }
 
 .box {
+  position: relative;
   background: var(--background-text-color);
   color: var(--text-color-standard);
   border: 1px solid;
@@ -56,6 +57,19 @@
   font-weight: 700;
 }
 
+.boxBar span {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding-right: 0.25em;
+  text-transform: lowercase;
+}
+
+.boxBar span:hover {
+  cursor: pointer;
+  color: var(--text-color-on-secondary-hover);
+}
+
 .boxContent {
   line-height: 1.5em;
   font-size: 93%;
@@ -65,7 +79,7 @@
 }
 
 .boxContent a, .boxContent a:visited{
-  color: var(--link-text-color);
+  color: var(--external-link-text-color);
 }
 
 .searchBar {
@@ -102,6 +116,39 @@
   text-transform: capitalize;
 }
 
+.list a {
+  display: inline-block;
+  color: var(--internal-link-text-color);
+  text-decoration: var(--internal-link-text-decoration);
+}
+
+.list a:hover {
+  color: var(--internal-link-text-color-hover);
+  text-decoration: var(--internal-link-text-decoration-hover);
+}
+
+.boardsBoxContent {
+  font-size: 93%;
+  padding: 0.5em;
+  padding-top: 0.25em;
+  padding-bottom: 0;
+  line-height: 130%;
+  display: table;
+}
+
+.boardsBoxContent .column {
+  float: left;
+  width: 163px;
+  margin-right: 20px;
+  overflow: hidden;
+}
+
+.boardsBoxContent h3 {
+  font-size: 100%;
+  font-weight: 700;
+  text-decoration: underline;
+  color: var(--text-color-on-secondary);
+}
 
 @media (max-width: 768px) {
   .content {

src/views/home/home.tsx

@@ -2,6 +2,7 @@ import styles from './home.module.css';
 import useTheme from '../../hooks/use-theme';
 import { Link } from 'react-router-dom';
 import { Trans, useTranslation } from 'react-i18next';
+import { useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits';
 
 // TODO: remove theme and languages selectors for debugging
 const ThemeSettings = () => {
@@ -40,9 +41,82 @@ const LanguageSettings = () => {
   );
 };
 
-const Home = () => {
+const SearchBar = () => {
   const { t } = useTranslation();
+  return (
+    <div className={styles.searchBar}>
+      <input type='text' placeholder={`"board.eth" ${t('or')} "12D3KooW..."`} />
+      <button>{t('go')}</button>
+    </div>
+  );
+};
 
+const InfoBox = () => {
+  const { t } = useTranslation();
+  return (
+    <div className={styles.box}>
+      <div className={`${styles.boxBar} ${styles.primaryColorBar}`}>
+        <h2>{t('what_is_plebchan')}</h2>
+      </div>
+      <div className={styles.boxContent}>
+        <Trans i18nKey='plebchan_description' shouldUnescape={true} components={{ 1: <Link to='https://plebbit.com' target='_blank' rel='noopener noreferrer' /> }} />
+        <br />
+        <br />
+        {t('no_global_rules_info')}
+      </div>
+    </div>
+  );
+};
+
+const Boards = () => {
+  const { t } = useTranslation();
+  const defaultSubplebbitAddresses = useDefaultSubplebbitAddresses();
+
+  return (
+    <div className={styles.box}>
+      <div className={`${styles.boxBar} ${styles.secondaryColorBar}`}>
+        <h2 className={styles.capitalize}>{t('boards')}</h2>
+        <span>{t('options')} ▼</span>
+      </div>
+      <div className={styles.boardsBoxContent}>
+        <div className={styles.column}>
+          <h3>Default SFW</h3>
+          <div className={styles.list}>
+            {defaultSubplebbitAddresses.map((address) => (
+              <div className={styles.subplebbit} key={address}>
+                <Link to={`/b/${address}`}>{address}</Link>
+              </div>
+            ))}
+          </div>
+        </div>
+        <div className={styles.column}>
+          <h3>Default NSFW</h3>
+        </div>
+        <div className={styles.column}>
+          <h3>Subscriptions</h3>
+        </div>
+        <div className={styles.column}>
+          <h3>Moderating</h3>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const PopularThreads = () => {
+  const { t } = useTranslation();
+  return (
+    <div className={styles.box}>
+      <div className={`${styles.boxBar} ${styles.secondaryColorBar}`}>
+        <h2 className={styles.capitalize}>{t('popular_threads')}</h2>
+        <span>{t('options')} ▼</span>
+      </div>
+      <div className={styles.boxContent}></div>
+    </div>
+  );
+};
+
+const Home = () => {
   return (
     <div className={styles.content}>
       <div className={styles.debug}>
@@ -54,33 +128,10 @@ const Home = () => {
           <img alt='plebchan' src='/assets/logo/logo-transparent.png' />
         </div>
       </Link>
-      <div className={styles.searchBar}>
-        <input type='text' placeholder={`"board.eth" ${t('or')} "12D3KooW..."`} />
-        <button>{t('go')}</button>
-      </div>
-      <div className={styles.box}>
-        <div className={`${styles.boxBar} ${styles.primaryColorBar}`}>
-          <h2>{t('what_is_plebchan')}</h2>
-        </div>
-        <div className={styles.boxContent}>
-          <Trans i18nKey='plebchan_description' shouldUnescape={true} components={{ 1: <Link to='https://plebbit.com' target='_blank' rel='noopener noreferrer' /> }} />
-          <br />
-          <br />
-          {t('no_global_rules_info')}
-        </div>
-      </div>
-      <div className={styles.box}>
-        <div className={`${styles.boxBar} ${styles.secondaryColorBar}`}>
-          <h2 className={styles.capitalize}>{t('boards')}</h2>
-        </div>
-        <div className={styles.boxContent}></div>
-      </div>
-      <div className={styles.box}>
-        <div className={`${styles.boxBar} ${styles.secondaryColorBar}`}>
-          <h2 className={styles.capitalize}>{t('popular_threads')}</h2>
-        </div>
-        <div className={styles.boxContent}></div>
-      </div>
+      <SearchBar />
+      <InfoBox />
+      <Boards />
+      <PopularThreads />
     </div>
   );
 };