chore: preact to astro comp

src/components/Login/AccountDropdown.astro

@@ -0,0 +1,51 @@
+<div class='relative block hidden' id='account-dropdown'>
+  <button
+    class='flex h-8 w-24 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'
+    type='button'
+    data-account-button
+  >
+    <span>Account</span>
+  </button>
+
+  <div
+    class='absolute right-0 z-10 mt-2 hidden w-48 rounded-md bg-slate-800 py-1 shadow-xl'
+  >
+    <ul>
+      <li class='px-1'>
+        <a
+          href='/profile'
+          class='block rounded px-4 py-2 text-sm font-medium text-slate-100 hover:bg-slate-700'
+        >
+          Your Profile
+        </a>
+      </li>
+      <li class='px-1'>
+        <button
+          class='block w-full rounded px-4 py-2 text-left text-sm font-medium text-slate-100 hover:bg-slate-700'
+          type='button'
+          data-logout-button
+        >
+          Logout
+        </button>
+      </li>
+    </ul>
+  </div>
+</div>
+
+<script>
+  import Cookies from 'js-cookie';
+  import { TOKEN_COOKIE_NAME } from '../../lib/utils';
+
+  const accountButton = document.querySelector('[data-account-button]');
+  const accountMenu = accountButton?.nextElementSibling;
+  const logoutButton = accountMenu?.querySelector('[data-logout-button]');
+
+  accountButton?.addEventListener('click', () => {
+    accountMenu?.classList.toggle('hidden');
+  });
+
+  logoutButton?.addEventListener('click', () => {
+    Cookies.remove(TOKEN_COOKIE_NAME);
+    window.location.reload();
+  });
+</script>

src/components/Login/AccountNavigation.astro

@@ -0,0 +1,40 @@
+---
+import Spinner from '../Spinner.astro';
+import AccountDropdown from './AccountDropdown.astro';
+---
+
+<div>
+  <div
+    class='flex h-8 w-24 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'
+    id='navigation-spinner'
+  >
+    <Spinner className='text-white' />
+  </div>
+
+  <AccountDropdown />
+
+  <a
+    id='register-button'
+    class='hidden flex h-8 w-24 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>Register</span>
+  </a>
+</div>
+
+<script>
+  import Cookies from 'js-cookie';
+  import { TOKEN_COOKIE_NAME } from '../../lib/utils';
+  const spinner = document.getElementById('navigation-spinner');
+  const registerButton = document.getElementById('register-button');
+  const accountDropdown = document.getElementById('account-dropdown');
+  spinner?.classList.add('hidden');
+
+  const token = Cookies.get(TOKEN_COOKIE_NAME);
+  
+  if (token) {
+    accountDropdown?.classList.remove('hidden');
+  } else {
+    registerButton?.classList.remove('hidden');
+  }
+</script>

src/components/Login/account-dropdown.tsx

@@ -1,56 +0,0 @@
-import Cookies from 'js-cookie';
-import { TOKEN_COOKIE_NAME } from '../../lib/utils';
-import { useEffect, useState } from 'preact/hooks';
-
-export default function AccountDropdown() {
-  const [isOpen, setIsOpen] = useState(false);
-
-  useEffect(() => {
-    // If user click outside the dropdown, and dropdown is open then close it.
-    const handleOpen = () => {
-      if (isOpen) setIsOpen(false);
-    };
-
-    document.addEventListener('click', handleOpen);
-    return () => document.removeEventListener('click', handleOpen);
-  }, [isOpen]);
-
-  return (
-    <div className="relative">
-      <button
-        className="flex h-8 w-24 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={() => setIsOpen((p) => !p)}
-      >
-        <span>Account</span>
-      </button>
-
-      <div
-        className={`absolute right-0 z-10 mt-2 w-48 rounded-md bg-slate-800 py-1 shadow-xl ${
-          isOpen ? 'block' : 'hidden'
-        }`}
-      >
-        <ul>
-          <li className="px-1">
-            <a
-              href="/profile"
-              className="block rounded px-4 py-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
-            >
-              Your Profile
-            </a>
-          </li>
-          <li className="px-1">
-            <button
-              className="block w-full rounded px-4 py-2 text-left text-sm font-medium text-slate-100 hover:bg-slate-700"
-              onClick={() => {
-                Cookies.remove(TOKEN_COOKIE_NAME);
-                window.location.reload();
-              }}
-            >
-              Logout
-            </button>
-          </li>
-        </ul>
-      </div>
-    </div>
-  );
-}

src/components/Login/account-nav.tsx

@@ -1,55 +0,0 @@
-import { useAuth } from '../../hooks/use-auth';
-import AccountDropdown from './account-dropdown';
-
-export default function AccountNavigation() {
-  const { user, isLoading } = useAuth();
-
-  console.log('user', user, isLoading);
-
-  return (
-    <div>
-      {isLoading ? (
-        <div className="flex h-8 w-24 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 className="text-white" />
-        </div>
-      ) : (
-        <>
-          {user ? (
-            <AccountDropdown />
-          ) : (
-            <a
-              className="flex h-8 w-24 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>Register</span>
-            </a>
-          )}
-        </>
-      )}
-    </div>
-  );
-}
-
-export function Spinner({ className }: { className?: string }) {
-  return (
-    <svg
-      className={`h-5 w-5 animate-spin ${className}`}
-      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/Login/google-login.tsx

@@ -1,7 +1,6 @@
 import Cookies from 'js-cookie';
 import { useEffect, useState } from 'preact/hooks';
 import { TOKEN_COOKIE_NAME } from '../../lib/utils';
-import { Spinner } from './account-nav';
 
 export default function GoogleLoginButton() {
   const [isLoading, setIsLoading] = useState<boolean>(false);
@@ -65,6 +64,30 @@ export default function GoogleLoginButton() {
   );
 }
 
+function Spinner({ className }: { className?: string }) {
+  return (
+    <svg
+      className={`animate-spin" h-5 w-5 ${className}`}
+      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>
+  );
+}
+
 function GoogleLogo() {
   return (
     <svg

src/components/Navigation.astro

@@ -1,7 +1,6 @@
 ---
 import Icon from './Icon.astro';
-import AccountNavigation from './Login/account-nav';
+import AccountNavigation from './Login/AccountNavigation.astro';
-import AccountNavigationAstro from './Login/account-navigation.astro';
 ---
 
 <div class='bg-slate-900 py-5 text-white sm:py-8'>
@@ -28,8 +27,7 @@ import AccountNavigationAstro from './Login/account-navigation.astro';
         <a href='/videos' class='text-gray-400 hover:text-white'>Videos</a>
       </li>
       <li>
-        <AccountNavigation client:load />
+        <AccountNavigation />
-        <AccountNavigationAstro />
       </li>
     </ul>
 

src/components/Spinner.astro

@@ -0,0 +1,23 @@
+---
+const { className = '', ...rest } = Astro.props;
+---
+
+<svg
+  class={`animate-spin h-5 w-5 ${className}`}
+  xmlns='http://www.w3.org/2000/svg'
+  fill='none'
+  viewBox='0 0 24 24'
+  {...rest}
+>
+  <circle
+    class='stroke-[4px] opacity-25'
+    cx='12'
+    cy='12'
+    r='10'
+    stroke='currentColor'></circle>
+  <path
+    class='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'
+  ></path>
+</svg>

src/icons/google.svg

@@ -0,0 +1,6 @@
+<svg width="90" height="92" viewBox="0 0 90 92" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M90 47.1C90 44 89.7 40.8 89.2 37.8H45.9V55.5H70.7C69.7 61.2 66.4 66.2 61.5 69.4L76.3 80.9C85 72.8 90 61 90 47.1Z" fill="#4280EF"/>
+<path d="M45.9 91.9C58.3 91.9 68.7 87.8 76.3 80.8L61.5 69.4C57.4 72.2 52.1 73.8 45.9 73.8C33.9 73.8 23.8 65.7 20.1 54.9L4.90002 66.6C12.7 82.1 28.5 91.9 45.9 91.9Z" fill="#34A353"/>
+<path d="M20.1 54.8C18.2 49.1 18.2 42.9 20.1 37.2L4.90002 25.4C-1.59998 38.4 -1.59998 53.7 4.90002 66.6L20.1 54.8Z" fill="#F6B704"/>
+<path d="M45.9 18.3C52.4 18.2 58.8 20.7 63.5 25.2L76.6 12C68.3 4.2 57.3 -3.37034e-06 45.9 0.0999966C28.5 0.0999966 12.7 9.9 4.90002 25.4L20.1 37.2C23.8 26.3 33.9 18.3 45.9 18.3Z" fill="#E54335"/>
+</svg>