chore: astro spinner

src/components/Login/AccountNavigation.astro

@@ -8,7 +8,7 @@ import AccountDropdown from './AccountDropdown.astro';
     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' />
+    <Spinner class='text-white' />
   </div>
 
   <AccountDropdown />

src/components/Login/GithubLogin.astro

@@ -7,7 +7,7 @@ import Spinner from '../Spinner.astro';
   class='inline-flex h-10 w-full items-center justify-center rounded border border-slate-300 bg-white p-2 text-sm font-medium text-black outline-none transition duration-150 ease-in-out focus:ring-2 focus:ring-[#333] focus:ring-offset-1 disabled:opacity-60'
   id='github-login-button'
 >
-  <Spinner className='text-black hidden' id='github-login-spinner' />
+  <Spinner class='hidden text-black' id='github-login-spinner' />
   <div class='flex items-center' data-github-text>
     <Icon icon='github' />
     <span class='ml-2'>Continue with Github</span>

src/components/Login/GoogleLogin.astro

@@ -7,7 +7,7 @@ import Spinner from '../Spinner.astro';
   class='inline-flex h-10 w-full items-center justify-center rounded border border-slate-300 bg-white p-2 text-sm font-medium text-black outline-none transition duration-150 ease-in-out focus:ring-2 focus:ring-[#333] focus:ring-offset-1 disabled:opacity-60'
   id='google-login-button'
 >
-  <Spinner className='text-black hidden' data-google-login-spinner />
+  <Spinner class='text-black hidden' data-google-login-spinner />
   <div class='flex items-center' data-google-text>
     <Icon icon='google' />
     <span class='ml-2'>Continue with Google</span>

src/components/Spinner.astro

@@ -1,17 +1,15 @@
 ---
-const { className = '', ...rest } = Astro.props;
+const { ...props } = Astro.props;
 
-export interface Props {
-  className?: string;
-}
+export type Props = astroHTML.JSX.HTMLAttributes & {};
 ---
 
 <svg
-  class={`animate-spin h-5 w-5 ${className}`}
   xmlns='http://www.w3.org/2000/svg'
   fill='none'
   viewBox='0 0 24 24'
-  {...rest}
+  class:list={[`animate-spin h-5 w-5`, props.class]}
+  {...props}
 >
   <circle
     class='stroke-[4px] opacity-25'

src/pages/verify-account.astro

@@ -9,7 +9,7 @@ import SettingLayout from '../layouts/SettingLayout.astro';
       <h2 class='mb-6 text-3xl font-bold sm:text-center sm:text-4xl'>
         Verifying account
       </h2>
-      <Spinner data-verification-spinner className='!h-10 !w-10' />
+      <Spinner data-verification-spinner class='!h-10 !w-10' />
 
       <p
         class='hidden text-center text-sm text-red-500'