71 lines
2.1 KiB
TypeScript
71 lines
2.1 KiB
TypeScript
import React from "react";
|
|
import Image from "next/image";
|
|
import MenuLinks from "../components/MenuBar/MenuLinks";
|
|
import { cn } from "../../../nextjs-dashboard/lib/utils";
|
|
|
|
const layout = ({ children }: { children: React.ReactNode }) => {
|
|
return (
|
|
<div className="flex flex-col relative justify-center items-center">
|
|
<div className="flex relative pt-40 w-full h-[400px] overflow-hidden">
|
|
<Image
|
|
src="/IMG_2431.jpg"
|
|
alt="nav image"
|
|
priority
|
|
fill
|
|
style={{ objectFit: "cover", objectPosition: "center" }}
|
|
quality={100}
|
|
className="brightness-[20%] "
|
|
/>
|
|
<div className="flex flex-col w-full text-center xl:text-5xl xl:block text-white lg:text-2xl absolute">
|
|
<div className="p-6 ">
|
|
<p className="py-4">
|
|
<span className="">Menu</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-row justify-evenly pt-4">
|
|
<MenuLinks />
|
|
</div>
|
|
<div className="flex flex-row items-center justify-evenly text-xl relative font-normal mt-4">
|
|
<span className="grid grid-rows-1 grid-cols-2">
|
|
Spicy-
|
|
<div className="relative w-1/2">
|
|
<Image
|
|
src="/red-chili-pepper.svg"
|
|
alt="chili pepper spice"
|
|
fill
|
|
style={{
|
|
objectFit: "contain",
|
|
}}
|
|
quality={100}
|
|
className=""
|
|
/>
|
|
</div>
|
|
</span>
|
|
<span className="grid grid-cols-2">
|
|
Favorite-
|
|
<div className="relative w-1/3">
|
|
<Image
|
|
src="/star.svg"
|
|
alt="chili pepper spice"
|
|
fill
|
|
style={{
|
|
objectFit: "contain",
|
|
}}
|
|
quality={100}
|
|
className=""
|
|
/>
|
|
</div>
|
|
</span>
|
|
</div>
|
|
|
|
<div className="flex-grow w-full h-full p-6 md:overflow-y-auto md:px-14">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default layout;
|