added color change to navbar

This commit is contained in:
Jacob Delgado 2023-11-14 00:56:47 -08:00
parent 914209e5e9
commit 2cb4696ca3
29 changed files with 261 additions and 278 deletions

BIN
.DS_Store vendored Normal file

Binary file not shown.

BIN
Websites/.DS_Store vendored Normal file

Binary file not shown.

BIN
Websites/UnusedPages/.DS_Store vendored Normal file

Binary file not shown.

View File

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

View File

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

BIN
Websites/UnusedPages/api/.DS_Store vendored Normal file

Binary file not shown.

View File

@ -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
// }

View File

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

View File

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

View File

@ -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

View File

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

View File

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

View File

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

View File

@ -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
}

View File

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

View File

@ -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}

View File

@ -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"

View File

@ -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>
);
};

View File

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

View File

@ -1,21 +1,22 @@
import Link from 'next/link';
import ProductCard from '../../UnusedPages/ProductCard/ProductCard';
import Image from 'next/image';
import Link from "next/link";
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">
<Image
src="/img01.webp"
alt="nav image"
priority
fill
style={{ objectFit: "cover", objectPosition: "center" }}
quality={100}
className="brightness-[20%] "
/>
<div className="flex flex-col relative justify-center items-center">
<div className="flex w-full h-[100vh]">
<Image
src="/img01.webp"
alt="nav image"
priority
fill
style={{ objectFit: "cover", objectPosition: "center" }}
quality={100}
className="brightness-[20%] "
/>
</div>
</div>
</main>
)
);
}

View File

@ -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">
export default Reviews
</div>
</div>
);
};
export default Reviews;

Binary file not shown.

View File

@ -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",

View File

@ -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"
}
}

View File

@ -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