Add social networking page - client side

 // Weather broadcasting page
 // Weather broadcasting page
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import { Navigate } from "react-router-dom";
 import { Navigate } from "react-router-dom";
 import weatherService from "./service/weather";
 import weatherService from "./service/weather";
 // components
 // components
@@ -40,7 +40,6 @@ function App() {
       <Topbar />
       <Topbar />
       <div className="mainBox">
       <div className="mainBox">
         <div className="weather-buttons">
         <div className="weather-buttons">
-          <b>Types {"-> "} </b>
           <button id="weather" onClick={(e) => handleData(e)}>
           <button id="weather" onClick={(e) => handleData(e)}>
             Weather
             Weather
           </button>
           </button>

@@ -8,7 +8,7 @@ import { SiThunderbird } from "react-icons/si";
 function Bottombar() {
 function Bottombar() {
   return (
   return (
     <div className="bottombar">
     <div className="bottombar">
-      <NavLink to="/tell" className="bottomBtn">
+      <NavLink to="/tweets" className="bottomBtn">
         <FaKiwiBird />
         <FaKiwiBird />
       </NavLink>
       </NavLink>
       <NavLink to="/users" className="bottomBtn">
       <NavLink to="/users" className="bottomBtn">

@@ -10,7 +10,7 @@ function Topbar() {
       <Link to="/" className="logo">
       <Link to="/" className="logo">
         <FcHome />
         <FcHome />
       </Link>
       </Link>
-      <div className="title">🤖 Weather Chatbot</div>
+      <div className="title">Weather Chatbot</div>
       <Link to="/settings" className="settings">
       <Link to="/settings" className="settings">
         <AiFillSetting />
         <AiFillSetting />
       </Link>
       </Link>

+import "../styles/layout.scss";
+
+function Tweet({ writer, createdAt, text }) {
+  return (
+    <div className="tweetBox">
+      <p>{text}</p>
+      <small>
+        <b>{writer}</b> {createdAt}
+      </small>
+    </div>
+  );
+}
+
+export default Tweet;

@@ -8,7 +8,7 @@ import Signup from "./routes/signup";
 import Login from "./routes/login";
 import Login from "./routes/login";
 import Users from "./routes/users";
 import Users from "./routes/users";
 import Settings from "./routes/settings";
 import Settings from "./routes/settings";
-import Tweet from "./routes/tweet";
+import Tweets from "./routes/tweets";
 import NotFound from "./routes/notfound";
 import NotFound from "./routes/notfound";
 // styles
 // styles
 import "./styles/layout.scss";
 import "./styles/layout.scss";
@@ -24,7 +24,7 @@ root.render(
         <Route exact path="/signup" element={<Signup />} />
         <Route exact path="/signup" element={<Signup />} />
         <Route exact path="/users" element={<Users />} />
         <Route exact path="/users" element={<Users />} />
         <Route exact path="/settings" element={<Settings />} />
         <Route exact path="/settings" element={<Settings />} />
-        <Route exact path="/tell" element={<Tweet />} />
+        <Route exact path="/tweets" element={<Tweets />} />
         <Route path="*" element={<NotFound />} />
         <Route path="*" element={<NotFound />} />
       </Routes>
       </Routes>
     </BrowserRouter>
     </BrowserRouter>

@@ -56,7 +56,7 @@ function Settings() {
         <form className="authForm" onSubmit={(e) => handleSubmit(e)}>
         <form className="authForm" onSubmit={(e) => handleSubmit(e)}>
           <label htmlFor="username">
           <label htmlFor="username">
             <input
             <input
-              placeholder="username"
+              placeholder="Username"
               onChange={(e) => onChange(e)}
               onChange={(e) => onChange(e)}
               value={userinfo.username}
               value={userinfo.username}
               type="text"
               type="text"
@@ -65,7 +65,7 @@ function Settings() {
           </label>
           </label>
           <label htmlFor="country">
           <label htmlFor="country">
             <input
             <input
-              placeholder="Please use Alpha-2 Country Code"
+              placeholder="Alpha-2 Country Code"
               onChange={(e) => onChange(e)}
               onChange={(e) => onChange(e)}
               value={userinfo.country.toUpperCase()}
               value={userinfo.country.toUpperCase()}
               type="text"
               type="text"
@@ -74,7 +74,7 @@ function Settings() {
           </label>
           </label>
           <label htmlFor="city">
           <label htmlFor="city">
             <input
             <input
-              placeholder="City Name (lower case)"
+              placeholder="City Name"
               onChange={(e) => onChange(e)}
               onChange={(e) => onChange(e)}
               value={userinfo.city.toLowerCase()}
               value={userinfo.city.toLowerCase()}
               type="text"
               type="text"
@@ -83,7 +83,7 @@ function Settings() {
           </label>
           </label>
           <label htmlFor="email">
           <label htmlFor="email">
             <input
             <input
-              placeholder="Change email"
+              placeholder="email"
               onChange={(e) => onChange(e)}
               onChange={(e) => onChange(e)}
               value={userinfo.email}
               value={userinfo.email}
               type="email"
               type="email"

-// components
-import Topbar from "../components/Topbar";
-import Bottombar from "../components/Bottombar";
-
-function Tweet() {
-  return (
-    <div>
-      <Topbar />
-
-      <div className="mainBox">tweet</div>
-
-      <Bottombar />
-    </div>
-  );
-}
-
-export default Tweet;

+// components
+import Tweet from "../components/Tweet";
+import Topbar from "../components/Topbar";
+import Bottombar from "../components/Bottombar";
+
+function Tweets() {
+  const posts = [
+    {
+      user: "tom",
+      text: "test post",
+      createdAt: "2022-02-11",
+    },
+    {
+      user: "jasmine",
+      text: "test post #2",
+      createdAt: "2022-03-03",
+    },
+  ];
+
+  return (
+    <div>
+      <Topbar />
+
+      <div className="mainBox">
+        <h2>Social Network</h2>
+        <br />
+        {posts.map((data, index) => (
+          <Tweet
+            key={index}
+            writer={data.user}
+            text={data.text}
+            createdAt={data.createdAt}
+          />
+        ))}
+      </div>
+
+      <Bottombar />
+    </div>
+  );
+}
+
+export default Tweets;

@@ -46,7 +46,7 @@
     text-align: right;
     text-align: right;
   }
   }
   .title {
   .title {
-    width: 60vw;
+    width: 65vw;
   }
   }
 }
 }
 .bottombar {
 .bottombar {

@@ -10,9 +10,13 @@ html {
 .container {
 .container {
   display: flex;
   display: flex;
   flex-direction: column;
   flex-direction: column;
+  justify-content: center;
 }
 }
 
 
 .mainBox {
 .mainBox {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   min-height: 82vh;
   min-height: 82vh;
   margin-top: 13vh;
   margin-top: 13vh;
   padding-left: 1rem;
   padding-left: 1rem;
@@ -51,7 +55,7 @@ html {
 }
 }
 
 
 .logoutBtn {
 .logoutBtn {
-  width: 20%;
+  width: 35%;
   border-radius: 4px;
   border-radius: 4px;
   background-color: red;
   background-color: red;
 }
 }
@@ -60,10 +64,13 @@ html {
   display: flex;
   display: flex;
   flex-direction: row;
   flex-direction: row;
   button {
   button {
-    margin-left: 0.2rem;
-    margin-right: 0.2rem;
-    padding: 0.2rem;
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+    padding: 0.3rem;
     border-radius: 6px;
     border-radius: 6px;
+    background-color: blueviolet;
+    color: white;
+    box-shadow: 4px 4px 4px 2px gray;
   }
   }
 }
 }
 
 
@@ -74,10 +81,10 @@ html {
   border-radius: 4px;
   border-radius: 4px;
 
 
   p {
   p {
-    font-size: 0.9rem;
+    font-size: 1.5rem;
   }
   }
   small {
   small {
-    font-size: 0.7rem;
+    font-size: 1rem;
   }
   }
 }
 }
 
 
@@ -85,3 +92,22 @@ hr {
   margin-top: 0.5rem;
   margin-top: 0.5rem;
   margin-bottom: 0.3rem;
   margin-bottom: 0.3rem;
 }
 }
+
+// tweets
+.tweetBox {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  width: 60%;
+  border: solid gray 2px;
+  border-radius: 4px;
+  margin-bottom: 1rem;
+  padding: 0.2rem;
+  small {
+    font-size: 1.5rem;
+    margin-top: 0.3rem;
+    b {
+      font-size: 1.6rem;
+    }
+  }
+}