133 lines
5.1 KiB
JavaScript
133 lines
5.1 KiB
JavaScript
import React from "react";
|
|
import { FaUser } from "react-icons/fa6";
|
|
|
|
const UserLayout = ({
|
|
children,
|
|
showBack = false,
|
|
title,
|
|
showNavbar = true,
|
|
bg = "bg.png",
|
|
}) => {
|
|
return (
|
|
<div className=" w-full relative min-h-[100dvh] flex flex-col bg-gray-100">
|
|
<img
|
|
className="w-screen h-screen object-cover pointer-events-none opacity-30 fixed z-10"
|
|
src={`/assets/images/${bg}`}
|
|
alt=""
|
|
/>
|
|
<img
|
|
className="fixed pointer-events-none z-20 top-24 -left-32 w-96 object-cover"
|
|
src="/assets/images/overlay1.png"
|
|
alt=""
|
|
/>
|
|
<img
|
|
className="fixed pointer-events-none z-20 bottom-8 -right-20 w-96 object-cover"
|
|
src="/assets/images/overlay2.png"
|
|
alt=""
|
|
/>
|
|
<HeaderLayout showBack={showBack} title={title} />
|
|
<div className="z-30">
|
|
<div className="md:max-w-[800px] w-full mx-auto pb-20 px-6 md:px-4 pt-24 md:pt-28 md:pb-0">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
{/* {showNavbar && <NavbarLayout />} */}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const HeaderLayout = ({ showBack = false, title = "Rumah Baca Kita" }) => {
|
|
return (
|
|
<div className="w-full flex items-center py-4 px-6 md:px-4 bg-[#6164E2] fixed top-0 left-0 z-[300]">
|
|
<div className="md:max-w-[800px] w-full mx-auto flex items-center">
|
|
<div
|
|
onClick={() => history.back()}
|
|
className="flex items-center flex-1"
|
|
>
|
|
<img
|
|
className=" h-16 pr-4"
|
|
src="/assets/images/logo.png"
|
|
alt=""
|
|
/>
|
|
{/* Icons back */}
|
|
{/* {showBack && (
|
|
<div className="text-white text-lg px-3">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="h-5 w-5"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="2"
|
|
d="M10 19l-7-7m0 0l7-7m-7 7h18"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
)} */}
|
|
<div className="text-white text-lg">{title}</div>
|
|
</div>
|
|
<div>
|
|
<div className="dropdown dropdown-end">
|
|
<div
|
|
tabIndex={0}
|
|
role="button"
|
|
className="btn btn-ghost btn-circle avatar"
|
|
>
|
|
<div className="w-10 rounded-full">
|
|
<img
|
|
alt="Tailwind CSS Navbar component"
|
|
src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<ul
|
|
tabIndex={0}
|
|
className="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 rounded-box w-52"
|
|
>
|
|
<li>
|
|
<a href="/logout">Logout</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const NavbarLayout = () => {
|
|
return (
|
|
<div className="w-full flex md:hidden items-center py-4 px-3 bg-gray-800 fixed bottom-0 left-0">
|
|
<div className="btm-nav">
|
|
<button className="active">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="h-5 w-5"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="2"
|
|
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
|
|
/>
|
|
</svg>
|
|
<span className="btm-nav-label">Home</span>
|
|
</button>
|
|
<button>
|
|
<FaUser />
|
|
<span className="btm-nav-label">Profile</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default UserLayout;
|