chore: ui changes

app/auth/layout.tsx

@@ -2,7 +2,6 @@ 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';
 
@@ -22,18 +21,15 @@ export default function AuthLayout({
         <div className='flex flex-col gap-3'>
           <div className='flex items-center justify-between'>
             <SparklesText
-              text='Clubspace'
-              sparklesCount={2}
+              text='clubspace.'
+              sparklesCount={4}
               className={
-                archivoNarrow.className +
-                ' text-4xl md:text-5xl lg:text-6xl font-bold'
+                archivoNarrow.className + ' text-4xl md:text-5xl lg:text-6xl'
               }
             />
             <ThemeToggleButton />
           </div>
-          <Paragraph>
-            One platform, uniting campus clubs, creating community!
-          </Paragraph>
+          <p>One platform, uniting campus clubs, creating community!</p>
         </div>
         <DotPattern
           width={20}

app/dashboard/layout.tsx

@@ -9,7 +9,7 @@ export default function DashboardLayout({
   return (
     <SidebarProvider className='px-4 py-6 h-screen overflow-hidden'>
       <DashboardSidebar />
-      <SidebarTrigger />
+      <SidebarTrigger className='mt-1' />
       <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>

app/dashboard/page.tsx

@@ -1,5 +1,6 @@
 import { Metadata } from 'next';
 import { Heading } from '@/components/Heading';
+import { LayoutGrid } from 'lucide-react';
 
 export const metadata: Metadata = {
   title: 'Dashboard',
@@ -9,7 +10,9 @@ export const metadata: Metadata = {
 export default function DashboardPage() {
   return (
     <div>
-      <Heading variant='h2'>Overview</Heading>
+      <Heading variant='h2' className='flex items-center gap-2'>
+        <LayoutGrid className='!w-6 !h-6' /> Overview
+      </Heading>
     </div>
   );
 }

app/dashboard/settings/page.tsx

@@ -1,4 +1,5 @@
 import { Heading } from '@/components/Heading';
+import { Settings } from 'lucide-react';
 import { Metadata } from 'next';
 
 export const metadata: Metadata = {
@@ -9,7 +10,9 @@ export const metadata: Metadata = {
 export default function SettingsPage() {
   return (
     <div>
-      <Heading variant='h2'>Settings</Heading>
+      <Heading variant='h2' className='flex items-center gap-2'>
+        <Settings className='!w-6 !h-6' /> Settings
+      </Heading>
     </div>
   );
 }

app/dashboard/spaces/page.tsx

@@ -1,120 +1,57 @@
 import { Heading } from '@/components/Heading';
-import { Paragraph } from '@/components/Paragraph';
 import { Metadata } from 'next';
+import { auth } from '@/auth';
+import { redirect } from 'next/navigation';
+import { getSpacesByUserId } from '@/services/space';
+import { Globe, Plus, Space } from 'lucide-react';
+import { Button } from '@/components/Button';
+import { Card, CardContent } from '@/components/ui/card';
 
 export const metadata: Metadata = {
   title: 'Dashboard | Spaces',
   description: 'Spaces',
 };
 
-export default function SpacesPage() {
+export default async function SpacesPage() {
+  const session = await auth();
+
+  if (!session?.user?.id) {
+    redirect('/login');
+  }
+
+  const { data } = await getSpacesByUserId(session.user.id);
+  console.log(data);
+
   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>
+      <Heading variant='h2' className='flex items-center gap-2'>
+        <Globe className='!w-6 !h-6' /> 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>
+      {data?.length === 0 && (
+        <Card className='border-dashed mt-6'>
+          <CardContent className='flex flex-col items-center justify-center space-y-4 py-12 text-center'>
+            <div className='rounded-full bg-primary/15 p-3'>
+              <Space className='!w-5 !h-5 text-primary' />
+            </div>
+            <div className='space-y-2'>
+              <h2 className='text-lg md:text-xl font-semibold tracking-tight'>
+                No Spaces Found
+              </h2>
+              <p className='text-sm text-muted-foreground max-w-md mx-auto'>
+                It seems that you haven&apos;t created any spaces yet. Start by
+                creating your first space to begin your journey.
+              </p>
+            </div>
+            <Button size='lg'>
+              <Plus className='!w-4 !h-4' />
+              Create Space
+            </Button>
+          </CardContent>
+        </Card>
+      )}
 
-      <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>
+      {data?.map((space) => <div key={space.id}>{space.name}</div>)}
     </div>
   );
 }

app/layout.tsx

@@ -1,7 +1,7 @@
 import '@/styles/globals.css';
 import type { Metadata } from 'next';
 import { Toaster } from 'react-hot-toast';
-import { spaceGrotesk } from '@/config/fonts';
+import { poppins } from '@/config/fonts';
 import { ThemeProvider } from '@/components/ThemeProvider';
 
 export const metadata: Metadata = {
@@ -15,7 +15,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang='en' className={spaceGrotesk.className} suppressHydrationWarning>
+    <html lang='en' className={poppins.className} suppressHydrationWarning>
       <body>
         <Toaster position='top-right' reverseOrder={false} />
         <ThemeProvider

components/Button.tsx

@@ -3,7 +3,6 @@ import {
   Button as ButtonUI,
 } from '@/components/ui/button';
 import { Loader2 } from 'lucide-react';
-import { Icon } from '@/components/ui/Icon';
 
 type ButtonProps = ButtonUIProps & {
   isLoading?: boolean;
@@ -16,7 +15,7 @@ export const Button: React.FC<ButtonProps> = ({
 }) => {
   return (
     <ButtonUI {...props}>
-      {isLoading ? <Icon icon={Loader2} className='animate-spin' /> : children}
+      {isLoading ? <Loader2 className='animate-spin !w-4 !h-4' /> : children}
     </ButtonUI>
   );
 };

components/Heading.tsx

@@ -6,12 +6,12 @@ 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',
+      h1: 'text-2xl sm:text-3xl lg:text-4xl font-medium',
+      h2: 'text-xl sm:text-2xl lg:text-3xl font-medium',
+      h3: 'text-lg sm:text-xl lg:text-2xl font-medium',
+      h4: 'text-base sm:text-lg lg:text-xl font-medium',
+      h5: 'text-sm sm:text-base lg:text-lg font-medium',
+      h6: 'text-xs sm:text-sm lg:text-base font-medium',
     },
   },
   defaultVariants: {

components/ThemeToggleButton.tsx

@@ -5,7 +5,6 @@ import { MoonIcon, SunIcon } from '@radix-ui/react-icons';
 import { useTheme } from 'next-themes';
 
 import { Button } from '@/components/Button';
-import { Span } from '@/components/Span';
 
 export const ThemeToggleButton: React.FC = () => {
   const { theme, setTheme } = useTheme();
@@ -18,7 +17,7 @@ export const ThemeToggleButton: React.FC = () => {
     >
       <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>
+      <span className='sr-only'>Toggle theme</span>
     </Button>
   );
 };