theming and structure

.env.example

@@ -0,0 +1,3 @@
+DATABASE_URL=postgresql://postgres:postgres@localhost:5432/wedding_planner
+NEXTAUTH_SECRET=your-secret
+NEXTAUTH_URL=http://localhost:3000

README.md

@@ -21,6 +21,7 @@ My goal for this project is to be an all-in-one self hosted event planner for ma
 - [ ] Gift Registries
     - [ ] Ability for guests to mark an item as purchased
 - [ ] Task Management
+- [ ] Custom Theming
 
 ### Possible Features
 - Budget Tracking

app/(auth)/dashboard/page.tsx

@@ -1,7 +1,34 @@
+import { queries } from '@/lib/queries'
+import Link from 'next/link'
 import React from 'react'
 
-export default function DashboardPage() {
+export default async function DashboardPage() {
+    const events = await queries.fetchEvents()
+    console.log(events)
+
     return (
-        <div>DashboardPage</div>
+        <div>
+            <h1 className='text-2xl font-bold'>Dashboard</h1>
+            <div className='border rounded-lg max-w-6xl mx-auto p-6 space-y-4'>
+                <h2 className='text-xl font-bold'>Your Events</h2>
+                {events.map((item) => (
+                    <div key={item.id}>
+                        <p>ID: {item.id}</p>
+                        <p>Name: {item.name}</p>
+                        <p>Date: {item.date ? item.date.toISOString() : 'null'}</p>
+                        <p>Location: {item.location ? item.location : 'null'}</p>
+                        <p>Creator ID:{item.creatorId}</p>
+                        <p>Created At:{item.createdAt.toISOString()}</p>
+                        
+                    </div>
+                ))}
+                <Link
+                    href={'/events'}
+                    className='underline'
+                >
+                    See all events
+                </Link>
+            </div>
+        </div>
     )
 }

app/(auth)/events/[eventId]/page.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default function SingleEventPage() {
+    return (
+        <div>
+            SINGLE EVENT PAGE
+        </div>
+    )
+}

app/(auth)/events/page.tsx

@@ -0,0 +1,21 @@
+import { queries } from '@/lib/queries'
+import Link from 'next/link'
+import React from 'react'
+
+export default async function EventsPage() {
+    const allEvents = await queries.fetchEvents()
+    console.log(allEvents)
+
+    return (
+        <div>
+            Events
+            <div>
+                {allEvents.length == 0 && (
+                    <>
+                        You don't have any events yet. <Link href={'/events/create'} className='underline'>Create One!</Link>
+                    </>
+                )}
+            </div>
+        </div>
+    )
+}

app/(public)/layout.tsx

@@ -1,10 +1,18 @@
+'use client'
+import Navbar from '@/components/Navbar'
+import { SessionProvider } from 'next-auth/react'
 import { ReactNode } from 'react'
 
 export default function PublicLayout({ children }: { children: ReactNode }) {
     return (
+        <>
+            <SessionProvider>
+                <Navbar />
                 <main>
                     {/* Public site header if any */}
                     {children}
                 </main>
+            </SessionProvider>
+        </>
     )
 }

app/(public)/page.tsx

@@ -11,102 +11,9 @@ export default async function Home() {
   }
 
   return (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
       <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
-        <Image
+        HOMEPAGE
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol className="list-inside list-decimal text-sm/6 text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
-          <li className="mb-2 tracking-[-.01em]">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-[family-name:var(--font-geist-mono)] font-semibold">
-              app/page.tsx
-            </code>
-            .
-          </li>
-          <li className="tracking-[-.01em]">
-            Save and see your changes instantly.
-          </li>
-        </ol>
-
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
-        </div>
       </main>
-      <footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
+
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
-    </div>
   );
 }

app/api/events/route.ts

@@ -1,9 +1,10 @@
-import { auth } from '@/lib/auth';
+import { getServerSession } from 'next-auth'
+import { authOptions } from '@/app/api/auth/[...nextauth]/route'
 import { mutations } from '@/lib/mutations';
 import { NextRequest, NextResponse } from 'next/server';
 
 export async function POST(req: NextRequest) {
-    const session = await auth();
+    const session = await getServerSession(authOptions)
     if (!session?.user) return new NextResponse('Unauthorized', { status: 401 });
 
     const body = await req.json();

app/globals.css

@@ -1,3 +1,16 @@
 @import "tailwindcss";
 
+@theme {
+    --color-background: #fff5eb;
+    --color-text: #141d31;
+}
 
+/* @theme light {
+    --color-background: #fff5eb;
+    --color-text: #141d31;
+}
+
+@theme dark {
+    --color-background: #141d31;
+    --color-text: #fff5eb;
+} */

app/layout.tsx

@@ -2,7 +2,7 @@ import type { Metadata } from "next";
 import "./globals.css";
 
 export const metadata: Metadata = {
-  title: "Create Next App",
+  title: "Wedding Planner",
   description: "Generated by create next app",
 };
 
@@ -15,8 +15,8 @@ export default async function RootLayout({
   return (
     <html lang="en">
       <body
+        className="bg-background text-text"
       >
-        <h1 className="text-xl font-bold">Welcome to Wedding Planner</h1>
         {children}
       </body>
     </html>

components/Navbar.tsx

@@ -1,6 +1,8 @@
 'use client'
 
 import { useSession, signOut } from "next-auth/react";
+import { UserIcon } from "./icons/UserIcon";
+import Link from "next/link";
 
 export default function Navbar() {
     const { data: session, status } = useSession();
@@ -9,9 +11,20 @@ export default function Navbar() {
     if (!session?.user) return null
     
     return (
-        <nav className="flex justify-between items-center p-4 bg-gray-100 border-b">
+        <nav className="flex justify-between items-center p-4 bg-background border-b">
+            <div className="flex items-center space-x-2">
                 <div className="font-semibold">Wedding Planner</div>
-            <div className="flex items-center space-x-4">
+                {session.user && (
+                    <Link
+                        href={'/dashboard'}
+                    >
+                        Dashboard
+                    </Link>
+                )}
+            </div>
+            
+            <div className="flex items-center space-x-2">
+                <UserIcon />
                 <span className="text-sm text-gray-600">
                     {session.user.email} ({session.user.role})
                 </span>

components/icons/UserIcon.tsx

@@ -0,0 +1,7 @@
+export const UserIcon = () => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="size-6">
+            <path fillRule="evenodd" d="M18.685 19.097A9.723 9.723 0 0 0 21.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 0 0 3.065 7.097A9.716 9.716 0 0 0 12 21.75a9.716 9.716 0 0 0 6.685-2.653Zm-12.54-1.285A7.486 7.486 0 0 1 12 15a7.486 7.486 0 0 1 5.855 2.812A8.224 8.224 0 0 1 12 20.25a8.224 8.224 0 0 1-5.855-2.438ZM15.75 9a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" clipRule="evenodd" />
+        </svg>
+    )
+}

lib/queries.ts

@@ -1,5 +1,9 @@
 import { prisma } from './prisma';
 
 export const queries = {
-    // Test for adding invitees
+    async fetchEvents() {
+        const allEvents = await prisma.event.findMany()
+        console.log(allEvents)
+        return allEvents;
+    }
 }