added color change to navbar

Websites/UnusedPages/AddToCart.tsx

@@ -1,5 +1,5 @@
 "use client";
-import React from 'react'
+// import React from 'react'
 
 const AddToCart = () => {
   return (

Websites/UnusedPages/ProductCard/ProductCard.tsx

@@ -1,21 +1,21 @@
-import React from 'react';
+// import React from 'react';
-import AddToCart from '../AddToCart';
+// import AddToCart from '../AddToCart';
-// import styles from './ProductCard.module.css';
+// // import styles from './ProductCard.module.css';
 
-const ProductCard = () => {
+// const ProductCard = () => {
-  return (
+//   return (
-    // <div className={styles.card}> style using css file
+//     // <div className={styles.card}> style using css file
 
-    // style using tailwind 
+//     // style using tailwind 
-    // <div className='p-5 my-5 bg-sky-400 text-white text-xl hover:bg-sky-600'> 
+//     // <div className='p-5 my-5 bg-sky-400 text-white text-xl hover:bg-sky-600'> 
-    //     <AddToCart />
+//     //     <AddToCart />
-    // </div>
+//     // </div>
 
-    // style using daisyUi component instead
+//     // style using daisyUi component instead
-    <div> 
+//     <div> 
-        <AddToCart />
+//         <AddToCart />
-    </div>
+//     </div>
-  )
+//   )
-}
+// }
 
-export default ProductCard
+// export default ProductCard

Websites/UnusedPages/api/issues/route.ts

@@ -0,0 +1,27 @@
+// import { NextRequest, NextResponse } from "next/server";
+// import { z } from 'zod';
+// import prisma from "@/prisma/client";
+
+// // validate the request with zod
+// const createIssueSchema = z.object({
+//     title: z.string().min(1).max(255), // confirms string is between 1-255 characters
+//     description: z.string().min(1), // confirms string has min length of 1
+// });
+
+// // send request
+// export async function POST(request: NextRequest) {
+//     // return request with a promise
+//     const body = await request.json();
+
+//     // validate the data
+//     const validation = createIssueSchema.safeParse(body);
+//     if (!validation.success)
+//         return NextResponse.json(validation.error.errors, {status: 400}) // Send error 400 if data is invalid
+
+//     const newIssue = await prisma.issue.create({
+//         data: { title: body.title, description: body.description }
+//     });
+
+//     // return the issue to the client
+//     return NextResponse.json(newIssue, {status: 201}); // status 201 means an object was created
+// }

Websites/UnusedPages/issues/new/page.tsx

@@ -1,58 +1,58 @@
-"use client";
+// "use client";
-import React from "react";
+// import React from "react";
-import SimpleMDE from "react-simplemde-editor";
+// import SimpleMDE from "react-simplemde-editor";
-import "easymde/dist/easymde.min.css";
+// import "easymde/dist/easymde.min.css";
-import { useForm, Controller } from "react-hook-form";
+// import { useForm, Controller } from "react-hook-form";
-import { FormEvent } from "react";
+// import { FormEvent } from "react";
 
-interface IssueForm {
+// interface IssueForm {
-  title: string;
+//   title: string;
-  description: string;
+//   description: string;
-}
+// }
 
-const NewIssuePage = () => {
+// const NewIssuePage = () => {
-  const { register, control, handleSubmit } = useForm<IssueForm>();
+//   const { register, control, handleSubmit } = useForm<IssueForm>();
-  // console.log(register('title'))
+//   // console.log(register('title'))
 
-  // handle form submit
+//   // handle form submit
-  async function onSubmit(event: FormEvent<HTMLFormElement>) {
+//   async function onSubmit(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault();
+//     event.preventDefault();
 
-    const formData = new FormData(event.currentTarget);
+//     const formData = new FormData(event.currentTarget);
-    const response = await fetch("/api/issues", {
+//     const response = await fetch("/api/issues", {
-      method: "POST",
+//       method: "POST",
-      body: formData,
+//       body: formData,
-    });
+//     });
 
-    // Handle response if necessary
+//     // Handle response if necessary
-    // const data = await response.json();
+//     // const data = await response.json();
-    // ...
+//     // ...
-  }
+//   }
 
-  return (
+//   return (
-    <form
+//     <form
-      className="max-w-xl"
+//       className="max-w-xl"
-      // onSubmit={handleSubmit((data) => console.log(data))}
+//       // onSubmit={handleSubmit((data) => console.log(data))}
-      onSubmit={onSubmit}
+//       onSubmit={onSubmit}
-    >
+//     >
-      <input
+//       <input
-        type="text"
+//         type="text"
-        placeholder="Type Here"
+//         placeholder="Type Here"
-        className="input w-full border-zinc-300 mb-2"
+//         className="input w-full border-zinc-300 mb-2"
-        {...register("title")}
+//         {...register("title")}
-      />
+//       />
-      <Controller
+//       <Controller
-        name="description"
+//         name="description"
-        control={control}
+//         control={control}
-        render={({ field }) => (
+//         render={({ field }) => (
-          <SimpleMDE placeholder="Description" {...field}></SimpleMDE>
+//           <SimpleMDE placeholder="Description" {...field}></SimpleMDE>
-        )}
+//         )}
-      />
+//       />
-      <button className="btn bg-emerald-400 text-black hover:bg-white">
+//       <button className="btn bg-emerald-400 text-black hover:bg-white">
-        Submit Ticket
+//         Submit Ticket
-      </button>
+//       </button>
-    </form>
+//     </form>
-  );
+//   );
-};
+// };
 
-export default NewIssuePage;
+// export default NewIssuePage;

Websites/UnusedPages/issues/page.tsx

@@ -1,22 +1,22 @@
-import Link from 'next/link'
+// import Link from 'next/link'
-import React from 'react'
+// import React from 'react'
-import type { NextApiRequest, NextApiResponse } from 'next'
+// import type { NextApiRequest, NextApiResponse } from 'next'
 
-const IssuesPage = () => {
+// const IssuesPage = () => {
-  async function handler(
+//   async function handler(
-    req: NextApiRequest,
+//     req: NextApiRequest,
-    res: NextApiResponse,
+//     res: NextApiResponse,
-    ) {
+//     ) {
-      const data = req.body
+//       const data = req.body
-      console.log(...data)
+//       console.log(...data)
-      res.redirect(307, '/issues')
+//       res.redirect(307, '/issues')
-  }
+//   }
 
-  return (
+//   return (
-    <div>
+//     <div>
-        <button className='btn bg-emerald-400 text-black hover:bg-white'><Link href='/issues/new'>New Ticket</Link></button>
+//         <button className='btn bg-emerald-400 text-black hover:bg-white'><Link href='/issues/new'>New Ticket</Link></button>
-    </div>
+//     </div>
-  )
+//   )
-}
+// }
 
-export default IssuesPage
+// export default IssuesPage

Websites/UnusedPages/prisma/client.ts

@@ -0,0 +1,19 @@
+// import { PrismaClient } from '@prisma/client'
+
+// // ensures there is only one instance of prisma at any given moment
+
+// const prismaClientSingleton = () => {
+//   return new PrismaClient()
+// }
+
+// type PrismaClientSingleton = ReturnType<typeof prismaClientSingleton>
+
+// const globalForPrisma = globalThis as unknown as {
+//   prisma: PrismaClientSingleton | undefined
+// }
+
+// const prisma = globalForPrisma.prisma ?? prismaClientSingleton()
+
+// export default prisma
+
+// if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma

Websites/UnusedPages/prisma/scripts.txt

@@ -0,0 +1,3 @@
+"prisma": {
+    "seed": "ts-node --compiler-options {\"module\":\"CommonJS\"} prisma/seed.ts"
+  }

Websites/UnusedPages/users/nested/page.tsx

@@ -1,9 +1,9 @@
-import React from 'react'
+// import React from 'react'
 
-const Nested = () => {
+// const Nested = () => {
-  return (
+//   return (
-    <div>Nested</div>
+//     <div>Nested</div>
-  )
+//   )
-}
+// }
 
-export default Nested
+// export default Nested

Websites/UnusedPages/users/page.tsx

@@ -1,51 +1,51 @@
-import { userInfo } from 'os';
+// import { userInfo } from 'os';
-import React, { useState, useEffect } from 'react'
+// import React, { useState, useEffect } from 'react'
 
-interface User {
+// interface User {
-  id: number;
+//   id: number;
-  name: string;
+//   name: string;
-  email: string;
+//   email: string;
-}
+// }
 
-const UsersPage = async () => {
+// const UsersPage = async () => {
-  // Get the json file
+//   // Get the json file
-  const res = await fetch(
+//   const res = await fetch(
-    'https://jsonplaceholder.typicode.com/users',
+//     'https://jsonplaceholder.typicode.com/users',
-    // Option to disable caching entirely, useful for data that changes frequently.
+//     // Option to disable caching entirely, useful for data that changes frequently.
-    {cache: 'no-store'}
+//     {cache: 'no-store'}
 
-    // Option to store the data within the cache for a certain period of time
+//     // Option to store the data within the cache for a certain period of time
-    // { next: { revalidate: 10 }} // get fresh data every 10 seconds
+//     // { next: { revalidate: 10 }} // get fresh data every 10 seconds
-  );
+//   );
-  // Create an object that will hold the users within the json file
+//   // Create an object that will hold the users within the json file
-  const users: User[] = await res.json();
+//   const users: User[] = await res.json();
-  // Create a cache in order to hold the data for later(useful for tokens)
+//   // Create a cache in order to hold the data for later(useful for tokens)
 
 
-  return (
+//   return (
-    <>
+//     <>
-    <h1>Users</h1>
+//     <h1>Users</h1>
-    {/* <p>{new Date().toLocaleTimeString()}</p> */}
+//     {/* <p>{new Date().toLocaleTimeString()}</p> */}
-    {/* instead of an unordered list, we'll use a table
+//     {/* instead of an unordered list, we'll use a table
-    <ul>
+//     <ul>
-      {users.map(user => <li key={user.id}>{user.name}</li>)}
+//       {users.map(user => <li key={user.id}>{user.name}</li>)}
-    </ul> */}
+//     </ul> */}
-    <table className='table table-bordered'>
+//     <table className='table table-bordered'>
-      <thead>
+//       <thead>
-        <tr>
+//         <tr>
-          <th>Name</th>
+//           <th>Name</th>
-          <th>Email</th>
+//           <th>Email</th>
-        </tr>
+//         </tr>
-      </thead>
+//       </thead>
-      <tbody>
+//       <tbody>
-        {users.map(user=> <tr key={user.id}>
+//         {users.map(user=> <tr key={user.id}>
-            <td>{user.name}</td>
+//             <td>{user.name}</td>
-            <td>{user.email}</td>
+//             <td>{user.email}</td>
-        </tr>)}
+//         </tr>)}
-      </tbody>
+//       </tbody>
-    </table>
+//     </table>
-    </>
+//     </>
-  )
+//   )
-}
+// }
 
-export default UsersPage
+// export default UsersPage

Websites/jefes-nextjs/app/api/issues/route.ts

@@ -1,27 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-import { z } from 'zod';
-import prisma from "@/prisma/client";
-
-// validate the request with zod
-const createIssueSchema = z.object({
-    title: z.string().min(1).max(255), // confirms string is between 1-255 characters
-    description: z.string().min(1), // confirms string has min length of 1
-});
-
-// send request
-export async function POST(request: NextRequest) {
-    // return request with a promise
-    const body = await request.json();
-
-    // validate the data
-    const validation = createIssueSchema.safeParse(body);
-    if (!validation.success)
-        return NextResponse.json(validation.error.errors, {status: 400}) // Send error 400 if data is invalid
-
-    const newIssue = await prisma.issue.create({
-        data: { title: body.title, description: body.description }
-    });
-
-    // return the issue to the client
-    return NextResponse.json(newIssue, {status: 201}); // status 201 means an object was created
-}

Websites/jefes-nextjs/app/components/NavBar/NavBar.css

@@ -1,9 +1,18 @@
-.nav_background{
+.nav_background {
-    z-index: -1;
+  z-index: -1;
-    filter: brightness(.17);
+  filter: brightness(0.17);
-    /* align-items: baseline; */
+  /* align-items: baseline; */
+}
+.logo {
+  margin: 0 auto;
+  align-items: center;
+}
+
+.active {
+  background: green;
+  position: fixed;
+  width: 100%;
+  justify-content: space-around;
+  display: flex;
+  align-items: center;
 }
-.logo{
-    margin: 0 auto;
-    align-items: center;
-}

Websites/jefes-nextjs/app/components/NavBar/NavBar.tsx

@@ -1,5 +1,5 @@
 "use client";
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import Link from "next/link";
 import Image from "next/image";
 import { usePathname } from "next/navigation";
@@ -16,8 +16,9 @@ import { FaTiktok } from "react-icons/fa";
 
 const NavBar = () => {
   const currentPath = usePathname();
-  console.log(currentPath);
+  // console.log(currentPath);
   const [menu_open, set_menu_open] = useState(false);
+  const [navbar, setNavbar] = useState(false);
 
   const handleNav = () => {
     set_menu_open(!menu_open);
@@ -39,10 +40,24 @@ const NavBar = () => {
     // { label: "Issues", href: "/issues" },
   ];
 
+  const changeBackground = () => {
+    // console.log(window.scrollY);
+    if (window.scrollY >= 20) {
+      setNavbar(true);
+    } else {
+      setNavbar(false);
+    }
+  };
+  if (typeof window !== "undefined") {
+    // Your client-side code that uses window goes here
+    window.addEventListener("scroll", changeBackground);
+  }
+
   return (
-    <nav className="">
+    <nav>
       {/* <center className="text-accent bg-black">O</center> */}
-      <div className="flex items-center justify-center xl:p-1 mx-auto bg-transparent md:p-4 absolute z-10 w-full">
+      <div className={navbar ? "flex items-center bg-black justify-center xl:p-1 mx-auto  md:p-4 absolute z-10 w-full h-[120px] bg-green"
+      : "flex items-center justify-center xl:p-1 bg-red-800 mx-auto  md:p-4 absolute z-10 w-full h-[120px]"}>
         <ul className="hover:cursor-pointer hidden md:block space-x-4 xl:text-xl font-sans antialiased">
           {links.map((link) => (
             <Link
@@ -108,7 +123,6 @@ const NavBar = () => {
         </div>
       </div>
 
-      
       <div className={menu_open ? "hidden" : ""}>
         <div
           onClick={handleNav}

Websites/jefes-nextjs/app/menu/Appetizers/page.tsx

@@ -5,7 +5,7 @@ import "./appetizers.css";
 const Appetizers = () => {
   return (
     <div className="flex flex-col">
-      <div className="text-4xl flex flex-row text-primary antialiased font-bold font-sans items-center justify-center">
+      <div className="text-4xl flex flex-row text-black antialiased font-bold font-sans items-center justify-center">
         <Image
           src="/gun01.svg"
           alt="gun icon for decor"
@@ -13,7 +13,7 @@ const Appetizers = () => {
           width={70}
           height={50}
         />
-        <div className="text-white">Appetizers</div>
+        <div className="">Appetizers</div>
         <Image
           src="/gun01.svg"
           alt="gun icon for decor"

Websites/jefes-nextjs/app/menu/layout.tsx

@@ -3,7 +3,8 @@ import Image from "next/image";
 
 const layout = ({ children }: { children: React.ReactNode }) => {
   return (
-    <section className="relative w-full min-h-screen md:h-screen flex md:block flex-col justify-center">
+    <div className="flex flex-col">
+      <div className="flex relative w-full h-[400px]">
       <Image
             src="/header02.webp"
             alt="nav image"
@@ -13,8 +14,10 @@ const layout = ({ children }: { children: React.ReactNode }) => {
             quality={100}
             className="brightness-[25%]"
           />
+      </div>
+      
       <div className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div>
-    </section>
+    </div>
   );
 };
 

Websites/jefes-nextjs/app/menu/page.tsx

@@ -3,9 +3,10 @@ import Appetizers from "./Appetizers/page";
 
 const menu = () => {
   return (
-    <div className="">
+    <div className="flex flex-col justify-center items-center">
-      <Appetizers />
+      <div>
-
+        <Appetizers />
+      </div>
     </div>
   );
 };

Websites/jefes-nextjs/app/page.tsx

@@ -1,21 +1,22 @@
-import Link from 'next/link';
+import Link from "next/link";
-import ProductCard from '../../UnusedPages/ProductCard/ProductCard';
+import Image from "next/image";
-import Image from 'next/image';
 
 export default function Home() {
   return (
     <main>
-      <div className="flex relative -z-10 pt-40 w-full h-[100vh] overflow-hidden"> 
+      <div className="flex flex-col relative justify-center items-center">
-        <Image
+        <div className="flex w-full h-[100vh]">
-          src="/img01.webp"
+          <Image
-          alt="nav image"
+            src="/img01.webp"
-          priority
+            alt="nav image"
-          fill
+            priority
-          style={{ objectFit: "cover", objectPosition: "center" }}
+            fill
-          quality={100}
+            style={{ objectFit: "cover", objectPosition: "center" }}
-          className="brightness-[20%] "
+            quality={100}
-        />
+            className="brightness-[20%] "
+          />
         </div>
+      </div>
     </main>
-  )
+  );
 }

Websites/jefes-nextjs/app/reviews/page.tsx

@@ -1,9 +1,14 @@
-import React from 'react'
+import React from "react";
+import { cn } from "../../lib/utils";
 
 const Reviews = () => {
   return (
-    <div>Reviews</div>
+    <div className="flex flex-col relative bg-gray-800 h-[400px]">
-  )
+      <div className="flex bg-paintbg">
-}
+        
+        </div>
+    </div>
+  );
+};
 
-export default Reviews
+export default Reviews;

Websites/jefes-nextjs/package-lock.json

@@ -8,7 +8,6 @@
       "name": "jefes-nextjs",
       "version": "0.1.0",
       "dependencies": {
-        "@prisma/client": "5.4.2",
         "@radix-ui/react-slot": "^1.0.2",
         "class-variance-authority": "^0.7.0",
         "classnames": "^2.3.2",
@@ -20,7 +19,6 @@
         "embla-carousel-react": "^8.0.0-rc14",
         "lucide-react": "^0.292.0",
         "next": "13.5.6",
-        "prisma": "^5.4.2",
         "react": "^18",
         "react-day-picker": "^8.9.1",
         "react-dom": "^18",
@@ -389,37 +387,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/@prisma/client": {
-      "version": "5.4.2",
-      "resolved": "https://registry.npmjs.org/@prisma/client/-/client-5.4.2.tgz",
-      "integrity": "sha512-2xsPaz4EaMKj1WS9iW6MlPhmbqtBsXAOeVttSePp8vTFTtvzh2hZbDgswwBdSCgPzmmwF+tLB259QzggvCmJqA==",
-      "hasInstallScript": true,
-      "dependencies": {
-        "@prisma/engines-version": "5.4.1-2.ac9d7041ed77bcc8a8dbd2ab6616b39013829574"
-      },
-      "engines": {
-        "node": ">=16.13"
-      },
-      "peerDependencies": {
-        "prisma": "*"
-      },
-      "peerDependenciesMeta": {
-        "prisma": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@prisma/engines": {
-      "version": "5.5.2",
-      "resolved": "https://registry.npmjs.org/@prisma/engines/-/engines-5.5.2.tgz",
-      "integrity": "sha512-Be5hoNF8k+lkB3uEMiCHbhbfF6aj1GnrTBnn5iYFT7GEr3TsOEp1soviEcBR0tYCgHbxjcIxJMhdbvxALJhAqg==",
-      "hasInstallScript": true
-    },
-    "node_modules/@prisma/engines-version": {
-      "version": "5.4.1-2.ac9d7041ed77bcc8a8dbd2ab6616b39013829574",
-      "resolved": "https://registry.npmjs.org/@prisma/engines-version/-/engines-version-5.4.1-2.ac9d7041ed77bcc8a8dbd2ab6616b39013829574.tgz",
-      "integrity": "sha512-wvupDL4AA1vf4TQNANg7kR7y98ITqPsk6aacfBxZKtrJKRIsWjURHkZCGcQliHdqCiW/hGreO6d6ZuSv9MhdAA=="
-    },
     "node_modules/@radix-ui/react-compose-refs": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
@@ -3840,21 +3807,6 @@
         "node": ">= 0.8.0"
       }
     },
-    "node_modules/prisma": {
-      "version": "5.5.2",
-      "resolved": "https://registry.npmjs.org/prisma/-/prisma-5.5.2.tgz",
-      "integrity": "sha512-WQtG6fevOL053yoPl6dbHV+IWgKo25IRN4/pwAGqcWmg7CrtoCzvbDbN9fXUc7QS2KK0LimHIqLsaCOX/vHl8w==",
-      "hasInstallScript": true,
-      "dependencies": {
-        "@prisma/engines": "5.5.2"
-      },
-      "bin": {
-        "prisma": "build/index.js"
-      },
-      "engines": {
-        "node": ">=16.13"
-      }
-    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",

Websites/jefes-nextjs/package.json

@@ -9,7 +9,6 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@prisma/client": "5.4.2",
     "@radix-ui/react-slot": "^1.0.2",
     "class-variance-authority": "^0.7.0",
     "classnames": "^2.3.2",
@@ -21,7 +20,6 @@
     "embla-carousel-react": "^8.0.0-rc14",
     "lucide-react": "^0.292.0",
     "next": "13.5.6",
-    "prisma": "^5.4.2",
     "react": "^18",
     "react-day-picker": "^8.9.1",
     "react-dom": "^18",
@@ -44,8 +42,5 @@
     "postcss": "^8",
     "tailwindcss": "^3",
     "typescript": "^5"
-  },
-  "prisma": {
-    "seed": "ts-node --compiler-options {\"module\":\"CommonJS\"} prisma/seed.ts"
   }
 }

Websites/jefes-nextjs/prisma/client.ts

@@ -1,19 +0,0 @@
-import { PrismaClient } from '@prisma/client'
-
-// ensures there is only one instance of prisma at any given moment
-
-const prismaClientSingleton = () => {
-  return new PrismaClient()
-}
-
-type PrismaClientSingleton = ReturnType<typeof prismaClientSingleton>
-
-const globalForPrisma = globalThis as unknown as {
-  prisma: PrismaClientSingleton | undefined
-}
-
-const prisma = globalForPrisma.prisma ?? prismaClientSingleton()
-
-export default prisma
-
-if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma