feat: reorganize files and implement ui and sidebar

components/user-menu.tsx

@@ -1,29 +1,36 @@
 'use client'
 
-import { Button } from '@/components/ui/button'
+import * as React from 'react'
+
 import { signIn } from '@auth/nextjs/client'
 import { type Session } from '@auth/nextjs/types'
+import { Loader2Icon } from 'lucide-react'
+
+import { Button } from '@/components/ui/button'
 
 export interface UserMenuProps {
-  session: Session
+  session?: Session
 }
 
 export function UserMenu({ session }: UserMenuProps) {
-  if (!session) {
+  const [isLoading, setIsLoading] = React.useState(false)
+
+  if (!session?.user) {
     return (
-      <Button variant="ghost" size="sm" onClick={() => signIn('github')}>
+      <Button
+        variant="ghost"
+        size="sm"
+        onClick={() => {
+          setIsLoading(true)
+          signIn('github')
+        }}
+        disabled={isLoading}
+      >
+        {isLoading && <Loader2Icon className="animate-spin w-4 h-4 mr-2" />}
         Login
       </Button>
     )
   }
 
-  return (
-    <div className="flex items-center justify-between text-sm">
-      {session?.user && (
-        <Button variant="link" size="sm">
-          {session.user?.name}
-        </Button>
-      )}
-    </div>
-  )
+  return <p className="text-sm font-medium">Logged in as {session.user.name}</p>
 }