diff --git a/public/Car_Dashboard.jpg b/public/Car_Dashboard.jpg new file mode 100644 index 0000000..ac82d85 Binary files /dev/null and b/public/Car_Dashboard.jpg differ diff --git a/src/app/auth/login/page.tsx b/src/app/auth/login/page.tsx index 9bc021c..34d0d0b 100644 --- a/src/app/auth/login/page.tsx +++ b/src/app/auth/login/page.tsx @@ -1,14 +1,15 @@ 'use client'; -import { useState } from 'react'; import { signIn } from 'next-auth/react'; import { useRouter } from 'next/navigation'; +import { useState } from 'react'; export default function LoginPage() { const router = useRouter(); const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [error, setError] = useState(''); + const [showPassword, setShowPassword] = useState(false); const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); @@ -27,30 +28,43 @@ export default function LoginPage() { }; return ( -
-

Login

-
- setEmail(e.target.value)} - className="w-full border border-[var(--border)] px-4 py-3 rounded-lg bg-white focus:outline-none focus:ring-2 focus:ring-[var(--primary)]" - /> - setPassword(e.target.value)} - className="w-full border border-[var(--border)] px-4 py-3 rounded-lg bg-white focus:outline-none focus:ring-2 focus:ring-[var(--primary)]" - /> - - {error &&

{error}

} -
+
+
+

Login

+
+ setEmail(e.target.value)} + className="w-full max-w-2xl text-lg border border-[var(--border)] px-6 py-4 rounded-lg bg-white focus:outline-none focus:ring-2 focus:ring-[var(--primary)] text-gray-900 placeholder:text-gray-500" + /> +
+ setPassword(e.target.value)} + className="w-full text-lg border border-[var(--border)] px-6 py-4 rounded-lg bg-white focus:outline-none focus:ring-2 focus:ring-[var(--primary)] text-gray-900 placeholder:text-gray-500 pr-16" + /> + +
+ + {error &&

{error}

} +
+
); } diff --git a/src/app/auth/register/page.tsx b/src/app/auth/register/page.tsx index 2fce23f..d66675e 100644 --- a/src/app/auth/register/page.tsx +++ b/src/app/auth/register/page.tsx @@ -8,6 +8,7 @@ export default function RegisterPage() { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [error, setError] = useState(''); + const [showPassword, setShowPassword] = useState(false); const handleRegister = async (e: React.FormEvent) => { e.preventDefault(); @@ -25,30 +26,43 @@ export default function RegisterPage() { }; return ( -
-

Register

-
- setEmail(e.target.value)} - className="w-full border border-[var(--border)] px-4 py-3 rounded-lg bg-white focus:outline-none focus:ring-2 focus:ring-[var(--secondary)]" - /> - setPassword(e.target.value)} - className="w-full border border-[var(--border)] px-4 py-3 rounded-lg bg-white focus:outline-none focus:ring-2 focus:ring-[var(--secondary)]" - /> - - {error &&

{error}

} -
+
+
+

Register

+
+ setEmail(e.target.value)} + className="w-full max-w-2xl text-lg border border-[var(--border)] px-6 py-4 rounded-lg bg-white focus:outline-none focus:ring-2 focus:ring-[var(--secondary)] text-gray-900 placeholder:text-gray-500" + /> +
+ setPassword(e.target.value)} + className="w-full text-lg border border-[var(--border)] px-6 py-4 rounded-lg bg-white focus:outline-none focus:ring-2 focus:ring-[var(--secondary)] text-gray-900 placeholder:text-gray-500 pr-16" + /> + +
+ + {error &&

{error}

} +
+
); } diff --git a/src/app/layout.tsx b/src/app/layout.tsx index d37ab25..a6003b8 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,7 +1,8 @@ import type { Metadata } from "next"; import { Geist, Geist_Mono } from "next/font/google"; import "./globals.css"; -import Link from "next/link"; +import ClientNavbar from "../components/ClientNavbar"; +import Providers from "./providers"; const geistSans = Geist({ variable: "--font-geist-sans", @@ -18,7 +19,7 @@ export const metadata: Metadata = { description: "Track your car's fuel and mileage easily.", }; -export default function RootLayout({ +export default async function RootLayout({ children, }: Readonly<{ children: React.ReactNode; @@ -28,19 +29,15 @@ export default function RootLayout({ -
- - 🚗 Car Fuel Tracker - - -
-
-
{/* Spacer between navbar and content */} - {children} -
+ +
+ +
+
+
{/* Spacer between navbar and content */} + {children} +
+ ); diff --git a/src/app/page.tsx b/src/app/page.tsx index 64ead0c..2ed1655 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,48 +1,127 @@ import Image from "next/image"; import Link from "next/link"; +import { getSession } from "@/lib/auth"; + +export default async function Home() { + const session = await getSession(); + const isLoggedIn = !!session; -export default function Home() { return (
+ {/* Hero Section */}
Next.js logo -

- Welcome to Car Fuel Tracker +

+ {isLoggedIn ? "Welcome Back!" : "Track Your Car’s Fuel & Mileage"}

-

- Track your car's fuel fill-ups, mileage, and stats with a beautiful, - simple dashboard. +

+ {isLoggedIn + ? "Jump right into your dashboard to log fill-ups, view stats, and manage your cars." + : "Effortlessly log fill-ups, monitor fuel costs, and analyze your driving habits—all in one beautiful dashboard."}

- - Go to Dashboard - - - Next.js Docs - + {isLoggedIn ? ( + + Go to Dashboard + + ) : ( + <> + + Login + + + Register + + + )}
-
- - © {new Date().getFullYear()} Car Fuel Tracker. Built with Next.js. - + + {/* Features Section */} +
+
+ ⛽ +

+ Log Fill-Ups +

+

+ Quickly add fuel entries and keep your records organized. +

+
+
+ 📊 +

+ Analyze Stats +

+

+ Visualize your fuel consumption, costs, and mileage trends. +

+
+
+ 🚗 +

+ Manage Cars +

+

+ Track multiple vehicles and switch between them easily. +

+
+
+ + {/* Testimonial Section */} +
+
+ “ +

+ This app made it so easy to track my car’s fuel expenses and spot + trends. Highly recommended for anyone who wants to save money and + understand their driving habits! +

+ — Happy Driver +
+
+ + {/* Footer */} +
+ + © {new Date().getFullYear()} Car Fuel Tracker.
); diff --git a/src/app/providers.tsx b/src/app/providers.tsx new file mode 100644 index 0000000..b733b90 --- /dev/null +++ b/src/app/providers.tsx @@ -0,0 +1,6 @@ +"use client"; +import { SessionProvider } from "next-auth/react"; + +export default function Providers({ children }: { children: React.ReactNode }) { + return {children}; +} diff --git a/src/components/ClientNavbar.tsx b/src/components/ClientNavbar.tsx new file mode 100644 index 0000000..d50fd41 --- /dev/null +++ b/src/components/ClientNavbar.tsx @@ -0,0 +1,92 @@ +"use client"; +import Link from "next/link"; +import { usePathname } from "next/navigation"; +import { useState } from "react"; +import { useSession } from "next-auth/react"; + +export default function ClientNavbar() { + const { data: session } = useSession(); + const isLoggedIn = !!session; + const pathname = usePathname(); + const userInitial = session?.user?.name?.[0]?.toUpperCase() || session?.user?.email?.[0]?.toUpperCase() || "U"; + const [open, setOpen] = useState(false); + + function NavLink({ href, children }: { href: string; children: React.ReactNode }) { + const isActive = pathname === href; + return ( + + {children} + + ); + } + + return ( + + ); +}