Portfolio/Websites/jefes-nextjs/app/menu/layout.tsx
2024-01-24 23:41:19 -08:00

35 lines
1.1 KiB
TypeScript

import React from "react";
import Image from "next/image";
import MenuLinks from "../components/MenuBar/MenuLinks";
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-grow w-full h-full p-6 md:overflow-y-auto md:p-12">{children}</div>
</div>
);
};
export default layout;