From a69c662d799438e63436e13c87c1ed3fcfb5a014 Mon Sep 17 00:00:00 2001
From: IndieCoderMM <hthant00chk@gmail.com>
Date: Thu, 10 Aug 2023 23:02:19 +0630
Subject: [PATCH 1/7] Set up clerk

---
 package-lock.json                | 72 ++++++++++++++++++++++++++++++++
 package.json                     |  1 +
 src/app/App.tsx                  | 29 ++++++++++---
 src/common/components/Navbar.tsx |  4 +-
 src/main.tsx                     |  1 +
 src/pages/Home.tsx               |  2 +-
 src/pages/SnippetsFeed.tsx       |  4 +-
 7 files changed, 102 insertions(+), 11 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 48955c0..8e48ff2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "snippit-frontend",
       "version": "0.0.0",
       "dependencies": {
+        "@clerk/clerk-react": "^4.23.2",
         "@headlessui/react": "^1.7.15",
         "@heroicons/react": "^2.0.18",
         "@reduxjs/toolkit": "^1.9.5",
@@ -429,6 +430,56 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@clerk/clerk-react": {
+      "version": "4.23.2",
+      "resolved": "https://registry.npmjs.org/@clerk/clerk-react/-/clerk-react-4.23.2.tgz",
+      "integrity": "sha512-6MJa8ecr22qHhTfdkMMIJGctMBqj01fLJ4vmfZvr22tIkwkPXoeYJd5XcFKuSoO2dXc1eHD/F9i/HdCqGm68gw==",
+      "dependencies": {
+        "@clerk/shared": "^0.21.0",
+        "@clerk/types": "^3.49.0",
+        "tslib": "2.4.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=16"
+      }
+    },
+    "node_modules/@clerk/clerk-react/node_modules/tslib": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
+      "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
+    },
+    "node_modules/@clerk/shared": {
+      "version": "0.21.0",
+      "resolved": "https://registry.npmjs.org/@clerk/shared/-/shared-0.21.0.tgz",
+      "integrity": "sha512-tkV2OAddFMPBHDjcMbtNNrV3NQD+hGKf2hn3TKv1mRJNZ2oR5Bfk8r0bkaqwoqxX8ndkbHLCa9gwR8SWO7GGow==",
+      "dependencies": {
+        "glob-to-regexp": "0.4.1",
+        "js-cookie": "3.0.1",
+        "swr": "1.3.0"
+      },
+      "peerDependencies": {
+        "react": ">=16"
+      }
+    },
+    "node_modules/@clerk/types": {
+      "version": "3.49.0",
+      "resolved": "https://registry.npmjs.org/@clerk/types/-/types-3.49.0.tgz",
+      "integrity": "sha512-vAx5R/iYfsgIaIDMiDr6ZKQnAneAmRrUVYz6KCtPG6/hnEAnRYhwXpEUi89e5G0BFmuUfSxe/N/Anfc1PNteXQ==",
+      "dependencies": {
+        "csstype": "3.1.1"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@clerk/types/node_modules/csstype": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
+      "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
+    },
     "node_modules/@esbuild/android-arm": {
       "version": "0.18.12",
       "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.12.tgz",
@@ -2347,6 +2398,11 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/glob-to-regexp": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
+      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw=="
+    },
     "node_modules/globals": {
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
@@ -2553,6 +2609,14 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/js-cookie": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.1.tgz",
+      "integrity": "sha512-+0rgsUXZu4ncpPxRL+lNEptWMOWl9etvPHc/koSRp6MPwpRYAhmk0dUG00J4bxVV3r9uUzfo24wW0knS07SKSw==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -3647,6 +3711,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/swr": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-1.3.0.tgz",
+      "integrity": "sha512-dkghQrOl2ORX9HYrMDtPa7LTVHJjCTeZoB1dqTbnnEDlSvN8JEKpYIYurDfvbQFUUS8Cg8PceFVZNkW0KNNYPw==",
+      "peerDependencies": {
+        "react": "^16.11.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.3.tgz",
diff --git a/package.json b/package.json
index 559433d..f931040 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@clerk/clerk-react": "^4.23.2",
     "@headlessui/react": "^1.7.15",
     "@heroicons/react": "^2.0.18",
     "@reduxjs/toolkit": "^1.9.5",
diff --git a/src/app/App.tsx b/src/app/App.tsx
index 196a935..d2cf844 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -1,4 +1,5 @@
-import { Routes, Route } from 'react-router-dom';
+import { Routes, Route, useNavigate } from 'react-router-dom';
+import { ClerkProvider, SignIn, SignUp, SignedIn, SignedOut } from '@clerk/clerk-react';
 
 import Navbar from '../common/components/Navbar';
 import SnippetsFeed from '../pages/SnippetsFeed';
@@ -9,15 +10,31 @@ import Sidebar from '../common/components/Sidebar';
 import PageNotFound from '../pages/PageNotFound';
 import Bookmarks from '../pages/Bookmarks';
 import TagPage from '../pages/TagPage';
+import Home from '../pages/Home';
+
+const CLERK_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY as string;
 
 function App() {
+  const navigate = useNavigate();
   return (
-    <>
+    <ClerkProvider publishableKey={CLERK_KEY} navigate={(to) => navigate(to)}>
       <Navbar />
-      <Sidebar />
-      <main className="mt-16">
+      <main className="mt-16 min-h-screen grid place-items-center">
         <Routes>
-          <Route path="/" element={<SnippetsFeed />} />
+
+          <Route path="/" element={
+            <>
+              <SignedIn>
+                <Sidebar />
+                <SnippetsFeed />
+              </SignedIn>
+              <SignedOut>
+                <Home />
+              </SignedOut>
+            </>} />
+          <Route path="/sign-in/*" element={<SignIn routing='path' path="/sign-in" />} />
+          <Route path="/sign-up/*" element={<SignUp routing='path' path="/sign-up" />} />
+
           <Route path="/contributors" element={<Contributors />} />
           <Route path="/about" element={<About />} />
           <Route path="/contact" element={<Contact />} />
@@ -26,7 +43,7 @@ function App() {
           <Route path="/*" element={<PageNotFound />} />
         </Routes>
       </main>
-    </>
+    </ClerkProvider>
   );
 }
 
diff --git a/src/common/components/Navbar.tsx b/src/common/components/Navbar.tsx
index e935a59..d01c341 100644
--- a/src/common/components/Navbar.tsx
+++ b/src/common/components/Navbar.tsx
@@ -6,7 +6,7 @@ import {
   XMarkIcon,
 } from '@heroicons/react/24/outline';
 import { useLocation } from 'react-router-dom';
-import ProfileMenu from './ProfileMenu';
+import { UserButton } from '@clerk/clerk-react'
 
 const navigation = [
   { name: 'Home', href: '/' },
@@ -55,7 +55,7 @@ const Navbar = () => {
                   <span className="sr-only">View notifications</span>
                   <BellIcon className="h-6 w-6" aria-hidden="true" />
                 </button>
-                <ProfileMenu />
+                <UserButton />
               </div>
             </div>
           </div>
diff --git a/src/main.tsx b/src/main.tsx
index e0a0707..ec5ff4d 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 import { Provider } from 'react-redux';
+
 import App from './app/App.tsx';
 import store from './app/store.ts';
 import './index.css';
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 4925dba..7565d70 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -24,7 +24,7 @@ const Home = () => {
           </p>
           <div className="mt-10 flex items-center justify-center gap-x-6">
             <a
-              href="#"
+              href="/sign-in"
               className="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
             >
               Get started
diff --git a/src/pages/SnippetsFeed.tsx b/src/pages/SnippetsFeed.tsx
index 74a49f4..501f7ff 100644
--- a/src/pages/SnippetsFeed.tsx
+++ b/src/pages/SnippetsFeed.tsx
@@ -17,7 +17,7 @@ const SnippetsFeed = () => {
 
   if (snippets.status === Status.Loading) {
     return (
-      <div className="grid min-h-screen place-items-center bg-white px-6 py-24 sm:py-32 lg:px-8">
+      <div className="w-full grid min-h-screen place-items-center bg-white px-6 py-24 sm:py-32 lg:px-8">
         <Loading
           title="Fetching data from API"
           message="Please be patient. Sometimes it only takes ETERNITY! 😉"
@@ -28,7 +28,7 @@ const SnippetsFeed = () => {
 
   if (snippets.status === Status.Error) {
     return (
-      <div className="flex min-h-screen flex-col gap-5 bg-white py-10 text-center">
+      <div className="w-full flex min-h-screen flex-col gap-5 bg-white py-10 text-center">
         <h2 className="text-2xl font-semibold">Oops! Something went wrong😯</h2>
         <p className="text-lg font-medium text-rose-500">{snippets.error}</p>
       </div>

From 456684916c57ce578d6bd49035da68b9fe718b5d Mon Sep 17 00:00:00 2001
From: IndieCoderMM <hthant00chk@gmail.com>
Date: Wed, 6 Sep 2023 10:08:44 +0630
Subject: [PATCH 2/7] Improve project structure

---
 package-lock.json                             | 169 +++++++-----------
 package.json                                  |   7 +-
 src/app/App.tsx                               |  52 +++---
 src/app/Providers.tsx                         |  20 +++
 src/{common => }/components/Footer.tsx        |   0
 .../components/Loading.module.css             |   0
 src/{common => }/components/Loading.tsx       |   0
 src/{common => }/components/Navbar.tsx        |   8 +-
 src/{common => }/components/ProfileMenu.tsx   |   0
 src/{common => }/components/Sidebar.tsx       |   4 +-
 src/{common => }/constants/index.ts           |   0
 src/{common => }/constants/sample.ts          |   2 +-
 src/features/snippets/SnippetCard.tsx         |   8 +-
 src/features/snippets/snippetsSlice.ts        |   4 +-
 src/features/tags/TagsDropDown.tsx            |   2 +-
 src/features/tags/tagsSlice.ts                |   4 +-
 src/index.css                                 |  49 -----
 src/{common/utils => lib}/formatDate.ts       |   0
 src/main.tsx                                  |   8 +-
 src/pages/Bookmarks.tsx                       |   4 +-
 src/pages/SnippetsFeed.tsx                    |   8 +-
 src/{common => }/services/index.ts            |   0
 src/styles/globals.css                        | 152 ++++++++++++++++
 tailwind.config.js                            |  38 ++--
 tsconfig.json                                 |  29 ++-
 vite.config.ts                                |   6 +
 26 files changed, 352 insertions(+), 222 deletions(-)
 create mode 100644 src/app/Providers.tsx
 rename src/{common => }/components/Footer.tsx (100%)
 rename src/{common => }/components/Loading.module.css (100%)
 rename src/{common => }/components/Loading.tsx (100%)
 rename src/{common => }/components/Navbar.tsx (92%)
 rename src/{common => }/components/ProfileMenu.tsx (100%)
 rename src/{common => }/components/Sidebar.tsx (91%)
 rename src/{common => }/constants/index.ts (100%)
 rename src/{common => }/constants/sample.ts (98%)
 delete mode 100644 src/index.css
 rename src/{common/utils => lib}/formatDate.ts (100%)
 rename src/{common => }/services/index.ts (100%)
 create mode 100644 src/styles/globals.css

diff --git a/package-lock.json b/package-lock.json
index 8e48ff2..e4edde9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,13 +14,18 @@
         "@reduxjs/toolkit": "^1.9.5",
         "axios": "^1.4.0",
         "babel-plugin-prismjs": "^2.1.0",
+        "class-variance-authority": "^0.7.0",
+        "clsx": "^2.0.0",
         "prismjs": "^1.29.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-redux": "^8.1.1",
-        "react-router-dom": "^6.14.1"
+        "react-router-dom": "^6.14.1",
+        "tailwind-merge": "^1.14.0",
+        "tailwindcss-animate": "^1.0.7"
       },
       "devDependencies": {
+        "@types/node": "^20.5.9",
         "@types/prismjs": "^1.26.0",
         "@types/react": "^18.2.14",
         "@types/react-dom": "^18.2.6",
@@ -51,7 +56,6 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
       "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
-      "dev": true,
       "engines": {
         "node": ">=10"
       },
@@ -963,7 +967,6 @@
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
       "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/set-array": "^1.0.1",
         "@jridgewell/sourcemap-codec": "^1.4.10",
@@ -977,7 +980,6 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
       "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==",
-      "dev": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -986,7 +988,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
       "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
-      "dev": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -994,14 +995,12 @@
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.4.15",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
-      "dev": true
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.18",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.18.tgz",
       "integrity": "sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/resolve-uri": "3.1.0",
         "@jridgewell/sourcemap-codec": "1.4.14"
@@ -1010,14 +1009,12 @@
     "node_modules/@jridgewell/trace-mapping/node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.4.14",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
-      "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
-      "dev": true
+      "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw=="
     },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
       "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "2.0.5",
         "run-parallel": "^1.1.9"
@@ -1030,7 +1027,6 @@
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
       "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "dev": true,
       "engines": {
         "node": ">= 8"
       }
@@ -1039,7 +1035,6 @@
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
       "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-      "dev": true,
       "dependencies": {
         "@nodelib/fs.scandir": "2.1.5",
         "fastq": "^1.6.0"
@@ -1094,6 +1089,12 @@
       "integrity": "sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==",
       "dev": true
     },
+    "node_modules/@types/node": {
+      "version": "20.5.9",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.9.tgz",
+      "integrity": "sha512-PcGNd//40kHAS3sTlzKB9C9XL4K0sTup8nbG5lC14kzEteTNuAFh9u5nA0o5TWnSG2r/JNPRXFVcHJIIeRlmqQ==",
+      "dev": true
+    },
     "node_modules/@types/prismjs": {
       "version": "1.26.0",
       "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.0.tgz",
@@ -1407,14 +1408,12 @@
     "node_modules/any-promise": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
-      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
-      "dev": true
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A=="
     },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
       "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "dev": true,
       "dependencies": {
         "normalize-path": "^3.0.0",
         "picomatch": "^2.0.4"
@@ -1426,8 +1425,7 @@
     "node_modules/arg": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
-      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
-      "dev": true
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="
     },
     "node_modules/argparse": {
       "version": "2.0.1",
@@ -1503,14 +1501,12 @@
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
     "node_modules/binary-extensions": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
       "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -1519,7 +1515,6 @@
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
       "dependencies": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -1529,7 +1524,6 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
       "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-      "dev": true,
       "dependencies": {
         "fill-range": "^7.0.1"
       },
@@ -1582,7 +1576,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
       "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -1625,7 +1618,6 @@
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
       "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
-      "dev": true,
       "funding": [
         {
           "type": "individual",
@@ -1652,7 +1644,6 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.1"
       },
@@ -1660,11 +1651,30 @@
         "node": ">= 6"
       }
     },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.0.tgz",
+      "integrity": "sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==",
+      "dependencies": {
+        "clsx": "2.0.0"
+      },
+      "funding": {
+        "url": "https://joebell.co.uk"
+      }
+    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
     },
+    "node_modules/clsx": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
+      "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -1695,7 +1705,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
       "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -1703,8 +1712,7 @@
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
-      "dev": true
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
     },
     "node_modules/convert-source-map": {
       "version": "1.9.0",
@@ -1730,7 +1738,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-      "dev": true,
       "bin": {
         "cssesc": "bin/cssesc"
       },
@@ -1777,8 +1784,7 @@
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
-      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
-      "dev": true
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="
     },
     "node_modules/dir-glob": {
       "version": "3.0.1",
@@ -1795,8 +1801,7 @@
     "node_modules/dlv": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
-      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
-      "dev": true
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
     },
     "node_modules/doctrine": {
       "version": "3.0.0",
@@ -2182,7 +2187,6 @@
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.0.tgz",
       "integrity": "sha512-ChDuvbOypPuNjO8yIDf36x7BlZX1smcUMTTcyoIjycexOxd6DFsKsg21qVBzEmr3G7fUKIRy2/psii+CIUt7FA==",
-      "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
@@ -2198,7 +2202,6 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.1"
       },
@@ -2222,7 +2225,6 @@
       "version": "1.15.0",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz",
       "integrity": "sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==",
-      "dev": true,
       "dependencies": {
         "reusify": "^1.0.4"
       }
@@ -2243,7 +2245,6 @@
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
       "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-      "dev": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -2334,14 +2335,12 @@
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
-      "dev": true
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
     },
     "node_modules/fsevents": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "dev": true,
       "hasInstallScript": true,
       "optional": true,
       "os": [
@@ -2354,8 +2353,7 @@
     "node_modules/function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
-      "dev": true
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
     },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
@@ -2390,7 +2388,6 @@
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
       "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
-      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.3"
       },
@@ -2442,7 +2439,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
       "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
-      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.1"
       },
@@ -2519,7 +2515,6 @@
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
       "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
-      "dev": true,
       "dependencies": {
         "once": "^1.3.0",
         "wrappy": "1"
@@ -2528,14 +2523,12 @@
     "node_modules/inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
       "dependencies": {
         "binary-extensions": "^2.0.0"
       },
@@ -2547,7 +2540,6 @@
       "version": "2.12.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.12.1.tgz",
       "integrity": "sha512-Q4ZuBAe2FUsKtyQJoQHlvP8OvBERxO3jEmy1I7hcRXcJBGGHFh/aJBswbXuS9sgrDH2QUO8ilkwNPHvHMd8clg==",
-      "dev": true,
       "dependencies": {
         "has": "^1.0.3"
       },
@@ -2559,7 +2551,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -2568,7 +2559,6 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
       "dependencies": {
         "is-extglob": "^2.1.1"
       },
@@ -2580,7 +2570,6 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
       "engines": {
         "node": ">=0.12.0"
       }
@@ -2604,7 +2593,6 @@
       "version": "1.19.1",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.19.1.tgz",
       "integrity": "sha512-oVhqoRDaBXf7sjkll95LHVS6Myyyb1zaunVwk4Z0+WPSW4gjS0pl01zYKHScTuyEhQsFxV5L4DR5r+YqSyqyyg==",
-      "dev": true,
       "bin": {
         "jiti": "bin/jiti.js"
       }
@@ -2687,7 +2675,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
       "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
-      "dev": true,
       "engines": {
         "node": ">=10"
       }
@@ -2695,8 +2682,7 @@
     "node_modules/lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-      "dev": true
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
     "node_modules/locate-path": {
       "version": "6.0.0",
@@ -2743,7 +2729,6 @@
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
       "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "dev": true,
       "engines": {
         "node": ">= 8"
       }
@@ -2752,7 +2737,6 @@
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
       "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
-      "dev": true,
       "dependencies": {
         "braces": "^3.0.2",
         "picomatch": "^2.3.1"
@@ -2784,7 +2768,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
       "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dev": true,
       "dependencies": {
         "brace-expansion": "^1.1.7"
       },
@@ -2802,7 +2785,6 @@
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
       "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
-      "dev": true,
       "dependencies": {
         "any-promise": "^1.0.0",
         "object-assign": "^4.0.1",
@@ -2813,7 +2795,6 @@
       "version": "3.3.6",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
       "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -2849,7 +2830,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -2867,7 +2847,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -2876,7 +2855,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
       "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -2885,7 +2863,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
       "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-      "dev": true,
       "dependencies": {
         "wrappy": "1"
       }
@@ -2962,7 +2939,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
       "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -2979,8 +2955,7 @@
     "node_modules/path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "dev": true
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
     },
     "node_modules/path-type": {
       "version": "4.0.0",
@@ -2994,14 +2969,12 @@
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
-      "dev": true
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
       "engines": {
         "node": ">=8.6"
       },
@@ -3013,7 +2986,6 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
       "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3022,7 +2994,6 @@
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
       "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -3031,7 +3002,6 @@
       "version": "8.4.26",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.26.tgz",
       "integrity": "sha512-jrXHFF8iTloAenySjM/ob3gSj7pCu0Ji49hnjqzsgSRa50hkWCKD0HQ+gMNJkW38jBI68MpAAg7ZWwHwX8NMMw==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -3059,7 +3029,6 @@
       "version": "15.1.0",
       "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
       "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
-      "dev": true,
       "dependencies": {
         "postcss-value-parser": "^4.0.0",
         "read-cache": "^1.0.0",
@@ -3076,7 +3045,6 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
       "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
-      "dev": true,
       "dependencies": {
         "camelcase-css": "^2.0.1"
       },
@@ -3095,7 +3063,6 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.1.tgz",
       "integrity": "sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==",
-      "dev": true,
       "dependencies": {
         "lilconfig": "^2.0.5",
         "yaml": "^2.1.1"
@@ -3124,7 +3091,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
       "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
-      "dev": true,
       "dependencies": {
         "postcss-selector-parser": "^6.0.11"
       },
@@ -3143,7 +3109,6 @@
       "version": "6.0.13",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz",
       "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==",
-      "dev": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -3155,8 +3120,7 @@
     "node_modules/postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-      "dev": true
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
     },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
@@ -3283,7 +3247,6 @@
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -3408,7 +3371,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
       "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
-      "dev": true,
       "dependencies": {
         "pify": "^2.3.0"
       }
@@ -3417,7 +3379,6 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
       "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
       "dependencies": {
         "picomatch": "^2.2.1"
       },
@@ -3455,7 +3416,6 @@
       "version": "1.22.2",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz",
       "integrity": "sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==",
-      "dev": true,
       "dependencies": {
         "is-core-module": "^2.11.0",
         "path-parse": "^1.0.7",
@@ -3481,7 +3441,6 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
-      "dev": true,
       "engines": {
         "iojs": ">=1.0.0",
         "node": ">=0.10.0"
@@ -3522,7 +3481,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
       "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -3616,7 +3574,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
       "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3649,7 +3606,6 @@
       "version": "3.32.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.32.0.tgz",
       "integrity": "sha512-ydQOU34rpSyj2TGyz4D2p8rbktIOZ8QY9s+DGLvFU1i5pWJE8vkpruCjGCMHsdXwnD7JDcS+noSwM/a7zyNFDQ==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.2",
         "commander": "^4.0.0",
@@ -3671,7 +3627,6 @@
       "version": "7.1.6",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
       "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
-      "dev": true,
       "dependencies": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
@@ -3703,7 +3658,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -3719,11 +3673,19 @@
         "react": "^16.11.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/tailwind-merge": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-1.14.0.tgz",
+      "integrity": "sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.3.tgz",
       "integrity": "sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==",
-      "dev": true,
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
@@ -3756,6 +3718,14 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/tailwindcss-animate": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz",
+      "integrity": "sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==",
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders"
+      }
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -3766,7 +3736,6 @@
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
       "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
-      "dev": true,
       "dependencies": {
         "any-promise": "^1.0.0"
       }
@@ -3775,7 +3744,6 @@
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
       "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
-      "dev": true,
       "dependencies": {
         "thenify": ">= 3.1.0 < 4"
       },
@@ -3796,7 +3764,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
       "dependencies": {
         "is-number": "^7.0.0"
       },
@@ -3807,8 +3774,7 @@
     "node_modules/ts-interface-checker": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
-      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
-      "dev": true
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
     },
     "node_modules/tslib": {
       "version": "1.14.1",
@@ -3918,8 +3884,7 @@
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "dev": true
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
     "node_modules/vite": {
       "version": "4.4.4",
@@ -3994,8 +3959,7 @@
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
-      "dev": true
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
     },
     "node_modules/yallist": {
       "version": "3.1.1",
@@ -4007,7 +3971,6 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.1.tgz",
       "integrity": "sha512-2eHWfjaoXgTBC2jNM1LRef62VQa0umtvRiDSk6HSzW7RvS5YtkabJrwYLLEKWBc8a5U2PTSCs+dJjUTJdlHsWQ==",
-      "dev": true,
       "engines": {
         "node": ">= 14"
       }
diff --git a/package.json b/package.json
index f931040..87eb5f6 100644
--- a/package.json
+++ b/package.json
@@ -16,13 +16,18 @@
     "@reduxjs/toolkit": "^1.9.5",
     "axios": "^1.4.0",
     "babel-plugin-prismjs": "^2.1.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.0.0",
     "prismjs": "^1.29.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^8.1.1",
-    "react-router-dom": "^6.14.1"
+    "react-router-dom": "^6.14.1",
+    "tailwind-merge": "^1.14.0",
+    "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
+    "@types/node": "^20.5.9",
     "@types/prismjs": "^1.26.0",
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",
diff --git a/src/app/App.tsx b/src/app/App.tsx
index d2cf844..8902a61 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -1,39 +1,47 @@
-import { Routes, Route, useNavigate } from 'react-router-dom';
-import { ClerkProvider, SignIn, SignUp, SignedIn, SignedOut } from '@clerk/clerk-react';
+import { Routes, Route } from 'react-router-dom';
+import { SignIn, SignUp, SignedIn, SignedOut } from '@clerk/clerk-react';
 
-import Navbar from '../common/components/Navbar';
+import Navbar from '../components/Navbar';
 import SnippetsFeed from '../pages/SnippetsFeed';
 import Contributors from '../pages/Contributors';
 import About from '../pages/About';
 import Contact from '../pages/Contact';
-import Sidebar from '../common/components/Sidebar';
+import Sidebar from '../components/Sidebar';
 import PageNotFound from '../pages/PageNotFound';
 import Bookmarks from '../pages/Bookmarks';
 import TagPage from '../pages/TagPage';
 import Home from '../pages/Home';
 
-const CLERK_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY as string;
+import Providers from './Providers';
 
 function App() {
-  const navigate = useNavigate();
   return (
-    <ClerkProvider publishableKey={CLERK_KEY} navigate={(to) => navigate(to)}>
+    <Providers>
       <Navbar />
-      <main className="mt-16 min-h-screen grid place-items-center">
+      <main className="mt-16 grid min-h-screen place-items-center">
         <Routes>
-
-          <Route path="/" element={
-            <>
-              <SignedIn>
-                <Sidebar />
-                <SnippetsFeed />
-              </SignedIn>
-              <SignedOut>
-                <Home />
-              </SignedOut>
-            </>} />
-          <Route path="/sign-in/*" element={<SignIn routing='path' path="/sign-in" />} />
-          <Route path="/sign-up/*" element={<SignUp routing='path' path="/sign-up" />} />
+          <Route
+            path="/"
+            element={
+              <>
+                <SignedIn>
+                  <Sidebar />
+                  <SnippetsFeed />
+                </SignedIn>
+                <SignedOut>
+                  <Home />
+                </SignedOut>
+              </>
+            }
+          />
+          <Route
+            path="/sign-in/*"
+            element={<SignIn routing="path" path="/sign-in" />}
+          />
+          <Route
+            path="/sign-up/*"
+            element={<SignUp routing="path" path="/sign-up" />}
+          />
 
           <Route path="/contributors" element={<Contributors />} />
           <Route path="/about" element={<About />} />
@@ -43,7 +51,7 @@ function App() {
           <Route path="/*" element={<PageNotFound />} />
         </Routes>
       </main>
-    </ClerkProvider>
+    </Providers>
   );
 }
 
diff --git a/src/app/Providers.tsx b/src/app/Providers.tsx
new file mode 100644
index 0000000..5152184
--- /dev/null
+++ b/src/app/Providers.tsx
@@ -0,0 +1,20 @@
+import { Provider } from 'react-redux';
+import store from './store';
+import { ClerkProvider } from '@clerk/clerk-react';
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+const CLERK_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY as string;
+
+const Providers = ({ children }: { children: React.ReactNode }) => {
+  const navigate = useNavigate();
+  return (
+    <Provider store={store}>
+      <ClerkProvider publishableKey={CLERK_KEY} navigate={(to) => navigate(to)}>
+        {children}
+      </ClerkProvider>
+    </Provider>
+  );
+};
+
+export default Providers;
diff --git a/src/common/components/Footer.tsx b/src/components/Footer.tsx
similarity index 100%
rename from src/common/components/Footer.tsx
rename to src/components/Footer.tsx
diff --git a/src/common/components/Loading.module.css b/src/components/Loading.module.css
similarity index 100%
rename from src/common/components/Loading.module.css
rename to src/components/Loading.module.css
diff --git a/src/common/components/Loading.tsx b/src/components/Loading.tsx
similarity index 100%
rename from src/common/components/Loading.tsx
rename to src/components/Loading.tsx
diff --git a/src/common/components/Navbar.tsx b/src/components/Navbar.tsx
similarity index 92%
rename from src/common/components/Navbar.tsx
rename to src/components/Navbar.tsx
index d01c341..cf34a74 100644
--- a/src/common/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -6,7 +6,7 @@ import {
   XMarkIcon,
 } from '@heroicons/react/24/outline';
 import { useLocation } from 'react-router-dom';
-import { UserButton } from '@clerk/clerk-react'
+import { UserButton } from '@clerk/clerk-react';
 
 const navigation = [
   { name: 'Home', href: '/' },
@@ -31,7 +31,7 @@ const Navbar = () => {
     >
       {({ open }) => (
         <>
-          <div className="px-2 sm:px-6 lg:px-8">
+          <div className="xPadding">
             <div className="relative flex h-16 items-center justify-between">
               <div className="flex items-center">
                 <Disclosure.Button className="inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white lg:hidden">
@@ -42,7 +42,7 @@ const Navbar = () => {
                     <Bars3Icon className="block h-6 w-6" aria-hidden="true" />
                   )}
                 </Disclosure.Button>
-                <div className="flex flex-shrink-0 items-center text-primary-color">
+                <div className="text-primary-color flex flex-shrink-0 items-center">
                   <CodeBracketIcon className="h-10 w-10 " />
                   <h1 className="text-2xl font-bold">Snippit</h1>
                 </div>
@@ -71,7 +71,7 @@ const Navbar = () => {
                     classes: [
                       isActive(item.href)
                         ? 'bg-accent-color text-white'
-                        : 'text-gray-500 hover:bg-secondary-color hover:text-white',
+                        : 'hover:bg-secondary-color text-gray-500 hover:text-white',
                       'block rounded-md px-3 py-2 text-base font-medium',
                     ],
                   })}
diff --git a/src/common/components/ProfileMenu.tsx b/src/components/ProfileMenu.tsx
similarity index 100%
rename from src/common/components/ProfileMenu.tsx
rename to src/components/ProfileMenu.tsx
diff --git a/src/common/components/Sidebar.tsx b/src/components/Sidebar.tsx
similarity index 91%
rename from src/common/components/Sidebar.tsx
rename to src/components/Sidebar.tsx
index 3e51d8c..282d62c 100644
--- a/src/common/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -8,7 +8,7 @@ import {
   DocumentIcon,
 } from '@heroicons/react/24/solid';
 import { NavLink } from 'react-router-dom';
-import TagsDropDown from '../../features/tags/TagsDropDown';
+import TagsDropDown from '../features/tags/TagsDropDown';
 
 const Sidebar = () => {
   return (
@@ -28,7 +28,7 @@ const Sidebar = () => {
             <NavLink to="/inbox" className="sideMenuItem">
               <InboxIcon className="h-6 w-6" />
               <span className="ml-3 flex-1 whitespace-nowrap">Inbox</span>
-              <span className="ml-3 inline-flex h-3 w-3 items-center justify-center rounded-full bg-secondary-color p-3 text-sm font-medium text-primary-color">
+              <span className="bg-secondary-color text-primary-color ml-3 inline-flex h-3 w-3 items-center justify-center rounded-full p-3 text-sm font-medium">
                 3
               </span>
             </NavLink>
diff --git a/src/common/constants/index.ts b/src/constants/index.ts
similarity index 100%
rename from src/common/constants/index.ts
rename to src/constants/index.ts
diff --git a/src/common/constants/sample.ts b/src/constants/sample.ts
similarity index 98%
rename from src/common/constants/sample.ts
rename to src/constants/sample.ts
index a0182eb..0dbc793 100644
--- a/src/common/constants/sample.ts
+++ b/src/constants/sample.ts
@@ -1,4 +1,4 @@
-import { Snippet, User } from '../../app/common.types';
+import { Snippet, User } from '../app/common.types';
 
 export const currentUser: User = {
   id: 201,
diff --git a/src/features/snippets/SnippetCard.tsx b/src/features/snippets/SnippetCard.tsx
index 2e1bd1a..f2fbf6e 100644
--- a/src/features/snippets/SnippetCard.tsx
+++ b/src/features/snippets/SnippetCard.tsx
@@ -8,9 +8,9 @@ import {
   StarIcon as FilledStarIcon,
   BookmarkIcon as FilledBookmarkIcon,
 } from '@heroicons/react/24/solid';
-import { currentUser } from '../../common/constants/sample';
+import { currentUser } from '../../constants/sample';
 import { Snippet } from '../../app/common.types';
-import { formatDate } from '../../common/utils/formatDate';
+import { formatDate } from '../../lib/formatDate';
 import Prism from 'prismjs';
 import { useEffect } from 'react';
 
@@ -43,7 +43,7 @@ const SnippetCard = (props: Snippet) => {
       <div>
         <p>{props.description}</p>
       </div>
-      <div className="flexStart gap-2 text-accent-color">
+      <div className="flexStart text-accent-color gap-2">
         {props.tags?.map((tag) => (
           <span key={tag.id}>#{tag.name}</span>
         ))}
@@ -79,7 +79,7 @@ const SnippetCard = (props: Snippet) => {
           className="flexCenter rounded-lg bg-gray-100 p-3 text-gray-500 transition hover:shadow-md hover:ring-1"
         >
           {bookmarked ? (
-            <FilledBookmarkIcon className="h-6 w-6 text-accent-color" />
+            <FilledBookmarkIcon className="text-accent-color h-6 w-6" />
           ) : (
             <BookmarkIcon className="h-6 w-6" />
           )}
diff --git a/src/features/snippets/snippetsSlice.ts b/src/features/snippets/snippetsSlice.ts
index daea182..3676811 100644
--- a/src/features/snippets/snippetsSlice.ts
+++ b/src/features/snippets/snippetsSlice.ts
@@ -1,6 +1,6 @@
 import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
-import ApiService from '../../common/services';
-import { Status } from '../../common/constants';
+import ApiService from '../../services';
+import { Status } from '../../constants';
 import { Snippet } from '../../app/common.types';
 
 interface SnippetState {
diff --git a/src/features/tags/TagsDropDown.tsx b/src/features/tags/TagsDropDown.tsx
index 667856f..433444a 100644
--- a/src/features/tags/TagsDropDown.tsx
+++ b/src/features/tags/TagsDropDown.tsx
@@ -2,7 +2,7 @@ import { Disclosure } from '@headlessui/react';
 import { ChevronDownIcon, TagIcon } from '@heroicons/react/24/solid';
 import { useAppDispatch, useAppSelector } from '../../app/hooks';
 import { useEffect } from 'react';
-import { Status } from '../../common/constants';
+import { Status } from '../../constants';
 import { getAllTags } from './tagsSlice';
 import { Link } from 'react-router-dom';
 
diff --git a/src/features/tags/tagsSlice.ts b/src/features/tags/tagsSlice.ts
index fc28e17..09b6104 100644
--- a/src/features/tags/tagsSlice.ts
+++ b/src/features/tags/tagsSlice.ts
@@ -1,6 +1,6 @@
 import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
-import ApiService from '../../common/services';
-import { Status } from '../../common/constants';
+import ApiService from '../../services';
+import { Status } from '../../constants';
 import { Tag } from '../../app/common.types';
 
 interface TagState {
diff --git a/src/index.css b/src/index.css
deleted file mode 100644
index 990d226..0000000
--- a/src/index.css
+++ /dev/null
@@ -1,49 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-body {
-  font-family: 'Open Sans', sans-serif;
-  height: 100%;
-  background-color: #eaf3f5;
-}
-
-.flexCenter {
-  @apply flex items-center justify-center;
-}
-
-.flexBetween {
-  @apply flex items-center justify-between;
-}
-
-.flexStart {
-  @apply flex items-center justify-start;
-}
-
-::-webkit-scrollbar {
-  width: 5px;
-  height: 4px;
-}
-
-::-webkit-scrollbar-thumb {
-  background: #888;
-  border-radius: 12px;
-}
-
-.sideMenuItem {
-  @apply flex items-center rounded-lg p-2 text-gray-500 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700;
-}
-
-.sideMenuItem.active {
-  @apply bg-accent-color text-white;
-}
-
-.sideDropItem {
-  @apply flex w-full items-center rounded-lg p-2 pl-11 text-accent-color transition duration-75 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700;
-}
diff --git a/src/common/utils/formatDate.ts b/src/lib/formatDate.ts
similarity index 100%
rename from src/common/utils/formatDate.ts
rename to src/lib/formatDate.ts
diff --git a/src/main.tsx b/src/main.tsx
index ec5ff4d..0803cee 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,18 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
-import { Provider } from 'react-redux';
 
 import App from './app/App.tsx';
-import store from './app/store.ts';
-import './index.css';
+import './styles/globals.css';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <BrowserRouter>
-      <Provider store={store}>
-        <App />
-      </Provider>
+      <App />
     </BrowserRouter>
   </React.StrictMode>,
 );
diff --git a/src/pages/Bookmarks.tsx b/src/pages/Bookmarks.tsx
index 0312d4c..b4d7c28 100644
--- a/src/pages/Bookmarks.tsx
+++ b/src/pages/Bookmarks.tsx
@@ -1,8 +1,8 @@
 import { useEffect } from 'react';
 import { useAppDispatch, useAppSelector } from '../app/hooks';
-import { Status } from '../common/constants';
+import { Status } from '../constants';
 import { getAllSnippets } from '../features/snippets/snippetsSlice';
-import { currentUser } from '../common/constants/sample';
+import { currentUser } from '../constants/sample';
 import SnippetList from '../features/snippets/SnippetList';
 
 const Bookmarks = () => {
diff --git a/src/pages/SnippetsFeed.tsx b/src/pages/SnippetsFeed.tsx
index 501f7ff..60597a0 100644
--- a/src/pages/SnippetsFeed.tsx
+++ b/src/pages/SnippetsFeed.tsx
@@ -1,9 +1,9 @@
 import { useAppDispatch, useAppSelector } from '../app/hooks';
 import { useEffect } from 'react';
-import { Status } from '../common/constants';
+import { Status } from '../constants';
 import { getAllSnippets } from '../features/snippets/snippetsSlice';
 import SnippetList from '../features/snippets/SnippetList';
-import Loading from '../common/components/Loading';
+import Loading from '../components/Loading';
 
 const SnippetsFeed = () => {
   const snippets = useAppSelector((state) => state.snippets);
@@ -17,7 +17,7 @@ const SnippetsFeed = () => {
 
   if (snippets.status === Status.Loading) {
     return (
-      <div className="w-full grid min-h-screen place-items-center bg-white px-6 py-24 sm:py-32 lg:px-8">
+      <div className="grid min-h-screen w-full place-items-center bg-white px-6 py-24 sm:py-32 lg:px-8">
         <Loading
           title="Fetching data from API"
           message="Please be patient. Sometimes it only takes ETERNITY! 😉"
@@ -28,7 +28,7 @@ const SnippetsFeed = () => {
 
   if (snippets.status === Status.Error) {
     return (
-      <div className="w-full flex min-h-screen flex-col gap-5 bg-white py-10 text-center">
+      <div className="flex min-h-screen w-full flex-col gap-5 bg-white py-10 text-center">
         <h2 className="text-2xl font-semibold">Oops! Something went wrong😯</h2>
         <p className="text-lg font-medium text-rose-500">{snippets.error}</p>
       </div>
diff --git a/src/common/services/index.ts b/src/services/index.ts
similarity index 100%
rename from src/common/services/index.ts
rename to src/services/index.ts
diff --git a/src/styles/globals.css b/src/styles/globals.css
new file mode 100644
index 0000000..b25f9f8
--- /dev/null
+++ b/src/styles/globals.css
@@ -0,0 +1,152 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+
+    --blue-500: 210 40% 96.1%;
+    --blue-500-foreground: 222.2 47.4% 11.2%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+
+    --blue-500: 217.2 32.6% 17.5%;
+    --blue-500-foreground: 210 40% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+@layer components {
+  .maxContainer {
+    width: 100%;
+    max-width: 1440px;
+    margin: 0 auto;
+  }
+}
+
+@layer utilities {
+  .padding {
+    @apply px-8 py-12 sm:px-16 sm:py-24;
+  }
+
+  .xPadding {
+    @apply px-8 sm:px-16;
+  }
+
+  .yPadding {
+    @apply py-12 sm:py-24;
+  }
+
+  .lPadding {
+    @apply pl-8 sm:pl-16;
+  }
+
+  .rPadding {
+    @apply pr-8 sm:pr-16;
+  }
+
+  .tPadding {
+    @apply pt-12 sm:pt-24;
+  }
+
+  .bPadding {
+    @apply pb-12 sm:pb-24;
+  }
+
+  .innerWidth {
+    @apply w-[100%] lg:w-[80%];
+  }
+
+  .flexCenter {
+    @apply flex items-center justify-center;
+  }
+
+  .flexBetween {
+    @apply flex items-center justify-between;
+  }
+
+  .flexStart {
+    @apply flex items-center justify-start;
+  }
+}
+
+::-webkit-scrollbar {
+  width: 5px;
+  height: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #888;
+  border-radius: 12px;
+}
+
+.sideMenuItem {
+  @apply flex items-center rounded-lg p-2 text-gray-500 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700;
+}
+
+.sideMenuItem.active {
+  @apply bg-primary text-white;
+}
+
+.sideDropItem {
+  @apply flex w-full items-center rounded-lg p-2 pl-11 text-primary transition duration-75 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700;
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 2636a63..4ff1e28 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,20 +1,34 @@
 /** @type {import('tailwindcss').Config} */
-const defaultTheme = require('tailwindcss/defaultTheme');
-
-export default {
-  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+module.exports = {
+  darkMode: ['class'],
+  content: [
+    './pages/**/*.{ts,tsx}',
+    './components/**/*.{ts,tsx}',
+    './app/**/*.{ts,tsx}',
+    './src/**/*.{ts,tsx}',
+  ],
   theme: {
-    extend: {
-      fontFamily: {
-        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
+    container: {
+      center: true,
+      padding: '2rem',
+      screens: {
+        '2xl': '1400px',
       },
+    },
+    extend: {
       colors: {
-        'primary-color': '#d42b63',
-        'secondary-color': '#f2c0d0',
-        'accent-color': '#be275a',
+        border: '#ECEFF1',
+        input: '#E0E0E0',
+        ring: '#2196F3',
+        background: '#FFFFFF',
+        foreground: '#333333',
+        primary: '#2196F3',
+        secondary: '#00C853',
+        destructive: '#FF5722',
+        muted: '#B0BEC5',
+        accent: '#FFC107',
       },
     },
   },
-  plugins: [],
-  darkMode: 'class',
+  plugins: [require('tailwindcss-animate')],
 };
diff --git a/tsconfig.json b/tsconfig.json
index a7fc6fb..ac9e4c4 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,10 +2,13 @@
   "compilerOptions": {
     "target": "ES2020",
     "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
     "module": "ESNext",
     "skipLibCheck": true,
-
     /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
@@ -13,13 +16,25 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
-
     /* Linting */
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    /* Resolving */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    }
   },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
-}
+  "include": [
+    "src"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
index a1d8d11..335db37 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,5 +1,6 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import path from 'path';
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -10,4 +11,9 @@ export default defineConfig({
       },
     }),
   ],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
 });

From d59899eb4d8dddbcdbcd125be4f5dc0a2ae6a5d5 Mon Sep 17 00:00:00 2001
From: IndieCoderMM <hthant00chk@gmail.com>
Date: Wed, 6 Sep 2023 12:41:40 +0630
Subject: [PATCH 3/7] Create snippet form

---
 README.md                                     |  18 +--
 src/app/App.tsx                               |   2 +
 src/components/Loading.tsx                    |   2 +-
 src/components/Modal.tsx                      |  47 +++++++
 src/components/Navbar.tsx                     |  12 +-
 src/components/SelectBox.tsx                  |  96 ++++++++++++++
 src/constants/index.ts                        |  14 +++
 src/features/snippets/SnippetForm.tsx         | 118 ++++++++++++++++++
 src/pages/CreateSnippet.tsx                   |  22 ++++
 src/{components => styles}/Loading.module.css |   0
 src/styles/globals.css                        |  67 +---------
 tailwind.config.js                            |   2 +-
 12 files changed, 325 insertions(+), 75 deletions(-)
 create mode 100644 src/components/Modal.tsx
 create mode 100644 src/components/SelectBox.tsx
 create mode 100644 src/features/snippets/SnippetForm.tsx
 create mode 100644 src/pages/CreateSnippet.tsx
 rename src/{components => styles}/Loading.module.css (100%)

diff --git a/README.md b/README.md
index 54e77e2..be43563 100644
--- a/README.md
+++ b/README.md
@@ -101,12 +101,14 @@ This is an overview of the `./src` directory.
 .
 ├── app/
 │   ├── App.tsx
+│   ├── Providers.tsx
 │   └── store.ts
 ├── assets
-├── common/
-│   ├── components
-│   ├── services
-│   └── constants
+├── components
+│   ├── Navbar.tsx
+│   └── Footer.tsx
+├── services
+├── constants
 ├── features/
 │   ├── snippets/
 │   │   ├── SnippetCard.tsx
@@ -115,14 +117,14 @@ This is an overview of the `./src` directory.
 ├── pages/
 │   ├── Home.tsx
 │   └── About.tsx
-├── index.css
+├── styles/
+│   └── global.css
 └── main.tsx
 ```
 
 - `app/`: App-wide setup and layout
-- `common/`: Shared code and resources
-  - `components/`: Reusable components across different pages
-  - `services/`: Interacting with the backend API
+- `components/`: Reusable components across different pages
+- `services/`: Interacting with the backend API
 - `features/`: Feature-specific folders
   - `snippets/`: Components and functions related to snippets
 - `pages/`: Main pages of the app
diff --git a/src/app/App.tsx b/src/app/App.tsx
index 8902a61..3a7d345 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -13,6 +13,7 @@ import TagPage from '../pages/TagPage';
 import Home from '../pages/Home';
 
 import Providers from './Providers';
+import CreateSnippet from '@/pages/CreateSnippet';
 
 function App() {
   return (
@@ -43,6 +44,7 @@ function App() {
             element={<SignUp routing="path" path="/sign-up" />}
           />
 
+          <Route path="/create-snippet" element={<CreateSnippet />} />
           <Route path="/contributors" element={<Contributors />} />
           <Route path="/about" element={<About />} />
           <Route path="/contact" element={<Contact />} />
diff --git a/src/components/Loading.tsx b/src/components/Loading.tsx
index a9d8c29..948f073 100644
--- a/src/components/Loading.tsx
+++ b/src/components/Loading.tsx
@@ -1,4 +1,4 @@
-import Style from './Loading.module.css';
+import Style from '@/styles/Loading.module.css';
 
 const Loading = ({ title, message }: { title: string; message: string }) => {
   return (
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
new file mode 100644
index 0000000..778211b
--- /dev/null
+++ b/src/components/Modal.tsx
@@ -0,0 +1,47 @@
+import { XMarkIcon } from '@heroicons/react/24/outline';
+import { useCallback, useRef, ReactNode } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+const Modal = ({ children }: { children: ReactNode }) => {
+  const overlay = useRef<HTMLDivElement>(null);
+  const wrapper = useRef<HTMLDivElement>(null);
+  const navigate = useNavigate();
+
+  const onDismiss = useCallback(() => {
+    navigate('/');
+  }, [navigate]);
+
+  const handleClick = useCallback(
+    (e: React.MouseEvent) => {
+      if (e.target === overlay.current && onDismiss) {
+        onDismiss();
+      }
+    },
+    [onDismiss, overlay],
+  );
+
+  return (
+    <div
+      ref={overlay}
+      className="fixed bottom-0 left-0 right-0 top-0 z-10 mx-auto bg-black/80"
+      onClick={handleClick}
+    >
+      <div
+        ref={wrapper}
+        className="absolute bottom-0 flex h-[90%] w-full flex-col items-center justify-start overflow-auto rounded-t-3xl bg-white px-8 pb-72 pt-14 lg:px-40"
+      >
+        <button
+          type="button"
+          onClick={onDismiss}
+          className="absolute right-4 top-4 z-50 text-black"
+        >
+          <XMarkIcon className="h-6 w-6" />
+          <span className="sr-only">Back to home</span>
+        </button>
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default Modal;
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index cf34a74..b9fc201 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -3,9 +3,10 @@ import {
   Bars3Icon,
   BellIcon,
   CodeBracketIcon,
+  PlusIcon,
   XMarkIcon,
 } from '@heroicons/react/24/outline';
-import { useLocation } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { UserButton } from '@clerk/clerk-react';
 
 const navigation = [
@@ -22,6 +23,7 @@ function classNames({ classes = [] }: { classes?: string[] } = {}) {
 
 const Navbar = () => {
   const { pathname } = useLocation();
+  const navigate = useNavigate();
 
   const isActive = (href: string) => href === pathname;
   return (
@@ -48,6 +50,14 @@ const Navbar = () => {
                 </div>
               </div>
               <div className="flexStart inset-y-0 right-0 flex items-center gap-3 pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
+                <button
+                  type="button"
+                  onClick={() => navigate('/create-snippet')}
+                  className="inline-flex items-center rounded-md border border-transparent bg-primary px-4 py-2 font-medium text-white shadow-sm hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2"
+                >
+                  <PlusIcon className="mr-2 h-6 w-6" />
+                  Create Snippet
+                </button>
                 <button
                   type="button"
                   className="rounded-full p-1 text-gray-400 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800"
diff --git a/src/components/SelectBox.tsx b/src/components/SelectBox.tsx
new file mode 100644
index 0000000..9a7a852
--- /dev/null
+++ b/src/components/SelectBox.tsx
@@ -0,0 +1,96 @@
+import { Listbox, Transition } from '@headlessui/react';
+import { CheckIcon, ChevronUpDownIcon } from '@heroicons/react/24/outline';
+import { Fragment } from 'react';
+
+const SelectBox = ({
+  options,
+  value,
+  onChange,
+}: {
+  options: string[];
+  value: string;
+  onChange: (value: string) => void;
+}) => {
+  return (
+    <Listbox value={value} onChange={onChange} as="div" className="space-y-2">
+      <div className="relative">
+        <Listbox.Button
+          as="button"
+          className="relative w-full rounded-xl bg-gray-100 py-4 pl-4 pr-10 text-left capitalize focus:outline-none focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300"
+        >
+          {value ? value : 'Select a Language'}
+          <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+            <ChevronUpDownIcon
+              className="h-5 w-5 text-gray-400"
+              aria-hidden="true"
+            />
+          </span>
+        </Listbox.Button>
+        <Transition
+          as={Fragment}
+          leave="transition ease-in duration-100"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <Listbox.Options className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+            {options.map((option, optionIdx) => (
+              <Listbox.Option
+                key={optionIdx}
+                className={({ active }) =>
+                  `relative cursor-default select-none py-2 pl-10 pr-4 ${
+                    active ? 'bg-primary/10 text-primary' : 'text-gray-900'
+                  }`
+                }
+                value={option}
+              >
+                {({ selected }) => (
+                  <>
+                    <span
+                      className={`block truncate capitalize ${
+                        selected ? 'font-medium' : 'font-normal'
+                      }`}
+                    >
+                      {option}
+                    </span>
+                    {selected ? (
+                      <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-secondary">
+                        <CheckIcon className="h-5 w-5" aria-hidden="true" />
+                      </span>
+                    ) : null}
+                  </>
+                )}
+              </Listbox.Option>
+            ))}
+          </Listbox.Options>
+        </Transition>
+      </div>
+      {/* <Listbox.Options
+        as="ul"
+        className="mt-2 space-y-1 rounded-lg border border-gray-200 bg-white py-2 shadow-lg"
+        >
+        {options.map((option) => (
+          <Listbox.Option
+            key={option}
+            value={option}
+            className={({ active }) =>
+              `${
+                active ? 'bg-primary text-white' : 'text-gray-900'
+              } relative cursor-pointer select-none px-4 py-2`
+            }
+            >
+            {({ selected }) => (
+              <div className="flex">
+                {selected && (
+                  <CheckIcon className="h-5 w-5" aria-hidden="true" />
+                )}
+                <span className="ml-6">{option}</span>
+              </div>
+            )}
+          </Listbox.Option>
+        ))}
+      </Listbox.Options> */}
+    </Listbox>
+  );
+};
+
+export default SelectBox;
diff --git a/src/constants/index.ts b/src/constants/index.ts
index c4dd5a4..8e6c4f0 100644
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -4,3 +4,17 @@ export enum Status {
   Success,
   Error,
 }
+
+export const Languages = [
+  'javascript',
+  'css',
+  'html',
+  'python',
+  'ruby',
+  'java',
+  'php',
+  'c',
+  'cpp',
+  'sh',
+  'go',
+];
diff --git a/src/features/snippets/SnippetForm.tsx b/src/features/snippets/SnippetForm.tsx
new file mode 100644
index 0000000..88d7c86
--- /dev/null
+++ b/src/features/snippets/SnippetForm.tsx
@@ -0,0 +1,118 @@
+import SelectBox from '@/components/SelectBox';
+import { Languages } from '@/constants';
+import React, { useState } from 'react';
+
+const SnippetForm = () => {
+  const [snippetData, setSnippetData] = useState({
+    title: '',
+    description: '',
+    language: '',
+    code: '',
+    tags: [] as string[],
+  });
+
+  const handleInputChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => {
+    const { name, value } = e.target;
+    setSnippetData({
+      ...snippetData,
+      [name]: value,
+    });
+  };
+
+  const handleTagsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const inputValue = e.target.value.trim();
+    if (inputValue.length === 0) return;
+
+    const tags = inputValue.split(',') as string[];
+    setSnippetData({
+      ...snippetData,
+      tags: tags.map((tag) => tag.trim()),
+    });
+  };
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    console.log(snippetData);
+
+    // Reset the form after submission
+    setSnippetData({
+      title: '',
+      description: '',
+      language: '',
+      code: '',
+      tags: [],
+    });
+  };
+
+  return (
+    <form
+      className="mx-auto flex w-full max-w-5xl flex-col gap-10 pt-12 text-lg lg:pt-24"
+      onSubmit={handleSubmit}
+    >
+      <div className="flex flex-col">
+        <label htmlFor="project-name">Snippet Name</label>
+        <input
+          id="project-name"
+          type="text"
+          name="title"
+          value={snippetData.title}
+          onChange={handleInputChange}
+          className="w-full rounded-xl bg-gray-100 p-4 outline-0"
+        />
+      </div>
+      <div className="flex flex-col">
+        <label htmlFor="project-description">Snippet Description</label>
+        <textarea
+          id="project-description"
+          name="description"
+          value={snippetData.description}
+          onChange={handleInputChange}
+          className="w-full rounded-xl bg-gray-100 p-4 outline-0"
+        />
+      </div>
+      <div className="flex gap-4">
+        <div className="flex flex-1 flex-col">
+          <label htmlFor="project-language">Snippet Language</label>
+          <SelectBox
+            options={Languages}
+            value={snippetData.language}
+            onChange={(value) =>
+              setSnippetData({ ...snippetData, language: value })
+            }
+          />
+        </div>
+        <div className="flex flex-1 flex-col">
+          <label htmlFor="project-tags">Snippet Tags</label>
+          <input
+            id="project-tags"
+            type="text"
+            className="w-full rounded-xl bg-gray-100 p-4 outline-0"
+            value={snippetData.tags.join(', ')}
+            onChange={handleTagsChange}
+          />
+        </div>
+      </div>
+      <div className="flex flex-col">
+        <label htmlFor="project-code">Paste Code</label>
+        <textarea
+          id="project-code"
+          name="code"
+          value={snippetData.code}
+          onChange={handleInputChange}
+          rows={6}
+          className="w-full rounded-xl bg-gray-100 p-4 outline-0"
+        />
+      </div>
+      <button
+        type="submit"
+        className="w-full max-w-[300px] rounded-xl bg-primary p-4 text-lg font-bold text-white shadow-sm hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2"
+      >
+        Create Snippet
+      </button>
+    </form>
+  );
+};
+
+export default SnippetForm;
diff --git a/src/pages/CreateSnippet.tsx b/src/pages/CreateSnippet.tsx
new file mode 100644
index 0000000..7fe1631
--- /dev/null
+++ b/src/pages/CreateSnippet.tsx
@@ -0,0 +1,22 @@
+import Modal from '@/components/Modal';
+import SnippetForm from '@/features/snippets/SnippetForm';
+import { useAuth } from '@clerk/clerk-react';
+import { useNavigate } from 'react-router-dom';
+
+const CreateSnippet = () => {
+  const { isLoaded, userId } = useAuth();
+  const navigate = useNavigate();
+
+  if (!isLoaded || !userId) navigate('/sign-in');
+
+  return (
+    <Modal>
+      <h3 className="w-full max-w-5xl text-left text-3xl font-extrabold md:text-5xl">
+        Create a New Snippet
+      </h3>
+      <SnippetForm />
+    </Modal>
+  );
+};
+
+export default CreateSnippet;
diff --git a/src/components/Loading.module.css b/src/styles/Loading.module.css
similarity index 100%
rename from src/components/Loading.module.css
rename to src/styles/Loading.module.css
diff --git a/src/styles/globals.css b/src/styles/globals.css
index b25f9f8..621ef92 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -1,77 +1,16 @@
+@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:opsz,wght@6..12,400;6..12,500;6..12,600;6..12,700&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-
-    --blue-500: 210 40% 96.1%;
-    --blue-500-foreground: 222.2 47.4% 11.2%;
-
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
-
-    --radius: 0.5rem;
-  }
-
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-
-    --blue-500: 217.2 32.6% 17.5%;
-    --blue-500-foreground: 210 40% 98%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
-  }
-}
-
 @layer base {
   * {
     @apply border-border;
   }
   body {
     @apply bg-background text-foreground;
+    font-family: 'Nunito Sans', sans-serif;
   }
 }
 
diff --git a/tailwind.config.js b/tailwind.config.js
index 4ff1e28..d5fb32f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -20,7 +20,7 @@ module.exports = {
         border: '#ECEFF1',
         input: '#E0E0E0',
         ring: '#2196F3',
-        background: '#FFFFFF',
+        background: '#eaecf5',
         foreground: '#333333',
         primary: '#2196F3',
         secondary: '#00C853',

From 91329d79fec04e0db9e87eb1e2f77db025c44e9e Mon Sep 17 00:00:00 2001
From: IndieCoderMM <hthant00chk@gmail.com>
Date: Wed, 6 Sep 2023 17:02:18 +0630
Subject: [PATCH 4/7] Add onboarding page

---
 package-lock.json                     | 36 +++++++++++++++-
 package.json                          |  5 ++-
 src/app/App.tsx                       | 16 ++++----
 src/components/Navbar.tsx             |  2 +-
 src/features/snippets/SnippetForm.tsx | 13 +++---
 src/lib/validations/user.ts           | 16 ++++++++
 src/pages/CreateSnippet.tsx           |  8 ++--
 src/pages/Onboarding.tsx              | 59 +++++++++++++++++++++++++++
 src/pages/PageNotFound.tsx            |  2 +-
 src/pages/auth/SignInPage.tsx         | 14 +++++++
 src/pages/auth/SignUpPage.tsx         | 14 +++++++
 src/styles/globals.css                | 12 ++++--
 12 files changed, 169 insertions(+), 28 deletions(-)
 create mode 100644 src/lib/validations/user.ts
 create mode 100644 src/pages/Onboarding.tsx
 create mode 100644 src/pages/auth/SignInPage.tsx
 create mode 100644 src/pages/auth/SignUpPage.tsx

diff --git a/package-lock.json b/package-lock.json
index e4edde9..e6197f0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@clerk/clerk-react": "^4.23.2",
         "@headlessui/react": "^1.7.15",
         "@heroicons/react": "^2.0.18",
+        "@hookform/resolvers": "^3.3.1",
         "@reduxjs/toolkit": "^1.9.5",
         "axios": "^1.4.0",
         "babel-plugin-prismjs": "^2.1.0",
@@ -19,10 +20,12 @@
         "prismjs": "^1.29.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-hook-form": "^7.46.1",
         "react-redux": "^8.1.1",
         "react-router-dom": "^6.14.1",
         "tailwind-merge": "^1.14.0",
-        "tailwindcss-animate": "^1.0.7"
+        "tailwindcss-animate": "^1.0.7",
+        "zod": "^3.22.2"
       },
       "devDependencies": {
         "@types/node": "^20.5.9",
@@ -930,6 +933,14 @@
         "react": ">= 16"
       }
     },
+    "node_modules/@hookform/resolvers": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.3.1.tgz",
+      "integrity": "sha512-K7KCKRKjymxIB90nHDQ7b9nli474ru99ZbqxiqDAWYsYhOsU3/4qLxW91y+1n04ic13ajjZ66L3aXbNef8PELQ==",
+      "peerDependencies": {
+        "react-hook-form": "^7.0.0"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.10.tgz",
@@ -3285,6 +3296,21 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-hook-form": {
+      "version": "7.46.1",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.46.1.tgz",
+      "integrity": "sha512-0GfI31LRTBd5tqbXMGXT1Rdsv3rnvy0FjEk8Gn9/4tp6+s77T7DPZuGEpBRXOauL+NhyGT5iaXzdIM2R6F/E+w==",
+      "engines": {
+        "node": ">=12.22.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18"
+      }
+    },
     "node_modules/react-is": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
@@ -3986,6 +4012,14 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zod": {
+      "version": "3.22.2",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.22.2.tgz",
+      "integrity": "sha512-wvWkphh5WQsJbVk1tbx1l1Ly4yg+XecD+Mq280uBGt9wa5BKSWf4Mhp6GmrkPixhMxmabYY7RbzlwVP32pbGCg==",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 87eb5f6..2d449c1 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "@clerk/clerk-react": "^4.23.2",
     "@headlessui/react": "^1.7.15",
     "@heroicons/react": "^2.0.18",
+    "@hookform/resolvers": "^3.3.1",
     "@reduxjs/toolkit": "^1.9.5",
     "axios": "^1.4.0",
     "babel-plugin-prismjs": "^2.1.0",
@@ -21,10 +22,12 @@
     "prismjs": "^1.29.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.46.1",
     "react-redux": "^8.1.1",
     "react-router-dom": "^6.14.1",
     "tailwind-merge": "^1.14.0",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "zod": "^3.22.2"
   },
   "devDependencies": {
     "@types/node": "^20.5.9",
diff --git a/src/app/App.tsx b/src/app/App.tsx
index 3a7d345..c352e85 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -1,5 +1,5 @@
 import { Routes, Route } from 'react-router-dom';
-import { SignIn, SignUp, SignedIn, SignedOut } from '@clerk/clerk-react';
+import { SignedIn, SignedOut } from '@clerk/clerk-react';
 
 import Navbar from '../components/Navbar';
 import SnippetsFeed from '../pages/SnippetsFeed';
@@ -14,6 +14,9 @@ import Home from '../pages/Home';
 
 import Providers from './Providers';
 import CreateSnippet from '@/pages/CreateSnippet';
+import SignInPage from '@/pages/auth/SignInPage';
+import SignUpPage from '@/pages/auth/SignUpPage';
+import Onboarding from '@/pages/Onboarding';
 
 function App() {
   return (
@@ -35,16 +38,11 @@ function App() {
               </>
             }
           />
-          <Route
-            path="/sign-in/*"
-            element={<SignIn routing="path" path="/sign-in" />}
-          />
-          <Route
-            path="/sign-up/*"
-            element={<SignUp routing="path" path="/sign-up" />}
-          />
+          <Route path="/sign-in/*" element={<SignInPage />} />
+          <Route path="/sign-up/*" element={<SignUpPage />} />
 
           <Route path="/create-snippet" element={<CreateSnippet />} />
+          <Route path="/onboarding" element={<Onboarding />} />
           <Route path="/contributors" element={<Contributors />} />
           <Route path="/about" element={<About />} />
           <Route path="/contact" element={<Contact />} />
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index b9fc201..1944ca7 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -65,7 +65,7 @@ const Navbar = () => {
                   <span className="sr-only">View notifications</span>
                   <BellIcon className="h-6 w-6" aria-hidden="true" />
                 </button>
-                <UserButton />
+                <UserButton afterSignOutUrl="/" />
               </div>
             </div>
           </div>
diff --git a/src/features/snippets/SnippetForm.tsx b/src/features/snippets/SnippetForm.tsx
index 88d7c86..aee66e7 100644
--- a/src/features/snippets/SnippetForm.tsx
+++ b/src/features/snippets/SnippetForm.tsx
@@ -59,7 +59,7 @@ const SnippetForm = () => {
           name="title"
           value={snippetData.title}
           onChange={handleInputChange}
-          className="w-full rounded-xl bg-gray-100 p-4 outline-0"
+          className="formInput"
         />
       </div>
       <div className="flex flex-col">
@@ -69,7 +69,7 @@ const SnippetForm = () => {
           name="description"
           value={snippetData.description}
           onChange={handleInputChange}
-          className="w-full rounded-xl bg-gray-100 p-4 outline-0"
+          className="formInput"
         />
       </div>
       <div className="flex gap-4">
@@ -88,7 +88,7 @@ const SnippetForm = () => {
           <input
             id="project-tags"
             type="text"
-            className="w-full rounded-xl bg-gray-100 p-4 outline-0"
+            className="formInput"
             value={snippetData.tags.join(', ')}
             onChange={handleTagsChange}
           />
@@ -102,13 +102,10 @@ const SnippetForm = () => {
           value={snippetData.code}
           onChange={handleInputChange}
           rows={6}
-          className="w-full rounded-xl bg-gray-100 p-4 outline-0"
+          className="formInput"
         />
       </div>
-      <button
-        type="submit"
-        className="w-full max-w-[300px] rounded-xl bg-primary p-4 text-lg font-bold text-white shadow-sm hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2"
-      >
+      <button type="submit" className="submitBtn">
         Create Snippet
       </button>
     </form>
diff --git a/src/lib/validations/user.ts b/src/lib/validations/user.ts
new file mode 100644
index 0000000..65ad439
--- /dev/null
+++ b/src/lib/validations/user.ts
@@ -0,0 +1,16 @@
+import * as z from 'zod';
+
+export const UserValidation = z.object({
+  name: z
+    .string()
+    .min(3, { message: 'Minimum 3 characters.' })
+    .max(30, { message: 'Maximum 30 caracters.' }),
+  username: z
+    .string()
+    .min(3, { message: 'Minimum 3 characters.' })
+    .max(30, { message: 'Maximum 30 caracters.' }),
+  bio: z
+    .string()
+    .min(3, { message: 'Minimum 3 characters.' })
+    .max(1000, { message: 'Maximum 1000 caracters.' }),
+});
diff --git a/src/pages/CreateSnippet.tsx b/src/pages/CreateSnippet.tsx
index 7fe1631..51ce7c6 100644
--- a/src/pages/CreateSnippet.tsx
+++ b/src/pages/CreateSnippet.tsx
@@ -1,13 +1,13 @@
 import Modal from '@/components/Modal';
 import SnippetForm from '@/features/snippets/SnippetForm';
-import { useAuth } from '@clerk/clerk-react';
-import { useNavigate } from 'react-router-dom';
+import { RedirectToSignIn, useAuth } from '@clerk/clerk-react';
 
 const CreateSnippet = () => {
   const { isLoaded, userId } = useAuth();
-  const navigate = useNavigate();
 
-  if (!isLoaded || !userId) navigate('/sign-in');
+  if (!isLoaded || !userId) {
+    return <RedirectToSignIn />;
+  }
 
   return (
     <Modal>
diff --git a/src/pages/Onboarding.tsx b/src/pages/Onboarding.tsx
new file mode 100644
index 0000000..3cb5f05
--- /dev/null
+++ b/src/pages/Onboarding.tsx
@@ -0,0 +1,59 @@
+import { useUser } from '@clerk/clerk-react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import * as z from 'zod';
+import { UserValidation } from '@/lib/validations/user';
+
+const Onboarding = () => {
+  const { user } = useUser();
+
+  const form = useForm<z.infer<typeof UserValidation>>({
+    resolver: zodResolver(UserValidation),
+    defaultValues: {
+      name: user?.firstName ? user.firstName : 'hello',
+      username: user?.username ? user.username : '',
+      bio: '',
+    },
+  });
+
+  console.log(user);
+
+  return (
+    <section className="padding min-h-screen w-full">
+      <div className="mx-auto max-w-5xl">
+        <h3 className="mb-8 text-left text-3xl font-extrabold md:text-5xl">
+          Welcome, {user?.firstName}! Let&apos;s get you set up.
+        </h3>
+        <p className="w-full text-left text-lg md:text-xl">
+          Please fill out the following information to complete your profile.
+        </p>
+        <form
+          className="mx-auto flex w-full max-w-5xl flex-col gap-10 pt-12 text-lg lg:pt-24"
+          onSubmit={form.handleSubmit((data) => console.log(data))}
+        >
+          <div className="flex flex-col justify-start gap-2">
+            <label htmlFor="name">Name</label>
+            <input {...form.register('name')} className="formInput" />
+            <p>{form.formState.errors.name?.message}</p>
+          </div>
+
+          <div className="flex flex-col justify-start gap-2">
+            <label htmlFor="username">Username</label>
+            <input {...form.register('username')} className="formInput" />
+          </div>
+
+          <div className="flex flex-col justify-start gap-2">
+            <label htmlFor="bio">Bio</label>
+            <textarea {...form.register('bio')} className="formInput" />
+          </div>
+
+          <button type="submit" className="submitBtn">
+            Save
+          </button>
+        </form>
+      </div>
+    </section>
+  );
+};
+
+export default Onboarding;
diff --git a/src/pages/PageNotFound.tsx b/src/pages/PageNotFound.tsx
index 5440215..7373ff8 100644
--- a/src/pages/PageNotFound.tsx
+++ b/src/pages/PageNotFound.tsx
@@ -1,6 +1,6 @@
 const PageNotFound = () => {
   return (
-    <section className="grid min-h-screen place-items-center bg-white px-6 py-24 sm:py-32 lg:ml-64 lg:px-8">
+    <section className="grid min-h-screen w-full place-items-center bg-white px-6 py-24 sm:py-32 lg:px-8">
       <div className="text-center">
         <p className="text-base font-semibold text-indigo-600">404</p>
         <h1 className="mt-4 text-3xl font-bold tracking-tight text-gray-900 sm:text-5xl">
diff --git a/src/pages/auth/SignInPage.tsx b/src/pages/auth/SignInPage.tsx
new file mode 100644
index 0000000..3894952
--- /dev/null
+++ b/src/pages/auth/SignInPage.tsx
@@ -0,0 +1,14 @@
+import { SignIn } from '@clerk/clerk-react';
+
+const SignInPage = () => {
+  return (
+    <SignIn
+      path="/sign-in"
+      routing="path"
+      signUpUrl="/sign-up"
+      afterSignInUrl="/"
+    />
+  );
+};
+
+export default SignInPage;
diff --git a/src/pages/auth/SignUpPage.tsx b/src/pages/auth/SignUpPage.tsx
new file mode 100644
index 0000000..ce59e56
--- /dev/null
+++ b/src/pages/auth/SignUpPage.tsx
@@ -0,0 +1,14 @@
+import { SignUp } from '@clerk/clerk-react';
+
+const SignUpPage = () => {
+  return (
+    <SignUp
+      routing="path"
+      path="/sign-up"
+      signInUrl="/sign-in"
+      afterSignUpUrl="/onboarding"
+    />
+  );
+};
+
+export default SignUpPage;
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 621ef92..ec6d5b7 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -16,9 +16,7 @@
 
 @layer components {
   .maxContainer {
-    width: 100%;
-    max-width: 1440px;
-    margin: 0 auto;
+    @apply mx-auto max-w-[1440px] px-8 sm:px-16;
   }
 }
 
@@ -66,6 +64,14 @@
   .flexStart {
     @apply flex items-center justify-start;
   }
+
+  .formInput {
+    @apply w-full rounded-xl bg-gray-100 p-4 outline-0;
+  }
+
+  .submitBtn {
+    @apply w-full max-w-[300px] rounded-xl bg-primary p-4 text-lg font-bold text-white shadow-sm hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2;
+  }
 }
 
 ::-webkit-scrollbar {

From db1dce365469238c6d049dbee810cb0297479d06 Mon Sep 17 00:00:00 2001
From: IndieCoderMM <hthant00chk@gmail.com>
Date: Thu, 7 Sep 2023 12:55:31 +0630
Subject: [PATCH 5/7] Add actions for onboarding

---
 src/lib/validations/user.ts   |   4 --
 src/pages/Onboarding.tsx      | 109 ++++++++++++++++++++++++----------
 src/pages/auth/SignUpPage.tsx |   1 +
 3 files changed, 79 insertions(+), 35 deletions(-)

diff --git a/src/lib/validations/user.ts b/src/lib/validations/user.ts
index 65ad439..d9f68a9 100644
--- a/src/lib/validations/user.ts
+++ b/src/lib/validations/user.ts
@@ -1,10 +1,6 @@
 import * as z from 'zod';
 
 export const UserValidation = z.object({
-  name: z
-    .string()
-    .min(3, { message: 'Minimum 3 characters.' })
-    .max(30, { message: 'Maximum 30 caracters.' }),
   username: z
     .string()
     .min(3, { message: 'Minimum 3 characters.' })
diff --git a/src/pages/Onboarding.tsx b/src/pages/Onboarding.tsx
index 3cb5f05..c6dc253 100644
--- a/src/pages/Onboarding.tsx
+++ b/src/pages/Onboarding.tsx
@@ -1,56 +1,103 @@
-import { useUser } from '@clerk/clerk-react';
+import { RedirectToSignIn, useUser } from '@clerk/clerk-react';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import * as z from 'zod';
 import { UserValidation } from '@/lib/validations/user';
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 const Onboarding = () => {
-  const { user } = useUser();
+  const { user, isLoaded, isSignedIn } = useUser();
+  const navigate = useNavigate();
 
-  const form = useForm<z.infer<typeof UserValidation>>({
+  if (!isSignedIn) return <RedirectToSignIn />;
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm<z.infer<typeof UserValidation>>({
     resolver: zodResolver(UserValidation),
     defaultValues: {
-      name: user?.firstName ? user.firstName : 'hello',
-      username: user?.username ? user.username : '',
+      username: '',
       bio: '',
     },
   });
 
-  console.log(user);
+  useEffect(() => {
+    if (isLoaded && isSignedIn)
+      reset({ username: user?.firstName ? user.firstName : '', bio: '' });
+  }, [isLoaded, isSignedIn, user, reset]);
+
+  const onSubmit = async (data: z.infer<typeof UserValidation>) => {
+    try {
+      // TODO: Create a new user in the database
+      await user?.update({
+        username: data.username,
+        unsafeMetadata: {
+          profile: {
+            bio: data.bio,
+          },
+        },
+      });
+      // On success, redirect to home page
+      navigate('/');
+    } catch (error) {
+      console.log(error);
+    }
+  };
 
   return (
     <section className="padding min-h-screen w-full">
       <div className="mx-auto max-w-5xl">
         <h3 className="mb-8 text-left text-3xl font-extrabold md:text-5xl">
-          Welcome, {user?.firstName}! Let&apos;s get you set up.
+          Welcome, {user?.fullName}! Let&apos;s get you set up.
         </h3>
         <p className="w-full text-left text-lg md:text-xl">
           Please fill out the following information to complete your profile.
         </p>
-        <form
-          className="mx-auto flex w-full max-w-5xl flex-col gap-10 pt-12 text-lg lg:pt-24"
-          onSubmit={form.handleSubmit((data) => console.log(data))}
-        >
-          <div className="flex flex-col justify-start gap-2">
-            <label htmlFor="name">Name</label>
-            <input {...form.register('name')} className="formInput" />
-            <p>{form.formState.errors.name?.message}</p>
-          </div>
-
-          <div className="flex flex-col justify-start gap-2">
-            <label htmlFor="username">Username</label>
-            <input {...form.register('username')} className="formInput" />
-          </div>
-
-          <div className="flex flex-col justify-start gap-2">
-            <label htmlFor="bio">Bio</label>
-            <textarea {...form.register('bio')} className="formInput" />
-          </div>
-
-          <button type="submit" className="submitBtn">
-            Save
-          </button>
-        </form>
+        <div className="mt-10 flex gap-8">
+          <img
+            src={user?.imageUrl}
+            alt="Profile"
+            className="h-24 w-24 rounded-full border-2 border-white shadow-sm"
+          />
+          <form
+            className="mx-auto flex w-full max-w-5xl flex-col gap-10 text-lg"
+            onSubmit={handleSubmit(onSubmit)}
+          >
+            <div className="flex flex-col justify-start gap-2">
+              <label htmlFor="username">Username</label>
+              <input
+                {...register('username')}
+                className="formInput"
+                placeholder="Username"
+              />
+              {errors?.username && (
+                <p className="text-xs text-red-500">
+                  {errors.username.message}
+                </p>
+              )}
+            </div>
+
+            <div className="flex flex-col justify-start gap-2">
+              <label htmlFor="bio">Bio</label>
+              <textarea
+                {...register('bio')}
+                className="formInput"
+                placeholder="Short introduction about yourself"
+              />
+              {errors?.bio && (
+                <p className="text-xs text-red-500">{errors.bio.message}</p>
+              )}
+            </div>
+
+            <button type="submit" className="submitBtn">
+              Save
+            </button>
+          </form>
+        </div>
       </div>
     </section>
   );
diff --git a/src/pages/auth/SignUpPage.tsx b/src/pages/auth/SignUpPage.tsx
index ce59e56..3df9518 100644
--- a/src/pages/auth/SignUpPage.tsx
+++ b/src/pages/auth/SignUpPage.tsx
@@ -6,6 +6,7 @@ const SignUpPage = () => {
       routing="path"
       path="/sign-up"
       signInUrl="/sign-in"
+      redirectUrl="/onboarding"
       afterSignUpUrl="/onboarding"
     />
   );

From fd71817a94a6e368000310d5bc6c8b49cb03f517 Mon Sep 17 00:00:00 2001
From: IndieCoderMM <hthant00chk@gmail.com>
Date: Thu, 7 Sep 2023 16:17:05 +0630
Subject: [PATCH 6/7] Modify feed layout

---
 src/app/App.tsx                       |  6 +++--
 src/components/Sidebar.tsx            |  6 ++---
 src/features/snippets/SnippetCard.tsx |  2 +-
 src/features/snippets/SnippetList.tsx |  4 +--
 src/pages/SnippetsFeed.tsx            | 36 ++++++++++++++++++++++++---
 src/styles/globals.css                |  5 +++-
 6 files changed, 47 insertions(+), 12 deletions(-)

diff --git a/src/app/App.tsx b/src/app/App.tsx
index c352e85..cd7476b 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -22,14 +22,16 @@ function App() {
   return (
     <Providers>
       <Navbar />
-      <main className="mt-16 grid min-h-screen place-items-center">
+      <main className=" mt-10 grid h-full w-full grid-cols-1 lg:grid-cols-8 lg:p-8">
+        <SignedIn>
+          <Sidebar />
+        </SignedIn>
         <Routes>
           <Route
             path="/"
             element={
               <>
                 <SignedIn>
-                  <Sidebar />
                   <SnippetsFeed />
                 </SignedIn>
                 <SignedOut>
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 282d62c..2dbecf6 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -12,8 +12,8 @@ import TagsDropDown from '../features/tags/TagsDropDown';
 
 const Sidebar = () => {
   return (
-    <aside
-      className="fixed left-0 top-16 z-20 h-screen w-64 -translate-x-full border-r transition-transform lg:translate-x-0"
+    <div
+      className="z-20 mx-auto hidden h-full max-h-[90%] w-full overflow-hidden rounded-md border-r shadow-md lg:col-span-2 lg:block xl:w-[70%]"
       aria-label="Sidebar"
     >
       <div className="h-full overflow-y-auto bg-white px-3 py-4">
@@ -72,7 +72,7 @@ const Sidebar = () => {
           </li>
         </ul>
       </div>
-    </aside>
+    </div>
   );
 };
 
diff --git a/src/features/snippets/SnippetCard.tsx b/src/features/snippets/SnippetCard.tsx
index f2fbf6e..a0214fc 100644
--- a/src/features/snippets/SnippetCard.tsx
+++ b/src/features/snippets/SnippetCard.tsx
@@ -23,7 +23,7 @@ const SnippetCard = (props: Snippet) => {
   }, []);
 
   return (
-    <div className="flex max-w-full cursor-pointer flex-col gap-3 rounded-md border bg-white p-5 hover:shadow-md">
+    <div className="flex w-full cursor-pointer flex-col gap-3 rounded-md border bg-white p-5 hover:shadow-md">
       <h3 className="text-2xl font-semibold">{props.title}</h3>
       <div className="flex gap-5">
         <div>
diff --git a/src/features/snippets/SnippetList.tsx b/src/features/snippets/SnippetList.tsx
index 9b51317..beb6a14 100644
--- a/src/features/snippets/SnippetList.tsx
+++ b/src/features/snippets/SnippetList.tsx
@@ -3,9 +3,9 @@ import SnippetCard from './SnippetCard';
 
 const SnippetList = ({ snippets }: { snippets: Snippet[] }) => {
   return (
-    <div className="mx-auto grid w-full gap-5 py-10 sm:max-w-2xl">
+    <div className="mx-auto flex w-full flex-col gap-5 py-10 lg:w-[90%]">
       {snippets.map((item) => (
-        <div className="overflow-hidden  p-2" key={item.id}>
+        <div className="p-2" key={item.id}>
           <SnippetCard {...item} />
         </div>
       ))}
diff --git a/src/pages/SnippetsFeed.tsx b/src/pages/SnippetsFeed.tsx
index 60597a0..0bbdebd 100644
--- a/src/pages/SnippetsFeed.tsx
+++ b/src/pages/SnippetsFeed.tsx
@@ -4,6 +4,7 @@ import { Status } from '../constants';
 import { getAllSnippets } from '../features/snippets/snippetsSlice';
 import SnippetList from '../features/snippets/SnippetList';
 import Loading from '../components/Loading';
+import { Cog6ToothIcon } from '@heroicons/react/24/solid';
 
 const SnippetsFeed = () => {
   const snippets = useAppSelector((state) => state.snippets);
@@ -17,7 +18,7 @@ const SnippetsFeed = () => {
 
   if (snippets.status === Status.Loading) {
     return (
-      <div className="grid min-h-screen w-full place-items-center bg-white px-6 py-24 sm:py-32 lg:px-8">
+      <div className="grid min-h-screen w-full place-items-center bg-white px-6 py-24 sm:py-32 lg:col-span-4 lg:px-8">
         <Loading
           title="Fetching data from API"
           message="Please be patient. Sometimes it only takes ETERNITY! 😉"
@@ -28,14 +29,43 @@ const SnippetsFeed = () => {
 
   if (snippets.status === Status.Error) {
     return (
-      <div className="flex min-h-screen w-full flex-col gap-5 bg-white py-10 text-center">
+      <div className="flex min-h-screen w-full flex-col gap-5 bg-white py-10 text-center lg:col-span-4">
         <h2 className="text-2xl font-semibold">Oops! Something went wrong😯</h2>
         <p className="text-lg font-medium text-rose-500">{snippets.error}</p>
       </div>
     );
   }
 
-  return <SnippetList snippets={snippets.data} />;
+  return (
+    <div className="col-span-1 flex h-screen flex-col gap-2 overflow-y-auto p-4 pb-8 lg:col-span-6 xl:col-span-4">
+      <header className="flex justify-between gap-1">
+        <h2 className="text-2xl font-semibold">Your Feed</h2>
+        <button
+          type="button"
+          className="flex items-center justify-center rounded-md p-1 transition-all hover:scale-105 hover:bg-gray-300"
+        >
+          <Cog6ToothIcon className="h-6 w-6" />
+        </button>
+      </header>
+      <SnippetList snippets={snippets.data} />
+      <footer className="my-10 w-full flex-shrink-0 py-10">
+        <div className="flex items-center justify-between">
+          <p className="text-sm text-gray-500">
+            Copyright &copy; 2023 Snippit. All rights reserved.
+          </p>
+          <div className="flex gap-2">
+            <a href="#" className="text-sm text-gray-500 hover:text-gray-700">
+              Terms of Service
+            </a>
+            <p className="text-sm text-gray-500">|</p>
+            <a href="#" className="text-sm text-gray-500 hover:text-gray-700">
+              Privacy Policy
+            </a>
+          </div>
+        </div>
+      </footer>
+    </div>
+  );
 };
 
 export default SnippetsFeed;
diff --git a/src/styles/globals.css b/src/styles/globals.css
index ec6d5b7..8201baa 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -8,8 +8,11 @@
   * {
     @apply border-border;
   }
-  body {
+  body,
+  html {
     @apply bg-background text-foreground;
+    height: 100%;
+    overflow: hidden;
     font-family: 'Nunito Sans', sans-serif;
   }
 }

From 4ce34a8cca275fedc7c6a735a81f7e1d652d86b0 Mon Sep 17 00:00:00 2001
From: IndieCoderMM <hthant00chk@gmail.com>
Date: Mon, 25 Sep 2023 17:17:08 +0630
Subject: [PATCH 7/7] refactor: Fix layouts and change icons

---
 src/app/App.tsx                       |  8 +--
 src/components/Footer.tsx             | 34 +++++-----
 src/components/Modal.tsx              |  4 +-
 src/components/Navbar.tsx             | 47 +++++++-------
 src/components/ProfileMenu.tsx        | 90 ---------------------------
 src/components/SelectBox.tsx          |  2 +-
 src/components/Sidebar.tsx            |  8 +--
 src/features/snippets/SnippetCard.tsx |  4 +-
 src/features/snippets/SnippetList.tsx |  2 +-
 src/features/tags/TagsDropDown.tsx    |  6 +-
 src/pages/About.tsx                   |  6 +-
 src/pages/Home.tsx                    |  2 +-
 src/pages/PageNotFound.tsx            |  2 +-
 src/pages/SnippetsFeed.tsx            | 22 ++++---
 src/styles/globals.css                |  7 +--
 tailwind.config.js                    | 13 ++--
 16 files changed, 89 insertions(+), 168 deletions(-)
 delete mode 100644 src/components/ProfileMenu.tsx

diff --git a/src/app/App.tsx b/src/app/App.tsx
index cd7476b..ae8ef5b 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -22,10 +22,10 @@ function App() {
   return (
     <Providers>
       <Navbar />
-      <main className=" mt-10 grid h-full w-full grid-cols-1 lg:grid-cols-8 lg:p-8">
-        <SignedIn>
-          <Sidebar />
-        </SignedIn>
+      <SignedIn>
+        <Sidebar />
+      </SignedIn>
+      <main className="bg-background text-text">
         <Routes>
           <Route
             path="/"
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 161ef8a..683f65b 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -8,17 +8,17 @@ const Footer = () => {
           <div className="mb-6 md:mb-0">
             <a href="https://Snippit.com/" className="flex items-center">
               <CodeBracketIcon className="h-10 w-10 text-blue-500" />
-              <span className="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">
+              <span className="dark: self-center whitespace-nowrap text-2xl font-semibold">
                 Snippit
               </span>
             </a>
           </div>
-          <div className="grid grid-cols-2 gap-8 sm:gap-6 sm:grid-cols-3">
+          <div className="grid grid-cols-2 gap-8 sm:grid-cols-3 sm:gap-6">
             <div>
-              <h2 className="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">
+              <h2 className="dark: mb-6 text-sm font-semibold uppercase text-gray-900">
                 Follow us
               </h2>
-              <ul className="text-gray-500 dark:text-gray-400 font-medium">
+              <ul className="font-medium text-gray-500 dark:text-gray-400">
                 <li className="mb-4">
                   <a href="https://github.com/" className="hover:underline ">
                     Github
@@ -33,22 +33,22 @@ const Footer = () => {
             </div>
           </div>
         </div>
-        <hr className="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8" />
+        <hr className="my-6 border-gray-200 dark:border-gray-700 sm:mx-auto lg:my-8" />
         <div className="sm:flex sm:items-center sm:justify-between">
-          <span className="text-sm text-gray-500 sm:text-center dark:text-gray-400">
+          <span className="text-sm text-gray-500 dark:text-gray-400 sm:text-center">
             © 2023{' '}
             <a href="https://Snippit.com/" className="hover:underline">
               Snippit™
             </a>
             . All Rights Reserved.
           </span>
-          <div className="flex mt-4 space-x-5 sm:justify-center sm:mt-0">
+          <div className="mt-4 flex space-x-5 sm:mt-0 sm:justify-center">
             <a
               href="#"
-              className="text-gray-500 hover:text-gray-900 dark:hover:text-white"
+              className="dark:hover: text-gray-500 hover:text-gray-900"
             >
               <svg
-                className="w-4 h-4"
+                className="h-4 w-4"
                 aria-hidden="true"
                 xmlns="http://www.w3.org/2000/svg"
                 fill="currentColor"
@@ -64,10 +64,10 @@ const Footer = () => {
             </a>
             <a
               href="#"
-              className="text-gray-500 hover:text-gray-900 dark:hover:text-white"
+              className="dark:hover: text-gray-500 hover:text-gray-900"
             >
               <svg
-                className="w-4 h-4"
+                className="h-4 w-4"
                 aria-hidden="true"
                 xmlns="http://www.w3.org/2000/svg"
                 fill="currentColor"
@@ -79,10 +79,10 @@ const Footer = () => {
             </a>
             <a
               href="#"
-              className="text-gray-500 hover:text-gray-900 dark:hover:text-white"
+              className="dark:hover: text-gray-500 hover:text-gray-900"
             >
               <svg
-                className="w-4 h-4"
+                className="h-4 w-4"
                 aria-hidden="true"
                 xmlns="http://www.w3.org/2000/svg"
                 fill="currentColor"
@@ -98,10 +98,10 @@ const Footer = () => {
             </a>
             <a
               href="#"
-              className="text-gray-500 hover:text-gray-900 dark:hover:text-white"
+              className="dark:hover: text-gray-500 hover:text-gray-900"
             >
               <svg
-                className="w-4 h-4"
+                className="h-4 w-4"
                 aria-hidden="true"
                 xmlns="http://www.w3.org/2000/svg"
                 fill="currentColor"
@@ -117,10 +117,10 @@ const Footer = () => {
             </a>
             <a
               href="#"
-              className="text-gray-500 hover:text-gray-900 dark:hover:text-white"
+              className="dark:hover: text-gray-500 hover:text-gray-900"
             >
               <svg
-                className="w-4 h-4"
+                className="h-4 w-4"
                 aria-hidden="true"
                 xmlns="http://www.w3.org/2000/svg"
                 fill="currentColor"
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index 778211b..86a5bdf 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -23,12 +23,12 @@ const Modal = ({ children }: { children: ReactNode }) => {
   return (
     <div
       ref={overlay}
-      className="fixed bottom-0 left-0 right-0 top-0 z-10 mx-auto bg-black/80"
+      className="fixed bottom-0 left-0 right-0 top-0 z-[99] mx-auto bg-black/80"
       onClick={handleClick}
     >
       <div
         ref={wrapper}
-        className="absolute bottom-0 flex h-[90%] w-full flex-col items-center justify-start overflow-auto rounded-t-3xl bg-white px-8 pb-72 pt-14 lg:px-40"
+        className="absolute bottom-0 flex h-[90%] w-full flex-col items-center justify-start overflow-auto rounded-t-3xl bg-foreground px-8 pb-72 pt-14 text-text lg:px-40"
       >
         <button
           type="button"
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 1944ca7..b656194 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -3,11 +3,10 @@ import {
   Bars3Icon,
   BellIcon,
   CodeBracketIcon,
-  PlusIcon,
   XMarkIcon,
 } from '@heroicons/react/24/outline';
-import { useLocation, useNavigate } from 'react-router-dom';
-import { UserButton } from '@clerk/clerk-react';
+import { useLocation } from 'react-router-dom';
+import { UserButton, useUser } from '@clerk/clerk-react';
 
 const navigation = [
   { name: 'Home', href: '/' },
@@ -23,20 +22,20 @@ function classNames({ classes = [] }: { classes?: string[] } = {}) {
 
 const Navbar = () => {
   const { pathname } = useLocation();
-  const navigate = useNavigate();
+  const { isSignedIn, user } = useUser();
 
   const isActive = (href: string) => href === pathname;
   return (
     <Disclosure
       as="nav"
-      className="fixed left-0 right-0 top-0 z-20 h-16 border-b border-slate-400 bg-white"
+      className="fixed left-0 right-0 top-0 z-20 h-16 bg-foreground text-text"
     >
       {({ open }) => (
         <>
-          <div className="xPadding">
+          <div className="px-4">
             <div className="relative flex h-16 items-center justify-between">
               <div className="flex items-center">
-                <Disclosure.Button className="inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white lg:hidden">
+                <Disclosure.Button className="inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white md:hidden">
                   <span className="sr-only">Open main menu</span>
                   {open ? (
                     <XMarkIcon className="block h-6 w-6" aria-hidden="true" />
@@ -44,20 +43,12 @@ const Navbar = () => {
                     <Bars3Icon className="block h-6 w-6" aria-hidden="true" />
                   )}
                 </Disclosure.Button>
-                <div className="text-primary-color flex flex-shrink-0 items-center">
+                <div className="flex flex-shrink-0 items-center text-primary">
                   <CodeBracketIcon className="h-10 w-10 " />
-                  <h1 className="text-2xl font-bold">Snippit</h1>
+                  <h1 className="text-2xl font-bold text-primary">Snippit</h1>
                 </div>
               </div>
               <div className="flexStart inset-y-0 right-0 flex items-center gap-3 pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
-                <button
-                  type="button"
-                  onClick={() => navigate('/create-snippet')}
-                  className="inline-flex items-center rounded-md border border-transparent bg-primary px-4 py-2 font-medium text-white shadow-sm hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2"
-                >
-                  <PlusIcon className="mr-2 h-6 w-6" />
-                  Create Snippet
-                </button>
                 <button
                   type="button"
                   className="rounded-full p-1 text-gray-400 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800"
@@ -65,12 +56,26 @@ const Navbar = () => {
                   <span className="sr-only">View notifications</span>
                   <BellIcon className="h-6 w-6" aria-hidden="true" />
                 </button>
-                <UserButton afterSignOutUrl="/" />
+                <div className="flex gap-1">
+                  <UserButton afterSignOutUrl="/" />
+                  <div className="hidden flex-col md:flex">
+                    {isSignedIn && (
+                      <>
+                        <p className="font-medium capitalize">
+                          {user?.fullName}
+                        </p>
+                        <p className="text-xs text-text/50">
+                          {user?.primaryEmailAddress?.toString()}
+                        </p>
+                      </>
+                    )}
+                  </div>
+                </div>
               </div>
             </div>
           </div>
 
-          <Disclosure.Panel className="bg-white shadow-sm lg:hidden">
+          <Disclosure.Panel className="bg-foreground text-text shadow-sm md:hidden">
             <div className="space-y-1 px-2 pb-3 pt-2">
               {navigation.map((item) => (
                 <Disclosure.Button
@@ -80,8 +85,8 @@ const Navbar = () => {
                   className={classNames({
                     classes: [
                       isActive(item.href)
-                        ? 'bg-accent-color text-white'
-                        : 'hover:bg-secondary-color text-gray-500 hover:text-white',
+                        ? 'bg-secondary '
+                        : 'text-gray-500 hover:bg-secondary',
                       'block rounded-md px-3 py-2 text-base font-medium',
                     ],
                   })}
diff --git a/src/components/ProfileMenu.tsx b/src/components/ProfileMenu.tsx
deleted file mode 100644
index 447995e..0000000
--- a/src/components/ProfileMenu.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import { Menu, Transition } from '@headlessui/react';
-import { Fragment } from 'react';
-import { currentUser } from '../constants/sample';
-
-function classNames({ classes = [] }: { classes?: string[] } = {}) {
-  return classes.filter(Boolean).join(' ');
-}
-
-const ProfileMenu = () => {
-  return (
-    <Menu as="div" className="relative z-10">
-      <Menu.Button className="flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
-        <span className="sr-only">Open user menu</span>
-        <img
-          className="h-10 w-10 rounded-full"
-          src={currentUser.avatar_url}
-          alt=""
-        />
-      </Menu.Button>
-      <Transition
-        as={Fragment}
-        enter="transition ease-out duration-100"
-        enterFrom="transform opacity-0 scale-95"
-        enterTo="transform opacity-100 scale-100"
-        leave="transition ease-in duration-75"
-        leaveFrom="transform opacity-100 scale-100"
-        leaveTo="transform opacity-0 scale-95"
-      >
-        <Menu.Items className="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-          <div className="flex flex-col items-center gap-y-4">
-            <img
-              src={currentUser.avatar_url}
-              className="h-20 w-20 rounded-full"
-              alt="profile"
-            />
-            <p className="font-semibold">{`${currentUser.firstName} ${currentUser.lastName}`}</p>
-          </div>
-
-          <Menu.Item>
-            {({ active }) => (
-              <a
-                href="#"
-                className={classNames({
-                  classes: [
-                    active ? 'bg-gray-100' : '',
-                    'block px-4 py-2 text-sm text-gray-700',
-                  ],
-                })}
-              >
-                Your Profile
-              </a>
-            )}
-          </Menu.Item>
-          <Menu.Item>
-            {({ active }) => (
-              <a
-                href="#"
-                className={classNames({
-                  classes: [
-                    active ? 'bg-gray-100' : '',
-                    'block px-4 py-2 text-sm text-gray-700',
-                  ],
-                })}
-              >
-                Settings
-              </a>
-            )}
-          </Menu.Item>
-          <Menu.Item>
-            {({ active }) => (
-              <a
-                href="#"
-                className={classNames({
-                  classes: [
-                    active ? 'bg-gray-100' : '',
-                    'block px-4 py-2 text-sm text-gray-700',
-                  ],
-                })}
-              >
-                Sign out
-              </a>
-            )}
-          </Menu.Item>
-        </Menu.Items>
-      </Transition>
-    </Menu>
-  );
-};
-
-export default ProfileMenu;
diff --git a/src/components/SelectBox.tsx b/src/components/SelectBox.tsx
index 9a7a852..f8f0427 100644
--- a/src/components/SelectBox.tsx
+++ b/src/components/SelectBox.tsx
@@ -74,7 +74,7 @@ const SelectBox = ({
             value={option}
             className={({ active }) =>
               `${
-                active ? 'bg-primary text-white' : 'text-gray-900'
+                active ? 'bg-primary ' : 'text-gray-900'
               } relative cursor-pointer select-none px-4 py-2`
             }
             >
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 2dbecf6..5e09ac0 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -1,26 +1,26 @@
 import {
-  HomeIcon,
+  Squares2X2Icon,
   BookmarkIcon,
   InboxIcon,
   UsersIcon,
   PencilSquareIcon,
   ArrowLeftCircleIcon,
   DocumentIcon,
-} from '@heroicons/react/24/solid';
+} from '@heroicons/react/24/outline';
 import { NavLink } from 'react-router-dom';
 import TagsDropDown from '../features/tags/TagsDropDown';
 
 const Sidebar = () => {
   return (
     <div
-      className="z-20 mx-auto hidden h-full max-h-[90%] w-full overflow-hidden rounded-md border-r shadow-md lg:col-span-2 lg:block xl:w-[70%]"
+      className="fixed inset-y-0 bottom-0 left-0 top-16 z-20 hidden w-[250px] flex-col justify-between bg-foreground md:flex"
       aria-label="Sidebar"
     >
       <div className="h-full overflow-y-auto bg-white px-3 py-4">
         <ul className="space-y-2 font-medium">
           <li>
             <NavLink to="/" className="sideMenuItem">
-              <HomeIcon className="h-6 w-6" />
+              <Squares2X2Icon className="h-6 w-6" />
               <span className="ml-3">My Feed</span>
             </NavLink>
           </li>
diff --git a/src/features/snippets/SnippetCard.tsx b/src/features/snippets/SnippetCard.tsx
index a0214fc..8474f60 100644
--- a/src/features/snippets/SnippetCard.tsx
+++ b/src/features/snippets/SnippetCard.tsx
@@ -23,9 +23,9 @@ const SnippetCard = (props: Snippet) => {
   }, []);
 
   return (
-    <div className="flex w-full cursor-pointer flex-col gap-3 rounded-md border bg-white p-5 hover:shadow-md">
+    <div className="flex w-full max-w-[700px] flex-col gap-3 rounded-xl border bg-foreground p-4 text-text">
       <h3 className="text-2xl font-semibold">{props.title}</h3>
-      <div className="flex gap-5">
+      <div className="flex gap-2">
         <div>
           <img
             src={props.user?.avatar_url}
diff --git a/src/features/snippets/SnippetList.tsx b/src/features/snippets/SnippetList.tsx
index beb6a14..53a3e69 100644
--- a/src/features/snippets/SnippetList.tsx
+++ b/src/features/snippets/SnippetList.tsx
@@ -3,7 +3,7 @@ import SnippetCard from './SnippetCard';
 
 const SnippetList = ({ snippets }: { snippets: Snippet[] }) => {
   return (
-    <div className="mx-auto flex w-full flex-col gap-5 py-10 lg:w-[90%]">
+    <div className="flex w-full flex-col gap-2 py-10 md:gap-5">
       {snippets.map((item) => (
         <div className="p-2" key={item.id}>
           <SnippetCard {...item} />
diff --git a/src/features/tags/TagsDropDown.tsx b/src/features/tags/TagsDropDown.tsx
index 433444a..6cdc4ee 100644
--- a/src/features/tags/TagsDropDown.tsx
+++ b/src/features/tags/TagsDropDown.tsx
@@ -1,5 +1,5 @@
 import { Disclosure } from '@headlessui/react';
-import { ChevronDownIcon, TagIcon } from '@heroicons/react/24/solid';
+import { ChevronDownIcon, HashtagIcon } from '@heroicons/react/24/outline';
 import { useAppDispatch, useAppSelector } from '../../app/hooks';
 import { useEffect } from 'react';
 import { Status } from '../../constants';
@@ -20,10 +20,10 @@ const TagsDropDown = () => {
     <Disclosure>
       <Disclosure.Button
         type="button"
-        className="group flex w-full items-center rounded-lg p-2 text-base text-gray-500 transition hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700"
+        className="dark: group flex w-full items-center rounded-lg p-2 text-base text-gray-500 transition hover:bg-gray-100 dark:hover:bg-gray-700"
         aria-controls="dropdown-tags"
       >
-        <TagIcon className="h-6 w-6" />
+        <HashtagIcon className="h-6 w-6" />
         <span className="ml-3 flex-1 whitespace-nowrap text-left">
           Browse Tags
         </span>
diff --git a/src/pages/About.tsx b/src/pages/About.tsx
index ae579d7..18c0915 100644
--- a/src/pages/About.tsx
+++ b/src/pages/About.tsx
@@ -22,7 +22,7 @@ const About = () => {
 
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
         <div className="mx-auto max-w-2xl lg:mx-0">
-          <h2 className="text-4xl font-bold tracking-tight text-white sm:text-6xl">
+          <h2 className="text-4xl font-bold tracking-tight  sm:text-6xl">
             Welcome to Snippit!
           </h2>
           <p className="mt-6 text-lg leading-8 text-gray-300">
@@ -41,7 +41,7 @@ const About = () => {
           </p>
         </div>
         <div className="mx-auto mt-10 max-w-2xl lg:mx-0 lg:max-w-none">
-          <div className="grid grid-cols-1 gap-x-8 gap-y-6 text-base font-semibold leading-7 text-white sm:grid-cols-2 md:flex lg:gap-x-10">
+          <div className="grid grid-cols-1 gap-x-8 gap-y-6 text-base font-semibold leading-7  sm:grid-cols-2 md:flex lg:gap-x-10">
             {links.map((link) => (
               <a key={link.name} href={link.href}>
                 {link.name} <span aria-hidden="true">&rarr;</span>
@@ -54,7 +54,7 @@ const About = () => {
                 <dt className="text-base leading-7 text-gray-300">
                   {stat.name}
                 </dt>
-                <dd className="text-2xl font-bold leading-9 tracking-tight text-white">
+                <dd className="text-2xl font-bold leading-9 tracking-tight ">
                   {stat.value}
                 </dd>
               </div>
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 7565d70..f2b585e 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -25,7 +25,7 @@ const Home = () => {
           <div className="mt-10 flex items-center justify-center gap-x-6">
             <a
               href="/sign-in"
-              className="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+              className="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold  shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
             >
               Get started
             </a>
diff --git a/src/pages/PageNotFound.tsx b/src/pages/PageNotFound.tsx
index 7373ff8..ff0616e 100644
--- a/src/pages/PageNotFound.tsx
+++ b/src/pages/PageNotFound.tsx
@@ -12,7 +12,7 @@ const PageNotFound = () => {
         <div className="mt-10 flex items-center justify-center gap-x-6">
           <a
             href="/"
-            className="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+            className="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold  shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
           >
             Go back home
           </a>
diff --git a/src/pages/SnippetsFeed.tsx b/src/pages/SnippetsFeed.tsx
index 0bbdebd..4ad0546 100644
--- a/src/pages/SnippetsFeed.tsx
+++ b/src/pages/SnippetsFeed.tsx
@@ -4,11 +4,13 @@ import { Status } from '../constants';
 import { getAllSnippets } from '../features/snippets/snippetsSlice';
 import SnippetList from '../features/snippets/SnippetList';
 import Loading from '../components/Loading';
-import { Cog6ToothIcon } from '@heroicons/react/24/solid';
+import { PlusIcon } from '@heroicons/react/24/outline';
+import { useNavigate } from 'react-router-dom';
 
 const SnippetsFeed = () => {
   const snippets = useAppSelector((state) => state.snippets);
   const dispatch = useAppDispatch();
+  const navigate = useNavigate();
 
   useEffect(() => {
     if (snippets.status === Status.Idle) {
@@ -18,7 +20,7 @@ const SnippetsFeed = () => {
 
   if (snippets.status === Status.Loading) {
     return (
-      <div className="grid min-h-screen w-full place-items-center bg-white px-6 py-24 sm:py-32 lg:col-span-4 lg:px-8">
+      <div className="mt-16 grid min-h-screen w-full place-items-center bg-foreground px-6 py-24 sm:py-32 md:ml-[250px] lg:col-span-4 lg:px-8">
         <Loading
           title="Fetching data from API"
           message="Please be patient. Sometimes it only takes ETERNITY! 😉"
@@ -29,22 +31,26 @@ const SnippetsFeed = () => {
 
   if (snippets.status === Status.Error) {
     return (
-      <div className="flex min-h-screen w-full flex-col gap-5 bg-white py-10 text-center lg:col-span-4">
-        <h2 className="text-2xl font-semibold">Oops! Something went wrong😯</h2>
+      <div className="mt-16 flex min-h-screen w-full flex-col gap-5 bg-foreground py-10 text-center md:ml-[250px] lg:col-span-4">
+        <h2 className="text-2xl font-semibold">
+          Oops! Something went wrong 😯
+        </h2>
         <p className="text-lg font-medium text-rose-500">{snippets.error}</p>
       </div>
     );
   }
 
   return (
-    <div className="col-span-1 flex h-screen flex-col gap-2 overflow-y-auto p-4 pb-8 lg:col-span-6 xl:col-span-4">
+    <div className="mt-16 flex max-w-full flex-col gap-2 p-1 pb-8 md:ml-[250px] md:p-4">
       <header className="flex justify-between gap-1">
-        <h2 className="text-2xl font-semibold">Your Feed</h2>
+        <h2 className="text-2xl font-semibold">Snippets Feed</h2>
         <button
           type="button"
-          className="flex items-center justify-center rounded-md p-1 transition-all hover:scale-105 hover:bg-gray-300"
+          onClick={() => navigate('/create-snippet')}
+          className="inline-flex items-center rounded-md border border-transparent bg-primary px-4 py-2 font-medium text-white  shadow-sm hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2"
         >
-          <Cog6ToothIcon className="h-6 w-6" />
+          <PlusIcon className="mr-2 h-6 w-6" />
+          Create Snippet
         </button>
       </header>
       <SnippetList snippets={snippets.data} />
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 8201baa..2529b25 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -12,7 +12,6 @@
   html {
     @apply bg-background text-foreground;
     height: 100%;
-    overflow: hidden;
     font-family: 'Nunito Sans', sans-serif;
   }
 }
@@ -73,7 +72,7 @@
   }
 
   .submitBtn {
-    @apply w-full max-w-[300px] rounded-xl bg-primary p-4 text-lg font-bold text-white shadow-sm hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2;
+    @apply w-full max-w-[300px] rounded-xl bg-primary p-4 text-lg font-bold  shadow-sm hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2;
   }
 }
 
@@ -88,7 +87,7 @@
 }
 
 .sideMenuItem {
-  @apply flex items-center rounded-lg p-2 text-gray-500 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700;
+  @apply flex items-center rounded-lg p-2 text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700;
 }
 
 .sideMenuItem.active {
@@ -96,5 +95,5 @@
 }
 
 .sideDropItem {
-  @apply flex w-full items-center rounded-lg p-2 pl-11 text-primary transition duration-75 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700;
+  @apply flex w-full items-center rounded-lg p-2 pl-11 text-primary transition duration-75 hover:bg-gray-100 dark:hover:bg-gray-700;
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index d5fb32f..76a1e25 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -20,13 +20,14 @@ module.exports = {
         border: '#ECEFF1',
         input: '#E0E0E0',
         ring: '#2196F3',
-        background: '#eaecf5',
-        foreground: '#333333',
-        primary: '#2196F3',
-        secondary: '#00C853',
-        destructive: '#FF5722',
+        text: '#11142D',
+        background: '#f4f4f4',
+        foreground: '#fff',
+        primary: '#475BE8',
+        secondary: '#CFC8FF',
+        destructive: '#FE6D8E',
         muted: '#B0BEC5',
-        accent: '#FFC107',
+        accent: '#2ED480',
       },
     },
   },