Trying to get db schema

src/components/context/theme.tsx

@@ -20,7 +20,12 @@ export const ThemeProvider = ({
   return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
 };
 
-export const ThemeToggle = () => {
+export interface ThemeToggleProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  size?: number;
+}
+
+export const ThemeToggle = ({ size = 1, ...props }: ThemeToggleProps) => {
   const { setTheme, resolvedTheme } = useTheme();
   const [mounted, setMounted] = React.useState(false);
 
@@ -30,8 +35,8 @@ export const ThemeToggle = () => {
 
   if (!mounted) {
     return (
-      <Button variant='outline' size='icon'>
-        <span className='h-[1.2rem] w-[1.2rem]' />
+      <Button variant='outline' size='icon' {...props}>
+        <span style={{ height: `${size}rem`, width: `${size}rem` }} />
       </Button>
     );
   }
@@ -42,14 +47,14 @@ export const ThemeToggle = () => {
   };
 
   return (
-    <Button variant='outline' size='icon' onClick={toggleTheme}>
+    <Button variant='outline' size='icon' onClick={toggleTheme} {...props}>
       <Sun
-        className='h-[1.2rem] w-[1.2rem] rotate-0 scale-100
-        transition-all dark:-rotate-90 dark:scale-0'
+        style={{ height: `${size}rem`, width: `${size}rem` }}
+        className='rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0'
       />
       <Moon
-        className='absolute h-[1.2rem] w-[1.2rem] rotate-90
-        scale-0 transition-all dark:rotate-0 dark:scale-100'
+        style={{ height: `${size}rem`, width: `${size}rem` }}
+        className='absolute rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100'
       />
       <span className='sr-only'>Toggle theme</span>
     </Button>

src/components/footer/index.tsx

@@ -0,0 +1,20 @@
+'use server';
+
+const FooterTest = () => {
+  return (
+    <footer className='w-full flex items-center justify-center border-t mx-auto text-center text-xs gap-8 py-16'>
+      <p>
+        Powered by{' '}
+        <a
+          href='https://supabase.com/?utm_source=create-next-app&utm_medium=template&utm_term=nextjs'
+          target='_blank'
+          className='font-bold hover:underline'
+          rel='noreferrer'
+        >
+          Supabase
+        </a>
+      </p>
+    </footer>
+  );
+};
+export default FooterTest;

src/components/navigation/auth.tsx

@@ -22,7 +22,7 @@ const NavigationAuth = async () => {
     </div>
   ) : (
     <div className='flex gap-2'>
-      <Button asChild size='sm' variant={'outline'}>
+      <Button asChild size='default' variant={'outline'}>
         <Link href='/sign-in'>Sign in</Link>
       </Button>
       <Button asChild size='sm' variant={'default'}>

src/components/navigation/index.tsx

@@ -3,6 +3,7 @@
 import Link from 'next/link';
 import { Button } from '@/components/ui';
 import NavigationAuth from '@/components/navigation/auth';
+import { ThemeToggle } from '@/components/context/theme';
 
 const Navigation = () => {
   return (
@@ -24,7 +25,10 @@ const Navigation = () => {
             </Button>
           </div>
         </div>
-        <NavigationAuth />
+        <div className='flex items-center gap-2'>
+          <ThemeToggle />
+          <NavigationAuth />
+        </div>
       </div>
     </nav>
   );

src/components/ui/button.tsx

@@ -26,6 +26,7 @@ const buttonVariants = cva(
         sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
         lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
         icon: 'size-9',
+        smicon: 'size-6',
       },
     },
     defaultVariants: {