[Dashboard] Remove Drawer from mintTo form

thirdweb-dev · Nov 1, 2024 · cf3c54b · cf3c54b
1 parent b031c36
commit cf3c54b
Show file tree

Hide file tree

Showing 3 changed files with 198 additions and 188 deletions.
diff --git a/.../src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/mint-button.tsx b/.../src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/mint-button.tsx
@@ -1,10 +1,17 @@
 "use client";
 
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
 import { MinterOnly } from "@3rdweb-sdk/react/components/roles/minter-only";
-import { useDisclosure } from "@chakra-ui/react";
 import { PlusIcon } from "lucide-react";
+import { useState } from "react";
 import type { ThirdwebContract } from "thirdweb";
-import { Button, Drawer } from "tw-components";
+import { Button } from "tw-components";
 import { NFTMintForm } from "./mint-form";
 
 interface NFTMintButtonProps {
@@ -17,26 +24,31 @@ export const NFTMintButton: React.FC<NFTMintButtonProps> = ({
   isErc721,
   ...restButtonProps
 }) => {
-  const { isOpen, onOpen, onClose } = useDisclosure();
+  const [open, setOpen] = useState(false);
+
   return (
     <MinterOnly contract={contract}>
-      <Drawer
-        allowPinchZoom
-        preserveScrollBarGap
-        size="lg"
-        onClose={onClose}
-        isOpen={isOpen}
-      >
-        <NFTMintForm contract={contract} isErc721={isErc721} />
-      </Drawer>
-      <Button
-        colorScheme="primary"
-        leftIcon={<PlusIcon className="size-5" />}
-        {...restButtonProps}
-        onClick={onOpen}
-      >
-        Mint
-      </Button>
+      <Sheet open={open} onOpenChange={setOpen}>
+        <SheetTrigger asChild>
+          <Button
+            colorScheme="primary"
+            leftIcon={<PlusIcon className="size-5" />}
+            {...restButtonProps}
+          >
+            Mint
+          </Button>
+        </SheetTrigger>
+        <SheetContent className="w-full overflow-y-auto sm:min-w-[540px] lg:min-w-[700px]">
+          <SheetHeader>
+            <SheetTitle className="text-left">Mint NFT</SheetTitle>
+          </SheetHeader>
+          <NFTMintForm
+            contract={contract}
+            isErc721={isErc721}
+            setOpen={setOpen}
+          />
+        </SheetContent>
+      </Sheet>
     </MinterOnly>
   );
 };