Add chat

package.json

@@ -17,6 +17,7 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@heroicons/vue": "^2.1.1",
     "autoprefixer": "^10.4.16",
+    "date-fns": "^3.3.1",
     "postcss": "^8.4.33",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/components/ContentRenderer.tsx

@@ -5,11 +5,10 @@ import Links from "./Links"
 import Keys from "./Keys"
 import Spotify from "./Spotify"
 import Services from "./Services"
+import Chat from "./Chat"
 
 import { currentPage, Pages } from "./VerticalMenu"
 
-
-
 export default function ContentRenderer() {
     const [page, _] = useRecoilState(currentPage);
     return (
@@ -18,6 +17,7 @@ export default function ContentRenderer() {
             { page === Pages.Links && <Links /> }
             { page === Pages.Keys && <Keys /> }
             { page === Pages.Services && <Services /> }
+            { page === Pages.Chat && <Chat /> }
         </>
     )
 }

src/components/VerticalMenu.tsx

@@ -1,5 +1,5 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faUser, faStar} from '@fortawesome/free-regular-svg-icons'
+import { faUser, faStar, faComments } from '@fortawesome/free-regular-svg-icons'
 import { faLink, faKey } from '@fortawesome/free-solid-svg-icons'
 
 import { RecoilRoot, atom, useRecoilState } from 'recoil'
@@ -11,6 +11,7 @@ export enum Pages {
     Activities = 3,
     Spotify = 4,
     Services = 5,
+    Chat = 6,
   }
 
 export const currentPage = atom({
@@ -52,6 +53,13 @@ export default function VerticalMenu() {
                 <FontAwesomeIcon icon={faStar} />{" "}
                 <p>サービス</p>
             </li>
+            <li
+                className={`w-full px-4 py-2 rounded-lg${page === Pages.Chat ? " bg-slate-700" : ""}`}
+                onClick={() => {setPage(Pages.Chat)}}
+            >
+                <FontAwesomeIcon icon={faComments} />{" "}
+                <p>チャット</p>
+            </li>
         </ul>
       </RecoilRoot>
     )