forked from crowetic/commerce
69 lines
2.2 KiB
TypeScript
69 lines
2.2 KiB
TypeScript
import { FC } from 'react'
|
|
import { UserNav } from '@components/core'
|
|
import { Button } from '@components/ui'
|
|
import { Trash, Cross } from '@components/icon'
|
|
import { useUI } from '@components/ui/context'
|
|
import { useCart } from '@lib/bigcommerce/cart'
|
|
|
|
const CartSidebarView: FC = () => {
|
|
const { data, isEmpty } = useCart()
|
|
const { closeSidebar } = useUI()
|
|
|
|
console.log('CART', data, isEmpty)
|
|
|
|
return (
|
|
<>
|
|
<header className="px-4 py-6 sm:px-6 border-b border-gray-200">
|
|
<div className="flex items-start justify-between space-x-3">
|
|
<div className="h-7 flex items-center">
|
|
<button
|
|
onClick={() => closeSidebar()}
|
|
aria-label="Close panel"
|
|
className="text-gray-400 hover:text-gray-500 transition ease-in-out duration-150"
|
|
>
|
|
<Cross className="h-6 w-6" />
|
|
</button>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<UserNav />
|
|
</div>
|
|
</div>
|
|
<h2 className="pt-6 text-lg leading-7 font-medium text-gray-900 uppercase">
|
|
My Cart
|
|
</h2>
|
|
</header>
|
|
|
|
<div className="px-4 sm:px-6 py-4 flex-1">
|
|
<ul className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200">
|
|
<li className="flex flex-row space-x-6">
|
|
<div className="h-12 w-12 bg-violet"></div>
|
|
<div className="flex-1 flex flex-col">
|
|
<span>T-Shirt</span>
|
|
<div className="py-2">
|
|
<span>-</span>
|
|
<input
|
|
className="w-6 border-gray-300 border mx-3 rounded text-center text-sm"
|
|
defaultValue="1"
|
|
/>
|
|
<span>+</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col space-y-2">
|
|
<span>$50.00</span>
|
|
<span className="flex justify-end">
|
|
<Trash />
|
|
</span>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div className="flex-shrink-0 px-4 border-t border-gray-200 py-5 sm:px-6">
|
|
<Button>Proceed to Checkout</Button>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default CartSidebarView
|