chore: logout vs login

src/components/Login/account-nav.tsx

@@ -1,4 +1,6 @@
+import Cookies from 'js-cookie';
 import { useAuth } from '../../hooks/use-auth';
+import { TOKEN_COOKIE_NAME } from '../../lib/utils';
 
 export default function AccountNavigation() {
   const { user, isLoading } = useAuth();
@@ -7,11 +9,56 @@ export default function AccountNavigation() {
 
   return (
     <div>
-      {user ? (
-        <div>Authenticated: {user?.name}</div>
+      {isLoading ? (
+        <div className="flex h-10 w-32 items-center justify-center rounded-full bg-gradient-to-r from-blue-500 to-blue-700 py-2 px-4 text-sm text-white hover:from-blue-500 hover:to-blue-600">
+          <Spinner />
+        </div>
       ) : (
-        <div>Not Authenticated</div>
+        <>
+          {user ? (
+            <button
+              className="flex h-10 w-32 items-center justify-center rounded-full bg-gradient-to-r from-blue-500 to-blue-700 py-2 px-4 text-sm font-medium text-white hover:from-blue-500 hover:to-blue-600"
+              onClick={() => {
+                Cookies.remove(TOKEN_COOKIE_NAME);
+                window.location.reload();
+              }}
+            >
+              <span className="mr-2">Logout</span>
+            </button>
+          ) : (
+            <a
+              className="flex h-10 w-32 cursor-pointer items-center justify-center rounded-full bg-gradient-to-r from-blue-500 to-blue-700 py-2 px-4 text-sm font-medium text-white hover:from-blue-500 hover:to-blue-600"
+              href="/signup"
+            >
+              <span className="mr-2">Login</span>
+            </a>
+          )}
+        </>
       )}
     </div>
   );
 }
+
+function Spinner() {
+  return (
+    <svg
+      className="h-5 w-5 animate-spin text-white"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <circle
+        className="stroke-[4px] opacity-25"
+        cx={12}
+        cy={12}
+        r={10}
+        stroke="currentColor"
+      />
+      <path
+        className="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      />
+    </svg>
+  );
+}

src/components/Navigation.astro

@@ -11,7 +11,7 @@ import AccountNavigation from './Login/account-nav';
     </a>
 
     <!-- Desktop navigation items -->
-    <ul class='hidden space-x-5 sm:flex'>
+    <ul class='hidden space-x-5 sm:flex sm:items-center'>
       <li>
         <a href='/roadmaps' class='text-gray-400 hover:text-white'>Roadmaps</a>
       </li>
@@ -26,14 +26,6 @@ import AccountNavigation from './Login/account-nav';
       <li>
         <a href='/videos' class='text-gray-400 hover:text-white'>Videos</a>
       </li>
-      <li>
-        <a
-          class='font-regular rounded-full bg-gradient-to-r from-blue-500 to-blue-700 py-2 px-4 text-sm text-white hover:from-blue-500 hover:to-blue-600'
-          href='/signup'
-        >
-          Subscribe
-        </a>
-      </li>
       <li>
         <AccountNavigation client:load />
       </li>