feat(home): added header with logo and sort types

src/App.tsx

@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 import { Route, Routes } from 'react-router-dom';
 import useTheme from './hooks/use-theme';
 import styles from './app.module.css';
-import Home from './components/home/home';
+import Home from './components/home';
 
 function App() {
   const [theme] = useTheme();

src/app.module.css

@@ -5,7 +5,6 @@
   min-height: 100%;
   color: var(--text3);
 
-  padding: 0 2px;
   overflow-y: hidden;
   overflow-x: hidden;
   min-height: 100vh;

src/components/header/header.module.css

@@ -0,0 +1,59 @@
+.header {
+  border-bottom: 1px solid var(--border1);
+  position: relative;
+  background-color: var(--background2);
+}
+
+.headerBottomLeft {
+  font-size: larger;
+}
+
+.container {
+  height: 30px;
+  width: 120px;
+  display: flex;
+  align-items: center;
+}
+
+.logo {
+  padding: 15px 0 0 3px;
+  max-height: 40px;
+  object-fit: contain;
+}
+
+.logoText {
+  padding: 28px 0 0 0;
+  max-height: 26px;
+  object-fit: contain;
+}
+
+.tabMenu {
+  list-style: none;
+  white-space: nowrap;
+  display: inline-block;
+  padding: 45px 0 0 15px;
+
+  li {
+    display: inline;
+    font-weight: bold;
+    margin: 0px 3px;
+
+    .selected {
+      color: var(--text2);
+      background-color: var(--background1);
+      border: 1px solid var(--border1);
+      border-bottom: 1px solid var(--background1);
+    }
+
+    .choice {
+      color: var(--text1);
+      background-color: var(--background3);
+      border-bottom: 1px solid var(--border1);
+    }
+
+    a {
+      padding: 2px 6px 0 6px;
+      text-decoration: none;
+    }
+  }
+}

src/components/header/header.tsx

@@ -0,0 +1,54 @@
+import { useState, useEffect } from 'react';
+import { Link, useParams } from 'react-router-dom';
+import styles from './header.module.css';
+import useTheme from '../../hooks/use-theme';
+
+const Header = () => {
+  const { sortType } = useParams<{ sortType: string }>();
+  const [theme] = useTheme();
+  const logoSrc = theme === 'dark' ? '/assets/logo/logo-dark.png' : '/assets/logo/logo-light.png';
+
+  const choices = ["/topMonth", "/hot", "/new", "/active", "/controversialAll", "/topAll"];
+  const labels = ["best", "hot", "new", "rising", "controversial", "top"];
+
+  const [selected, setSelected] = useState(sortType || "/topMonth");
+
+  useEffect(() => {
+    if (sortType) {
+      setSelected('/' + sortType);
+    }
+  }, [sortType]);
+
+  const handleSelect = (choice: string) => {
+    setSelected(choice);
+  };
+
+  return (
+    <div className={styles.header}>
+      <div className={styles.headerBottomLeft}>
+        <Link to="/" style={{ all: 'unset' }}>
+          <span className={styles.container}>
+            <img className={styles.logo} src="/assets/logo/seedit.png" alt="logo" />
+            <img className={styles.logoText} src={logoSrc} alt="logo" />
+            <ul className={styles.tabMenu}>
+              {choices.map((choice, index) => (
+                <li key={choice}>
+                  <Link 
+                    to={choice}
+                    className={selected === choice ? styles.selected : styles.choice}
+                    onClick={() => handleSelect(choice)}
+                  >
+                    {labels[index]}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </span>
+          &nbsp;
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default Header;

src/components/header/index.ts

@@ -0,0 +1 @@
+export {default} from './header';

src/components/home/home.tsx

@@ -4,6 +4,7 @@ import { Virtuoso, VirtuosoHandle, StateSnapshot } from "react-virtuoso";
 import { useFeed } from "@plebbit/plebbit-react-hooks";
 import useDefaultSubplebbits from "../../hooks/use-default-subplebbits";
 import useTheme from "../../hooks/use-theme";
+import Header from "../header";
 
 type SnapshotType = StateSnapshot;
 
@@ -55,6 +56,7 @@ const Home = () => {
 
   return (
     <div>
+      <Header />
       <Theme />
       <Virtuoso
         increaseViewportBy={{ bottom: 600, top: 600 }}