Add Sidebar

.eslintignore

@@ -54,4 +54,6 @@ Thumbs.db
 .prettierignore
 .eslintignore
 
-.github/
+.github/
+
+components/ui/

actions/auth/login.ts

@@ -32,7 +32,7 @@ export async function login({
 
     return {
       success: true,
-      message: 'Welcome! You are logged in.',
+      message: 'Login successful',
     };
   } catch (error: unknown) {
     if (isRedirectError(error)) {

actions/dashboard/logout.ts

@@ -0,0 +1,27 @@
+'use server';
+
+import { ServerActionResponse } from '@/types/types';
+import { signOut } from '@/auth';
+
+export async function logout(): Promise<ServerActionResponse> {
+  try {
+    await signOut({ redirect: false });
+
+    return {
+      success: true,
+      message: 'Logout successful',
+    };
+  } catch (error: unknown) {
+    if (error instanceof Error) {
+      return {
+        success: false,
+        message: error.message,
+      };
+    }
+
+    return {
+      success: false,
+      message: 'Logout failed',
+    };
+  }
+}

app/auth/layout.tsx

@@ -1,10 +1,11 @@
 import type { Metadata } from 'next';
-import { Text, Flex, Box } from '@radix-ui/themes';
 import { archivoNarrow } from '@/config/fonts';
+import { ThemeToggleButton } from '@/components/ThemeToggleButton';
+import SparklesText from '@/components/ui/sparkles-text';
 
 export const metadata: Metadata = {
-  title: 'Authentication',
-  description: 'Login or sign up to access your account',
+  title: 'Clubspace | Auth',
+  description: 'Clubspace authentication',
 };
 
 export default function AuthLayout({
@@ -13,24 +14,24 @@ export default function AuthLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <Flex justify='center' align='center' minHeight='100vh'>
-      <Box
-        width={{
-          initial: '400px',
-          sm: '500px',
-          lg: '600px',
-        }}
-      >
-        <Flex direction='column' gap='3' mb='6'>
-          <Text size='9' weight='bold' className={archivoNarrow.className}>
-            clubspace.
-          </Text>
-          <Text size='4'>
-            One platform, uniting campus clubs, creating community!
-          </Text>
-        </Flex>
+    <div className='flex flex-col items-center justify-center min-h-screen p-4'>
+      <div className='flex flex-col gap-8 w-full max-w-[600px]'>
+        <div className='flex flex-col gap-3'>
+          <div className='flex items-center justify-between'>
+            <SparklesText
+              text='Clubspace'
+              sparklesCount={2}
+              className={
+                archivoNarrow.className +
+                ' text-4xl md:text-5xl lg:text-6xl font-bold'
+              }
+            />
+            <ThemeToggleButton />
+          </div>
+          <p>One platform, uniting campus clubs, creating community!</p>
+        </div>
         {children}
-      </Box>
-    </Flex>
+      </div>
+    </div>
   );
 }

app/auth/login/page.tsx

@@ -1,6 +1,12 @@
 import { LoginForm } from '@/components/auth/LoginForm';
 import { login as loginServerAction } from '@/actions/auth/login';
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Clubspace | Login',
+  description: 'Login to your account',
+};
 
 export default async function LoginPage() {
-  return <LoginForm submitServerAction={loginServerAction} />;
+  return <LoginForm serverAction={loginServerAction} />;
 }

app/auth/register/page.tsx

@@ -1,6 +1,12 @@
 import { RegisterForm } from '@/components/auth/RegisterForm';
 import { register as registerServerAction } from '@/actions/auth/register';
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Clubspace | Register',
+  description: 'Create an account',
+};
 
 export default async function RegisterPage() {
-  return <RegisterForm submitServerAction={registerServerAction} />;
+  return <RegisterForm serverAction={registerServerAction} />;
 }

app/dashboard/layout.tsx

@@ -0,0 +1,18 @@
+import { SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar';
+import { DashboardSidebar } from '@/components/dashboard/DashboardSidebar';
+
+export default function DashboardLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <SidebarProvider className='p-4'>
+      <DashboardSidebar />
+      <SidebarTrigger />
+      <main className='w-full md:w-[500px] lg:w-[600px] xl:w-[800px] 2xl:w-[1000px] min-h-screen mx-auto px-4'>
+        {children}
+      </main>
+    </SidebarProvider>
+  );
+}

app/dashboard/page.tsx

@@ -0,0 +1,14 @@
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Dashboard',
+  description: 'Dashboard',
+};
+
+export default async function DashboardPage() {
+  return (
+    <div>
+      <h1>Dashboard</h1>
+    </div>
+  );
+}

app/dashboard/settings/page.tsx

@@ -0,0 +1,14 @@
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Dashboard | Settings',
+  description: 'Settings',
+};
+
+export default async function SettingsPage() {
+  return (
+    <div>
+      <h1>Settings</h1>
+    </div>
+  );
+}

app/layout.tsx

@@ -1,9 +1,8 @@
-import '@radix-ui/themes/styles.css';
-import '@/app/globals.css';
+import '@/styles/globals.css';
 import type { Metadata } from 'next';
-import { Container, Theme } from '@radix-ui/themes';
 import { Toaster } from 'react-hot-toast';
 import { spaceGrotesk } from '@/config/fonts';
+import { ThemeProvider } from '@/components/ThemeProvider';
 
 export const metadata: Metadata = {
   title: 'Clubspace',
@@ -16,30 +15,17 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang='en' className={spaceGrotesk.variable}>
-      <body
-        style={{
-          margin: '0',
-          padding: '0',
-        }}
-      >
-        <Theme
-          accentColor='violet'
-          panelBackground='translucent'
-          radius='medium'
-          appearance='light'
+    <html lang='en' className={spaceGrotesk.className} suppressHydrationWarning>
+      <body>
+        <Toaster position='top-right' reverseOrder={false} />
+        <ThemeProvider
+          attribute='class'
+          defaultTheme='system'
+          enableSystem
+          disableTransitionOnChange
         >
-          <Toaster position='top-center' reverseOrder={false} />
-          <Container
-            size={{
-              initial: '1',
-              sm: '2',
-              lg: '4',
-            }}
-          >
-            {children}
-          </Container>
-        </Theme>
+          {children}
+        </ThemeProvider>
       </body>
     </html>
   );

components.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "styles/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}

components/ThemeProvider.tsx

@@ -0,0 +1,9 @@
+'use client';
+
+import * as React from 'react';
+import { ThemeProvider as NextThemesProvider } from 'next-themes';
+import { type ThemeProviderProps } from 'next-themes/dist/types';
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}

components/ThemeToggleButton.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import * as React from 'react';
+import { MoonIcon, SunIcon } from '@radix-ui/react-icons';
+import { useTheme } from 'next-themes';
+
+import { Button } from '@/components/ui/button';
+
+export function ThemeToggleButton() {
+  const { theme, setTheme } = useTheme();
+
+  return (
+    <Button
+      variant='outline'
+      size='default'
+      onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
+    >
+      <SunIcon className='h-[1.2rem] w-[1.2rem] rotate-90 scale-100 transition-all dark:-rotate-90 dark:scale-0' />
+      <MoonIcon className='absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100' />
+      <span className='sr-only'>Toggle theme</span>
+    </Button>
+  );
+}