Implement Cart drawer component

webdevsk · Oct 4, 2023 · 998528e · 998528e
1 parent a498cd2
commit 998528e
Showing 1 changed file with 61 additions and 25 deletions.
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -1,11 +1,11 @@
-import { Button, Typography } from "@material-tailwind/react"
+import { Button, Drawer, Typography } from "@material-tailwind/react"
 import { Link } from "react-router-dom"
 import SearchBar from "./SearchBar"
-import { Fragment } from "react"
+import { Fragment, useState } from "react"
 import createUnique from "../hooks/createUnique"
 import { response } from "../assets/disposable"
 import { FloatingOverlay, FloatingPortal, size } from "@floating-ui/react"
-import { Popover } from "@headlessui/react"
+import { Popover, Portal } from "@headlessui/react"
 import { Float } from "@headlessui-float/react"
 import { HiChevronDown } from "react-icons/hi"
 import MainMenuContext, {
@@ -15,6 +15,7 @@ import HeaderMenuContext, {
  useHeaderMenuContext,
 } from "../contexts/HeaderMenuContext"
 import { Desktop, Mobile } from "./ui/ReactResponsive"
+import { IoIosClose } from "react-icons/io"
 
 const mainMenu = [
  {
@@ -139,28 +140,7 @@ const HeaderToolBar = () => (
  </svg>
  <Typography variant="h6">Account</Typography>
  </Button>
-
- <Button
- variant="text"
- className="flex flex-wrap items-end gap-1 p-0 text-white hover:bg-transparent hover:text-accent active:bg-transparent"
- >
- <svg
- xmlns="http:https://www.w3.org/2000/svg"
- fill="none"
- viewBox="0 0 24 24"
- strokeWidth={1.5}
- stroke="currentColor"
- className="h-7 w-7"
- >
- <path
- strokeLinecap="round"
- strokeLinejoin="round"
- d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"
- />
- </svg>
-
- <Typography variant="h6">Cart</Typography>
- </Button>
+ <Cart />
  </div>
  </div>
 )
@@ -249,3 +229,59 @@ const TopMiniMenuDesktop = () => {
  </div>
  )
 }
+
+const Cart = () => {
+ const [isOpen, setIsOpen] = useState(false)
+ return (
+ <>
+ <Button
+ variant="text"
+ className="flex flex-wrap items-end gap-1 p-0 text-white hover:bg-transparent hover:text-accent active:bg-transparent"
+ onClick={() => setIsOpen(true)}
+ >
+ <svg
+ xmlns="http:https://www.w3.org/2000/svg"
+ fill="none"
+ viewBox="0 0 24 24"
+ strokeWidth={1.5}
+ stroke="currentColor"
+ className="h-7 w-7"
+ >
+ <path
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"
+ />
+ </svg>
+
+ <Typography variant="h6">Cart</Typography>
+ </Button>
+ <Drawer
+ open={isOpen}
+ onClose={() => setIsOpen(false)}
+ placement="right"
+ className="flex h-[100dvh] flex-col overflow-y-auto text-body"
+ overlay={false}
+ >
+ <div className="sticky top-0 z-[1] flex items-center justify-between rounded-t-xl bg-white p-4 pb-4">
+ <Typography variant="h4">Cart</Typography>
+ <button
+ onClick={() => setIsOpen(false)}
+ className="rounded-sm hover:bg-gray-100"
+ >
+ <IoIosClose className="h-6 w-6" />
+ </button>
+ </div>
+ </Drawer>
+ {isOpen && (
+ <FloatingPortal>
+ <FloatingOverlay
+ lockScroll
+ onClick={() => setIsOpen(false)}
+ className="fixed inset-0 z-20 bg-black/30"
+ ></FloatingOverlay>
+ </FloatingPortal>
+ )}
+ </>
+ )
+}