ImAlpha/Portfolio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added menu items via json

Browse Source
This commit is contained in:
ImAlpha 2024-01-02 21:39:12 -08:00
parent b2df4da08e
commit 51e4aa6df1
7 changed files with 227 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
Websites/jefes-nextjs/app/RobleAlt.woff Normal file
View File

Binary file not shown.

7
Websites/jefes-nextjs/app/layout.tsx
View File

@ -4,8 +4,13 @@ import "./globals.css";
import NavBar from "./components/NavBar/NavBar"; import NavBar from "./components/NavBar/NavBar";
import Image from "next/image"; import Image from "next/image";
import Footer from "@/components/Footer/footer"; import Footer from "@/components/Footer/footer";
import localFont from 'next/font/local';
const inter = Inter({ subsets: ["latin"] }); const inter = Inter({ subsets: ["latin"] });
const robleAlt = localFont({
src: './RobleAlt.woff',
display: 'swap',
})
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Jefe's Mexican Cocina & Cantina", title: "Jefe's Mexican Cocina & Cantina",
@ -19,7 +24,7 @@ export default function RootLayout({
}) { }) {
return ( return (
<html lang="en"> <html lang="en">
<body className={inter.className}> <body className={robleAlt.className}>
<NavBar /> <NavBar />
{/* <Image {/* <Image
src="/PaintBackground1.webp" src="/PaintBackground1.webp"

32
Websites/jefes-nextjs/app/menu/Appetizers/items.json Normal file
View File

@ -0,0 +1,32 @@
[
{
"id": 1,
"name": "Guacamole Dip",
"price_large": 7,
"price_small": 5,
"spicy": "no",
"description": "avocado dripppppp"
},
{
"id": 2,
"name": "CHILES TOREADOS",
"price": 5,
"spicy": "yes",
"description": "3 fresh grilled jalepeño peppers topped with caramelized onions, Pico de Gallo, and lime wedges."
},
{
"id": 3,
"name": "QUESO DIP",
"price_large": 8,
"price_small": 6,
"spicy": "yes",
"description": "That cheeeeeeeeeeeeese mannnnnnn"
},
{
"id": 4,
"name": "SAMPLER PLATTER",
"price": 13,
"spicy": "no",
"description": "1 cheese quesadilla, 2 crispy flautas beef/chicken, 2 crunchy tacos beef/chicken and cheesy tacos. Served with a side of salsa, pico de gallo, and queso."
}
]

83
Websites/jefes-nextjs/app/menu/Appetizers/page.tsx
View File

@ -1,10 +1,12 @@
import React from "react"; import React from "react";
import Image from "next/image"; import Image from "next/image";
import "./appetizers.css"; import "./appetizers.css";
import Menu from "./items.json";
import { Button } from "@/components/ui/button";
const Appetizers = () => { const Appetizers = () => {
return ( return (
<div className="flex flex-col"> <div className="flex flex-col lg:w-[1480px] md:w-[800px]">
<div className="text-4xl flex flex-row text-black 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 <Image
src="/gun01.svg" src="/gun01.svg"
@ -22,29 +24,82 @@ const Appetizers = () => {
height={50} height={50}
/> />
</div> </div>
<div>
<div className="p-6"> <div className="bg-red-300 flex flex-wrap flex-row gap-12 pt-6 justify-between">
<h4> {Menu.map((menu_item) => {
Guacamole Dip <span>$7 - Large, $5 - small</span> return (
<div
key={menu_item.id}
className="flex flex-col flex-wrap bg-blue-300 h-[452px] w-[325px] rounded-lg shadow-xl"
>
<div className="h-[55%] relative w-full overflow-hidden">
<Image
src="/food01.jpg"
alt="chili pepper spice"
fill
style={{ objectFit: "cover", objectPosition: "center" }}
quality={100}
className="rounded-t-lg"
/>
</div>
<h4 className="space-x-4">
<strong>{menu_item.name}</strong>
</h4>
<p>Description: {menu_item.description}</p>
<div className="flex flex-row bg-gray-500 justify-evenly">
<div className="bg-red-400 flex flex-row">
<span>
{menu_item.price_large ? (
<span>
<strong>Large</strong> - ${menu_item.price_large},{" "}
<strong>Small</strong> - ${menu_item.price_small}
</span>
) : (
<span>${menu_item.price}</span>
)}
</span>
</div>
<div className="flex bg-emerald-400 w-1/2 relative">
<div className="flex bg-blue-600 w-3 h-full items-end justify-end">
<div className="">
</div>
</div>
</div>
</div>
</div>
);
})}
</div>
{/* <div className="col-span-2 gap-6 bg-green-400">
<div className="flex flex-row space-x-2 bg-gray-400">
<h4 className="text-semibold">
Guacamole Dip
<div className="">
<span>$7 - Large, $5 - small</span>
</div>
</h4> </h4>
<p> <p>
Made fresh daily. Avocado, Pico de Gallo, Seasoning, with fresh lime Made fresh daily. Avocado, Pico de Gallo, Seasoning, with fresh lime
juice. juice.
</p> </p>
</div> </div>
<div> <div className="flex flex-row space-x-2 bg-pink-400">
<h4> <h4>Chiles Toreados -</h4>
Chiles Toreados <span>$5</span> <div className="flex relative space-x-6">
<span>$5</span>
<Image <Image
src="/red-chili-pepper.svg" src="/red-chili-pepper.svg"
alt="gun icon for decor" alt="chili pepper spice"
className="rotate-45" fill
width={70} style={{ objectFit: "contain", objectPosition: "center" }}
height={50} quality={100}
className=""
/> />
</h4> </div>
</div> </div>
</div> </div> */}
</div> </div>
); );
}; };

4
Websites/jefes-nextjs/app/menu/layout.tsx
View File

@ -4,7 +4,7 @@ import MenuLinks from "../components/MenuBar/MenuLinks";
const layout = ({ children }: { children: React.ReactNode }) => { const layout = ({ children }: { children: React.ReactNode }) => {
return ( return (
<div className="flex flex-col relative justify-center items-center "> <div className="flex flex-col relative justify-center items-center">
<div className="flex relative pt-40 w-full h-[400px] overflow-hidden"> <div className="flex relative pt-40 w-full h-[400px] overflow-hidden">
<Image <Image
src="/IMG_2431.jpg" src="/IMG_2431.jpg"
@ -26,7 +26,7 @@ const layout = ({ children }: { children: React.ReactNode }) => {
<div className="flex flex-row justify-evenly pt-4"> <div className="flex flex-row justify-evenly pt-4">
<MenuLinks /> <MenuLinks />
</div> </div>
<div className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div> <div className="flex-grow w-full p-6 md:overflow-y-auto md:p-12">{children}</div>
</div> </div>
); );
}; };

79
Websites/jefes-nextjs/components/ui/card.tsx Normal file
View File

@ -0,0 +1,79 @@
import * as React from "react"
import { cn } from "@/lib/utils"
const Card = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn(
"rounded-lg border bg-card text-card-foreground shadow-sm",
className
)}
{...props}
/>
))
Card.displayName = "Card"
const CardHeader = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("flex flex-col space-y-1.5 p-6", className)}
{...props}
/>
))
CardHeader.displayName = "CardHeader"
const CardTitle = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLHeadingElement>
>(({ className, ...props }, ref) => (
<h3
ref={ref}
className={cn(
"text-2xl font-semibold leading-none tracking-tight",
className
)}
{...props}
/>
))
CardTitle.displayName = "CardTitle"
const CardDescription = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => (
<p
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
{...props}
/>
))
CardDescription.displayName = "CardDescription"
const CardContent = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
))
CardContent.displayName = "CardContent"
const CardFooter = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("flex items-center p-6 pt-0", className)}
{...props}
/>
))
CardFooter.displayName = "CardFooter"
export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

56
Websites/jefes-nextjs/package-lock.json generated
View File

@ -203,6 +203,28 @@
"node": ">=16" "node": ">=16"
} }
}, },
"node_modules/@cspotcode/source-map-support": {
"version": "0.8.1",
"resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
"integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==",
"dev": true,
"dependencies": {
"@jridgewell/trace-mapping": "0.3.9"
},
"engines": {
"node": ">=12"
}
},
"node_modules/@cspotcode/source-map-support/node_modules/@jridgewell/trace-mapping": {
"version": "0.3.9",
"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz",
"integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==",
"dev": true,
"dependencies": {
"@jridgewell/resolve-uri": "^3.0.3",
"@jridgewell/sourcemap-codec": "^1.4.10"
}
},
"node_modules/@drizzle-team/studio": { "node_modules/@drizzle-team/studio": {
"version": "0.0.35", "version": "0.0.35",
"resolved": "https://registry.npmjs.org/@drizzle-team/studio/-/studio-0.0.35.tgz", "resolved": "https://registry.npmjs.org/@drizzle-team/studio/-/studio-0.0.35.tgz",
@ -1676,9 +1698,9 @@
} }
}, },
"node_modules/acorn-walk": { "node_modules/acorn-walk": {
"version": "8.3.0", "version": "8.3.1",
"resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.0.tgz", "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.1.tgz",
"integrity": "sha512-FS7hV565M5l1R08MXqo8odwMTB02C2UqzB17RVgu9EyuYFBqJZ3/ZY97sQD5FewVu1UyDFc1yztUDrAwT0EypA==", "integrity": "sha512-TgUZgYvqZprrl7YldZNoa9OciCAyZR+Ejm9eXzKCmjsF5IKp/wgQ7Z/ZpjpGTIUPwrHQIcYeI8qDh4PsEwxMbw==",
"dev": true, "dev": true,
"engines": { "engines": {
"node": ">=0.4.0" "node": ">=0.4.0"
@ -5031,9 +5053,9 @@
} }
}, },
"node_modules/miniflare": { "node_modules/miniflare": {
"version": "3.20231030.1", "version": "3.20231030.4",
"resolved": "https://registry.npmjs.org/miniflare/-/miniflare-3.20231030.1.tgz", "resolved": "https://registry.npmjs.org/miniflare/-/miniflare-3.20231030.4.tgz",
"integrity": "sha512-Y+EkgV/aFg/3Y/xfFtImK36sLZGXvNS45avVEz0cUCA2pGpg4hGdPu1Udmz5b06SyeUEFVf/dEDMJwdRYVEgLw==", "integrity": "sha512-7MBz0ArLuDop1WJGZC6tFgN6c5MRyDOIlxbm3yp0TRBpvDS/KsTuWCQcCjsxN4QQ5zvL3JTkuIZbQzRRw/j6ow==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"acorn": "^8.8.0", "acorn": "^8.8.0",
@ -7500,9 +7522,9 @@
} }
}, },
"node_modules/undici": { "node_modules/undici": {
"version": "5.28.1", "version": "5.28.2",
"resolved": "https://registry.npmjs.org/undici/-/undici-5.28.1.tgz", "resolved": "https://registry.npmjs.org/undici/-/undici-5.28.2.tgz",
"integrity": "sha512-xcIIvj1LOQH9zAL54iWFkuDEaIVEjLrru7qRpa3GrEEHk6OBhb/LycuUY2m7VCcTuDeLziXCxobQVyKExyGeIA==", "integrity": "sha512-wh1pHJHnUeQV5Xa8/kyQhO7WFa8M34l026L5P/+2TYiakvGy5Rdc8jWZVyG7ieht/0WgJLEd3kcU5gKx+6GC8w==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@fastify/busboy": "^2.0.0" "@fastify/busboy": "^2.0.0"
@ -7713,24 +7735,24 @@
} }
}, },
"node_modules/wrangler": { "node_modules/wrangler": {
"version": "3.17.1", "version": "3.22.1",
"resolved": "https://registry.npmjs.org/wrangler/-/wrangler-3.17.1.tgz", "resolved": "https://registry.npmjs.org/wrangler/-/wrangler-3.22.1.tgz",
"integrity": "sha512-Pr9+/tjFkthzG63uoVm1NtVvgokT6p92fy1UsOgrntHyTu0pZMC1VJzG0NC8Vhs+z/+yTT8AqVV6AiJb3w8ZOQ==", "integrity": "sha512-fN7WOF6Ono/TV5V90PuJQNf0azS7B+5C/N/KRjqhlAIQBz+c0yLOGkF6kC/akxjr1yIAC9AzcPk9+OuTSq0C+g==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@cloudflare/kv-asset-handler": "^0.2.0", "@cloudflare/kv-asset-handler": "^0.2.0",
"@cspotcode/source-map-support": "0.8.1",
"@esbuild-plugins/node-globals-polyfill": "^0.2.3", "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
"@esbuild-plugins/node-modules-polyfill": "^0.2.2", "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
"blake3-wasm": "^2.1.5", "blake3-wasm": "^2.1.5",
"chokidar": "^3.5.3", "chokidar": "^3.5.3",
"esbuild": "0.17.19", "esbuild": "0.17.19",
"miniflare": "3.20231030.1", "miniflare": "3.20231030.4",
"nanoid": "^3.3.3", "nanoid": "^3.3.3",
"path-to-regexp": "^6.2.0", "path-to-regexp": "^6.2.0",
"resolve.exports": "^2.0.2", "resolve.exports": "^2.0.2",
"selfsigned": "^2.0.1", "selfsigned": "^2.0.1",
"source-map": "0.6.1", "source-map": "0.6.1",
"source-map-support": "0.5.21",
"xxhash-wasm": "^1.0.1" "xxhash-wasm": "^1.0.1"
}, },
"bin": { "bin": {
@ -8139,9 +8161,9 @@
"integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==" "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
}, },
"node_modules/ws": { "node_modules/ws": {
"version": "8.14.2", "version": "8.16.0",
"resolved": "https://registry.npmjs.org/ws/-/ws-8.14.2.tgz", "resolved": "https://registry.npmjs.org/ws/-/ws-8.16.0.tgz",
"integrity": "sha512-wEBG1ftX4jcglPxgFCMJmZ2PLtSbJ2Peg6TmpJFTbe9GZYOQCDPdMYu/Tm0/bGZkw8paZnJY45J4K2PZrLYq8g==", "integrity": "sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==",
"dev": true, "dev": true,
"engines": { "engines": {
"node": ">=10.0.0" "node": ">=10.0.0"