You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

76 lines
2.9 KiB
JavaScript

import React from 'react'
import ApplicationLogo from '@/Components/Defaults/ApplicationLogo'
import { Link, router, usePage } from '@inertiajs/react'
import { HiHome, HiOutlineHome, HiOutlineUserCircle } from 'react-icons/hi'
import {
HiArrowPathRoundedSquare,
HiOutlineShoppingCart,
} from 'react-icons/hi2'
export default function CustomerLayout({ children }) {
const {
props: {
auth: { user },
},
} = usePage()
const handleOnClick = (r) => {
router.get(route(r))
}
const isActive = (r) => {
if (route().current(r)) {
return 'text-blue-700 h-8 w-8'
}
return 'text-gray-600 h-8 w-8'
}
return (
<div className="min-h-screen flex flex-col sm:justify-center items-center">
<div className="flex flex-col w-full min-h-screen max-w-md bg-white shadow-md">
<div className="mb-10">{children}</div>
<div className="sticky bottom-0 flex flex-row justify-evenly w-full max-w-md bg-gray-50">
<div
className="py-2 px-10 hover:bg-blue-200"
onClick={() => handleOnClick('home.index')}
>
<HiOutlineHome className={isActive('home.index')} />
</div>
<div className="py-2 px-10 hover:bg-blue-200 flex flex-row">
<HiOutlineShoppingCart className="text-gray-600 h-8 w-8" />
<div>
<div className="bg-blue-300 text-blue-600 rounded-lg px-1 text-xs -ml-2">
1
</div>
</div>
</div>
<div className="py-2 px-10 hover:bg-blue-200">
<HiArrowPathRoundedSquare className="text-gray-600 h-8 w-8" />
</div>
{user !== null ? (
<div
className="py-2 px-10 hover:bg-blue-200"
onClick={() =>
handleOnClick('customer.profile.index')
}
>
<HiOutlineUserCircle
className={isActive('customer.profile.*')}
/>
</div>
) : (
<div
className="py-2 px-10 hover:bg-blue-200"
onClick={() => handleOnClick('customer.login')}
>
<HiOutlineUserCircle
className={isActive('customer.login')}
/>
</div>
)}
</div>
</div>
</div>
)
}