add: improved UI by adding CSS files

front/src/pages/ChannelsPage.tsx

@@ -1,13 +1,28 @@
 import { useState, useEffect } from "react"
 import { Link } from "react-router-dom"
-import { Channels } from "../types"
+import { Channels, User } from "../types"
 import axios from "axios"
+import TopBar from "../components/TopBar"
+
+import "../styles/ChannelsPage.css"
 
 export default function ChannelsPage() {
     const [channels, setChannels] = useState<Channels>();
     const [search, setSearch] = useState<string>("");
+    const [user, setUser] = useState<User>();
 
     useEffect(() => {
+        const token = localStorage.getItem("token")
+
+        if (token) {
+            axios
+                .post("/api/auth/me", {
+                    token: token
+                })
+                .then((res) => {
+                    setUser(res.data)
+                })
+        }
         axios
             .get("/api/channels")
             .then((res) => {
@@ -31,22 +46,24 @@ export default function ChannelsPage() {
     }, [])
 
     return (
-        <div>
-            <Link to="/">Home</Link>
-            <h1>Channels</h1>
-            <input
-                type="text"
-                placeholder="Search channels"
-                value={search}
-                onChange={(e) => setSearch(e.target.value)}
-            />
-            <ul>
-                {channels?.filter((channel) => channel.name.toLowerCase().includes(search.toLowerCase())).map((channel) => (
-                    <li key={channel.id}>
-                        <Link to={`/c/${channel.name}`}>{channel.name}</Link>
-                    </li>
-                ))}
-            </ul>
+        <div className="channels-page">
+            <TopBar user={user} />
+            <div className="channels-page-channels">
+                <h2>Channels</h2>
+                <input
+                    type="text"
+                    placeholder="Search channels"
+                    value={search}
+                    onChange={(e) => setSearch(e.target.value)}
+                />
+                <ul>
+                    {channels?.filter((channel) => channel.name.toLowerCase().includes(search.toLowerCase())).map((channel) => (
+                        <li key={channel.id}>
+                            <Link to={`/c/${channel.name}`}>{channel.name}</Link>
+                        </li>
+                    ))}
+                </ul>
+            </div>
         </div>
     )
 }