Update website dependencies to latest versions

website/.prettierignore

@@ -1 +1,2 @@
 .next
+pnpm-lock.yaml

website/components/access-tokens/AccessTokenCard.tsx

@@ -1,7 +1,7 @@
 import dayjs from 'dayjs'
 import { toast } from 'react-hot-toast'
 import { useDeleteAccessTokenMutation } from '~/data/access-tokens/delete-access-token'
-import { Button } from '~/components/ui/Button'
+import { Button } from '~/components/ui/button'
 
 export interface ApiTokenCardProps {
   tokenId: string

website/components/forms/FormButton.tsx

@@ -1,7 +1,7 @@
 import { forwardRef } from 'react'
 import { useFormState } from 'react-final-form'
 import { cn } from '~/lib/utils'
-import { Button, ButtonProps } from '~/components/ui/Button'
+import { Button, ButtonProps } from '~/components/ui/button'
 
 export interface FormButtonProps extends ButtonProps {}
 

website/components/forms/FormInput.tsx

@@ -1,7 +1,7 @@
 import { ComponentPropsWithoutRef, forwardRef, PropsWithoutRef } from 'react'
 import { useField, UseFieldConfig } from 'react-final-form'
 import { Input } from '~/components/ui/input'
-import Label from '../ui/Label'
+import { Label } from '../ui/label'
 import { cn } from '~/lib/utils'
 
 export interface FormInputProps

website/components/layouts/Footer.tsx

@@ -1,22 +1,26 @@
 import Link from 'next/link'
 
-export const links = [
-  { title: ` © Supabase`, url: 'https://supabase.com/' },
-  { title: 'FAQs', url: '/faq' },
+export const rightLinks = [
   { title: 'Open Source', url: 'https://supabase.com/open-source' },
-  { title: 'Privacy Settings', url: 'https://supabase.com/privacy' },
+  { title: 'Privacy', url: 'https://supabase.com/privacy' },
+  { title: 'GitHub', url: 'https://github.com/supabase/dbdev/' },
 ]
 
 const Footer = () => (
   <footer role="menu" className="container w-full flex justify-between">
     <div className="border-t w-full py-4">
-      <ul className="grid md:flex items-center gap-4 text-xs md:text-sm">
-        {links.map((link, index) => (
-          <li key={index}>
-            <Link href={link.url}>{link.title}</Link>
-          </li>
-        ))}
-      </ul>
+      <div className="flex items-center justify-between">
+        <div className="text-xs md:text-sm">
+          <Link href="https://supabase.com/">© Supabase, Inc.</Link>
+        </div>
+        <ul className="flex items-center gap-4 text-xs md:text-sm">
+          {rightLinks.map((link, index) => (
+            <li key={index}>
+              <Link href={link.url}>{link.title}</Link>
+            </li>
+          ))}
+        </ul>
+      </div>
     </div>
   </footer>
 )

website/components/layouts/Navbar.tsx

@@ -3,21 +3,22 @@ import { useRouter } from 'next/router'
 import { useCallback, useMemo } from 'react'
 import { toast } from 'react-hot-toast'
 import Search from '~/components/search/Search'
-import { Avatar, AvatarFallback, AvatarImage } from '~/components/ui/Avatar'
-import DropdownMenu, {
+import { Avatar, AvatarFallback, AvatarImage } from '~/components/ui/avatar'
+import {
+  DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from '~/components/ui/DropdownMenu'
+} from '~/components/ui/dropdown-menu'
 import { useSignOutMutation } from '~/data/auth/sign-out-mutation'
 import { useUsersOrganizationsQuery } from '~/data/organizations/users-organizations-query'
 import { useUser } from '~/lib/auth'
 import { getAvatarUrl } from '~/lib/avatars'
 import { useTheme } from '../themes/ThemeContext'
 import ThemeSwitcher from '../themes/ThemeSwitcher'
-import { Button } from '~/components/ui/Button'
+import { Button } from '~/components/ui/button'
 
 const Navbar = () => {
   const router = useRouter()
@@ -66,11 +67,15 @@ const Navbar = () => {
 
   const AvatarWrapper = ({ size = 'sm' }: { size?: 'sm' | 'md' }) =>
     user?.user_metadata.avatar_path === undefined ? (
-      <div className="flex items-center justify-center w-6 h-6 text-gray-600 bg-gray-300 border-gray-400 rounded-full border-1 dark:border-slate-400 dark:bg-slate-500 dark:text-white">
+      <div
+        className={`flex items-center justify-center text-gray-600 bg-gray-300 border-gray-400 rounded-full border-1 dark:border-slate-400 dark:bg-slate-500 dark:text-white ${size === 'sm' ? 'w-6 h-6' : 'w-10 h-10'}`}
+      >
         {displayName[0].toUpperCase()}
       </div>
     ) : (
-      <Avatar size={size} className="border dark:border-slate-700">
+      <Avatar
+        className={`border dark:border-slate-700 ${size === 'sm' ? 'w-6 h-6' : 'w-10 h-10'}`}
+      >
         <AvatarImage src={avatarUrl} alt={avatarName} />
         <AvatarFallback>{avatarFallback}</AvatarFallback>
       </Avatar>

website/components/search/Search.tsx

@@ -3,7 +3,7 @@ import { useRouter } from 'next/router'
 import { useEffect, useRef, useState } from 'react'
 import { usePackagesSearchQuery } from '~/data/packages/packages-search-query'
 import { useDebounce } from '~/lib/utils'
-import Spinner from '../ui/Spinner'
+import Spinner from '../ui/spinner'
 import SearchInput from './SearchInput'
 import SearchPackageRow from './SearchPackageRow'