Upgrade to Next.js 15, UI fixes, Prisma schema update (#9)

Co-authored-by: Pavan Soratur <pavansoratur@MacBookAir.lan>

actions/auth/register.ts

@@ -8,13 +8,15 @@ import bcryptjs from 'bcryptjs';
 import { getUserByEmail } from '@/services/user';
 
 export async function register({
-  name,
+  firstName,
+  lastName,
   email,
   password,
 }: RegisterFormData): Promise<ServerActionResponse> {
   try {
     const validation = registerSchema.safeParse({
-      name,
+      firstName,
+      lastName,
       email,
       password,
     });
@@ -39,7 +41,8 @@ export async function register({
 
     await db.user.create({
       data: {
-        name: name,
+        firstName,
+        lastName,
         email: email,
         password: hashedPassword,
       },

app/auth/layout.tsx

@@ -2,6 +2,9 @@ import type { Metadata } from 'next';
 import { archivoNarrow } from '@/config/fonts';
 import { ThemeToggleButton } from '@/components/ThemeToggleButton';
 import SparklesText from '@/components/ui/sparkles-text';
+import { Paragraph } from '@/components/Paragraph';
+import { DotPattern } from '@/components/ui/dot-pattern';
+import { cn } from '@/lib/utils';
 
 export const metadata: Metadata = {
   title: 'Clubspace | Auth',
@@ -28,8 +31,20 @@ export default function AuthLayout({
             />
             <ThemeToggleButton />
           </div>
-          <p>One platform, uniting campus clubs, creating community!</p>
+          <Paragraph>
+            One platform, uniting campus clubs, creating community!
+          </Paragraph>
         </div>
+        <DotPattern
+          width={20}
+          height={20}
+          cx={1}
+          cy={1}
+          cr={1}
+          className={cn(
+            '[mask-image:linear-gradient(to_bottom_right,white,transparent,transparent)] ',
+          )}
+        />
         {children}
       </div>
     </div>

app/auth/login/page.tsx

@@ -7,6 +7,6 @@ export const metadata: Metadata = {
   description: 'Login to your account',
 };
 
-export default async function LoginPage() {
+export default function LoginPage() {
   return <LoginForm serverAction={loginServerAction} />;
 }

app/auth/register/page.tsx

@@ -7,6 +7,6 @@ export const metadata: Metadata = {
   description: 'Create an account',
 };
 
-export default async function RegisterPage() {
+export default function RegisterPage() {
   return <RegisterForm serverAction={registerServerAction} />;
 }

app/dashboard/layout.tsx

@@ -7,10 +7,10 @@ export default function DashboardLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <SidebarProvider className='p-4'>
+    <SidebarProvider className='px-4 py-6 h-screen overflow-hidden'>
       <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'>
+      <main className='w-full md:max-w-2xl lg:max-w-4xl xl:max-w-6xl 2xl:max-w-7xl h-[calc(100vh-3rem)] overflow-y-auto mx-auto px-4 scrollbar-hidden'>
         {children}
       </main>
     </SidebarProvider>

app/dashboard/page.tsx

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

app/dashboard/settings/page.tsx

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

app/dashboard/spaces/page.tsx

@@ -0,0 +1,120 @@
+import { Heading } from '@/components/Heading';
+import { Paragraph } from '@/components/Paragraph';
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Dashboard | Spaces',
+  description: 'Spaces',
+};
+
+export default function SpacesPage() {
+  return (
+    <div>
+      <Heading variant='h2'>Spaces</Heading>
+      <Paragraph>
+        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat, iure
+        illum. Quibusdam doloremque quam sunt labore iure eum, harum corporis
+        laudantium architecto, vel rem autem sint possimus molestiae ea ex, quos
+        praesentium! Quidem facere porro rem laudantium, voluptatibus enim
+        molestias rerum excepturi amet atque iusto inventore ex sit placeat sed
+        quam repellendus neque ipsum fugit, recusandae illo a optio? Distinctio
+        error autem inventore pariatur adipisci sit velit rem, minima veniam
+        blanditiis. Cumque rerum dolore soluta provident minus magni molestiae
+        fugiat, distinctio facere autem vitae quisquam ratione ab et voluptatem
+        quae temporibus at quam. Enim inventore mollitia totam repellendus nobis
+        perspiciatis. Eum deleniti possimus quae saepe aliquam quam odit, eius
+        sapiente rem sit labore sequi consequuntur provident dignissimos. Neque
+        maiores reprehenderit a quod veniam fuga id sapiente error quis
+        consequuntur mollitia quibusdam ipsum voluptates labore ratione,
+        excepturi explicabo. Ipsam neque facere beatae eius natus repudiandae
+        aperiam qui quibusdam error rem provident ea culpa soluta omnis
+        exercitationem eos, aspernatur quidem quas voluptatum obcaecati placeat
+        fugit! Mollitia non pariatur dolorum nobis error, deleniti id eum est
+        iure fugit. Molestias corporis odio possimus tempora velit, fugiat
+        obcaecati at suscipit. Reprehenderit quas veritatis, quo facere nemo
+        voluptatum corrupti, minima in sed iure deleniti, commodi nisi animi ab.
+        Repellendus optio ratione aperiam aliquam recusandae molestiae unde rem
+        aut laboriosam? Itaque magnam omnis laborum ut vero. Assumenda hic
+        numquam necessitatibus, eligendi cum dignissimos recusandae ullam sit
+        amet quod aperiam facilis reprehenderit! Qui expedita hic deleniti odit
+        corrupti? Possimus earum non nisi reprehenderit ullam deleniti,
+        accusantium voluptatum quia illum magni corporis ipsa ad, vel maxime
+        quidem at asperiores veniam nam aspernatur vero repellendus quisquam
+        nulla nemo quos! Minima, deleniti beatae accusantium eligendi aliquid
+        ducimus esse nihil quaerat, natus pariatur, iure molestias deserunt
+        aspernatur odit quibusdam repellat rem dolor amet corrupti sit numquam
+        in dolores necessitatibus tempora? Tempora, hic!
+      </Paragraph>
+
+      <Paragraph>
+        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat, iure
+        illum. Quibusdam doloremque quam sunt labore iure eum, harum corporis
+        laudantium architecto, vel rem autem sint possimus molestiae ea ex, quos
+        praesentium! Quidem facere porro rem laudantium, voluptatibus enim
+        molestias rerum excepturi amet atque iusto inventore ex sit placeat sed
+        quam repellendus neque ipsum fugit, recusandae illo a optio? Distinctio
+        error autem inventore pariatur adipisci sit velit rem, minima veniam
+        blanditiis. Cumque rerum dolore soluta provident minus magni molestiae
+        fugiat, distinctio facere autem vitae quisquam ratione ab et voluptatem
+        quae temporibus at quam. Enim inventore mollitia totam repellendus nobis
+        perspiciatis. Eum deleniti possimus quae saepe aliquam quam odit, eius
+        sapiente rem sit labore sequi consequuntur provident dignissimos. Neque
+        maiores reprehenderit a quod veniam fuga id sapiente error quis
+        consequuntur mollitia quibusdam ipsum voluptates labore ratione,
+        excepturi explicabo. Ipsam neque facere beatae eius natus repudiandae
+        aperiam qui quibusdam error rem provident ea culpa soluta omnis
+        exercitationem eos, aspernatur quidem quas voluptatum obcaecati placeat
+        fugit! Mollitia non pariatur dolorum nobis error, deleniti id eum est
+        iure fugit. Molestias corporis odio possimus tempora velit, fugiat
+        obcaecati at suscipit. Reprehenderit quas veritatis, quo facere nemo
+        voluptatum corrupti, minima in sed iure deleniti, commodi nisi animi ab.
+        Repellendus optio ratione aperiam aliquam recusandae molestiae unde rem
+        aut laboriosam? Itaque magnam omnis laborum ut vero. Assumenda hic
+        numquam necessitatibus, eligendi cum dignissimos recusandae ullam sit
+        amet quod aperiam facilis reprehenderit! Qui expedita hic deleniti odit
+        corrupti? Possimus earum non nisi reprehenderit ullam deleniti,
+        accusantium voluptatum quia illum magni corporis ipsa ad, vel maxime
+        quidem at asperiores veniam nam aspernatur vero repellendus quisquam
+        nulla nemo quos! Minima, deleniti beatae accusantium eligendi aliquid
+        ducimus esse nihil quaerat, natus pariatur, iure molestias deserunt
+        aspernatur odit quibusdam repellat rem dolor amet corrupti sit numquam
+        in dolores necessitatibus tempora? Tempora, hic!
+      </Paragraph>
+
+      <Paragraph>
+        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat, iure
+        illum. Quibusdam doloremque quam sunt labore iure eum, harum corporis
+        laudantium architecto, vel rem autem sint possimus molestiae ea ex, quos
+        praesentium! Quidem facere porro rem laudantium, voluptatibus enim
+        molestias rerum excepturi amet atque iusto inventore ex sit placeat sed
+        quam repellendus neque ipsum fugit, recusandae illo a optio? Distinctio
+        error autem inventore pariatur adipisci sit velit rem, minima veniam
+        blanditiis. Cumque rerum dolore soluta provident minus magni molestiae
+        fugiat, distinctio facere autem vitae quisquam ratione ab et voluptatem
+        quae temporibus at quam. Enim inventore mollitia totam repellendus nobis
+        perspiciatis. Eum deleniti possimus quae saepe aliquam quam odit, eius
+        sapiente rem sit labore sequi consequuntur provident dignissimos. Neque
+        maiores reprehenderit a quod veniam fuga id sapiente error quis
+        consequuntur mollitia quibusdam ipsum voluptates labore ratione,
+        excepturi explicabo. Ipsam neque facere beatae eius natus repudiandae
+        aperiam qui quibusdam error rem provident ea culpa soluta omnis
+        exercitationem eos, aspernatur quidem quas voluptatum obcaecati placeat
+        fugit! Mollitia non pariatur dolorum nobis error, deleniti id eum est
+        iure fugit. Molestias corporis odio possimus tempora velit, fugiat
+        obcaecati at suscipit. Reprehenderit quas veritatis, quo facere nemo
+        voluptatum corrupti, minima in sed iure deleniti, commodi nisi animi ab.
+        Repellendus optio ratione aperiam aliquam recusandae molestiae unde rem
+        aut laboriosam? Itaque magnam omnis laborum ut vero. Assumenda hic
+        numquam necessitatibus, eligendi cum dignissimos recusandae ullam sit
+        amet quod aperiam facilis reprehenderit! Qui expedita hic deleniti odit
+        corrupti? Possimus earum non nisi reprehenderit ullam deleniti,
+        accusantium voluptatum quia illum magni corporis ipsa ad, vel maxime
+        quidem at asperiores veniam nam aspernatur vero repellendus quisquam
+        nulla nemo quos! Minima, deleniti beatae accusantium eligendi aliquid
+        ducimus esse nihil quaerat, natus pariatur, iure molestias deserunt
+        aspernatur odit quibusdam repellat rem dolor amet corrupti sit numquam
+        in dolores necessitatibus tempora? Tempora, hic!
+      </Paragraph>
+    </div>
+  );
+}

components/Button.tsx

@@ -0,0 +1,22 @@
+import {
+  ButtonProps as ButtonUIProps,
+  Button as ButtonUI,
+} from '@/components/ui/button';
+import { Loader2 } from 'lucide-react';
+import { Icon } from '@/components/ui/Icon';
+
+type ButtonProps = ButtonUIProps & {
+  isLoading?: boolean;
+};
+
+export const Button: React.FC<ButtonProps> = ({
+  children,
+  isLoading,
+  ...props
+}) => {
+  return (
+    <ButtonUI {...props}>
+      {isLoading ? <Icon icon={Loader2} className='animate-spin' /> : children}
+    </ButtonUI>
+  );
+};

components/Heading.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/lib/utils';
+
+const headingVariants = cva('', {
+  variants: {
+    variant: {
+      h1: 'text-3xl sm:text-4xl lg:text-5xl font-medium',
+      h2: 'text-2xl sm:text-3xl lg:text-4xl font-medium',
+      h3: 'text-xl sm:text-2xl lg:text-3xl font-medium',
+      h4: 'text-lg sm:text-xl lg:text-2xl font-medium',
+      h5: 'text-base sm:text-lg lg:text-xl font-medium',
+      h6: 'text-sm sm:text-base lg:text-lg font-medium',
+    },
+  },
+  defaultVariants: {
+    variant: 'h1',
+  },
+});
+
+export interface HeadingProps
+  extends React.HTMLAttributes<HTMLElement>,
+    VariantProps<typeof headingVariants> {}
+
+const Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(
+  ({ className, variant, ...props }, ref) => {
+    const Comp = variant || 'h1';
+    return (
+      <Comp
+        className={cn(headingVariants({ variant, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+
+Heading.displayName = 'Heading';
+
+export { Heading, headingVariants };

components/Paragraph.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+import { RESPONSIVE_TEXT_SIZES } from '@/constants/classnames';
+
+const Paragraph = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  return (
+    <p className={cn(RESPONSIVE_TEXT_SIZES, className)} ref={ref} {...props} />
+  );
+});
+
+Paragraph.displayName = 'Paragraph';
+
+export { Paragraph };

components/Span.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+import { RESPONSIVE_TEXT_SIZES } from '@/constants/classnames';
+
+const Span = React.forwardRef<
+  HTMLSpanElement,
+  React.HTMLAttributes<HTMLSpanElement>
+>(({ className, ...props }, ref) => {
+  return (
+    <span
+      className={cn(RESPONSIVE_TEXT_SIZES, className)}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+Span.displayName = 'Span';
+
+export { Span };

components/ThemeProvider.tsx

@@ -4,6 +4,9 @@ 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) {
+export const ThemeProvider: React.FC<ThemeProviderProps> = ({
+  children,
+  ...props
+}) => {
   return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
-}
+};

components/ThemeToggleButton.tsx

@@ -4,9 +4,10 @@ import * as React from 'react';
 import { MoonIcon, SunIcon } from '@radix-ui/react-icons';
 import { useTheme } from 'next-themes';
 
-import { Button } from '@/components/ui/button';
+import { Button } from '@/components/Button';
+import { Span } from '@/components/Span';
 
-export function ThemeToggleButton() {
+export const ThemeToggleButton: React.FC = () => {
   const { theme, setTheme } = useTheme();
 
   return (
@@ -15,9 +16,9 @@ export function ThemeToggleButton() {
       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>
+      <SunIcon className='!h-5 !w-5 rotate-90 scale-100 transition-all dark:-rotate-90 dark:scale-0' />
+      <MoonIcon className='absolute !h-5 !w-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100' />
+      <Span className='sr-only'>Toggle theme</Span>
     </Button>
   );
-}
+};