added theme changing buttons

Azure-Blade · Jun 16, 2024 · 91754c3 · 91754c3
1 parent a831b92
commit 91754c3
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 27 deletions.
diff --git a/package.json b/package.json
@@ -6,7 +6,9 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "db:generate":"drizzle-kit generate",
+    "db:migrate":"drizzle-kit migrate"
   },
   "dependencies": {
     "@planetscale/database": "^1.18.0",

diff --git a/src/pages/api/randomQuote.ts → src/app/api/v1/quote/random/route.ts b/src/pages/api/randomQuote.ts → src/app/api/v1/quote/random/route.ts
@@ -1,8 +1,8 @@
-import { NextApiRequest, NextApiResponse } from 'next';
-import { db } from '@/db/index';
-import { quotes } from '@/db/schema';
+import { db } from "@/db/index";
+import { quotes } from "@/db/schema";
 
-export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+export const dynamic = 'force-dynamic' // defaults to auto
+export async function GET(request: Request) {
     try {
         // Fetch all quotes
         const allQuotes = await db.select({
@@ -14,12 +14,17 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         if (allQuotes.length > 0) {
             const randomIndex = Math.floor(Math.random() * allQuotes.length);
             const randomQuote = allQuotes[randomIndex];
-            res.status(200).json(randomQuote);
+
+            return new Response(JSON.stringify(randomQuote) )
         } else {
-            res.status(404).json({ error: "No quotes found" });
+            return new Response("Error", {
+                status: 403
+            })
         }
     } catch (error) {
         console.error("Failed to fetch quote:", error);
-        res.status(500).json({ error: "Failed to fetch quote" });
+        return new Response("Error" , {
+            status: 500
+        })
     }
-}
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -2,6 +2,8 @@ import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
 import Header from "@/components/Header";
+import ThemeProvider from "@/lib/ThemeProvider";
+import BodyTheme from "@/components/BodyTheme";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -18,8 +20,12 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={inter.className}>
-        <Header />
-        <main>{children}</main>
+        <ThemeProvider>
+          <Header />
+          <BodyTheme>
+            {children}
+          </BodyTheme>
+        </ThemeProvider>
       </body>
     </html>
   );

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -10,7 +10,7 @@ export default function Page() {
           <p>Motivational</p>
           <p>Quotes</p>
           <div className="p-24 flex flex-col items-center">
-            <QuotesButton></QuotesButton>
+            <QuotesButton />
           </div>
         </div>
       </section>

diff --git a/src/components/BodyTheme.tsx b/src/components/BodyTheme.tsx
@@ -0,0 +1,12 @@
+"use client"
+
+import React, { PropsWithChildren, useContext } from 'react'
+import { ThemeContext } from '@/lib/ThemeProvider'
+
+export default function BodyTheme({children}:PropsWithChildren) {
+    const {theme} = useContext(ThemeContext)
+
+  return (
+    <main className={theme==="light" ? "bg-white color-black":"bg-black color-white"}>{children}</main>
+  )
+}
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -1,17 +1,11 @@
+"use client"
 import Logo from "./Logo";
+import { ThemeContext } from "@/lib/ThemeProvider";
+import { useContext } from "react";
 
 export default function Header() {
-  // return (
-  //   <header>
-  //     <nav className="flex justify-end gap-5 p-4">
-  //       <a href="/">Home</a>
-  //       <a href="/quotes">Quotes</a>
-  //       <a href="/about">About</a>
-  //       <a href="/login">Login</a>
-  //       <a href="/register">Register</a>
-  //     </nav>
-  //   </header>
-  // );
+  const theme= useContext(ThemeContext)
+
 
   return (
     <div className="navbar bg-base-100 sticky top-0 bg-gradient-to-r from-blue-500 opacity-91">
@@ -86,7 +80,7 @@ export default function Header() {
         </ul>
       </div>
       <div className="navbar-end">
-        <label className="swap swap-rotate">
+        <label className="swap swap-rotate" onClick={()=>{}}>
           {/* this hidden checkbox controls the state */}
           <input
             type="checkbox"

diff --git a/src/components/QuotesButton.tsx b/src/components/QuotesButton.tsx
@@ -3,17 +3,21 @@
 import { useState } from "react";
 
 // Define the type for the quote object
-interface Quote {
+type Quote = {
   content: string;
   author: string;
 }
 
-export default function QuotesButton() {
+
+type Props = {
+  className?:string
+}
+export default function QuotesButton({className}:Props) {
   const [quote, setQuote] = useState<Quote | null>(null);
 
   const fetchQuote = async () => {
     try {
-      const response = await fetch("/api/randomQuote");
+      const response = await fetch("/api/v1/quote/random");
       if (!response.ok) {
         throw new Error("Network response was not ok");
       }

diff --git a/src/lib/ThemeProvider.tsx b/src/lib/ThemeProvider.tsx
@@ -0,0 +1,23 @@
+"use client"
+
+import React, { PropsWithChildren, createContext, useState } from 'react'
+
+type Context = {
+  theme: "dark" | "light",
+  setTheme:(React.Dispatch<React.SetStateAction<"dark" | "light">>)| null
+}
+
+export const ThemeContext = createContext<Context>({theme: "dark", setTheme:null})
+type Props = PropsWithChildren
+
+export default function ThemeProvider({children}:Props) {
+  const [theme, setTheme] = useState<"dark" | "light">("dark")
+  return (
+    <ThemeContext.Provider value={{theme, setTheme}}>
+        {children}
+      <button onClick={()=>setTheme("light")}>set to light</button>
+      <button onClick={()=>setTheme("dark")}>set to dark</button>
+    </ThemeContext.Provider>
+  )
+
+}