update

Author: kien-ngo

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/list-button.tsx

@@ -8,6 +8,7 @@ import {
   SheetTitle,
   SheetTrigger,
 } from "@/components/ui/sheet";
+import { TabButtons } from "@/components/ui/tabs";
 import { ListerOnly } from "@3rdweb-sdk/react/components/roles/lister-only";
 import { PlusIcon } from "lucide-react";
 import { useState } from "react";
@@ -21,6 +22,8 @@ interface CreateListingButtonProps {
   type?: "direct-listings" | "english-auctions";
 }
 
+const LISTING_MODES = ["Select NFT", "Manual"] as const;
+
 export const CreateListingButton: React.FC<CreateListingButtonProps> = ({
   createText = "Create",
   type,
@@ -29,6 +32,8 @@ export const CreateListingButton: React.FC<CreateListingButtonProps> = ({
 }) => {
   const address = useActiveAccount()?.address;
   const [open, setOpen] = useState(false);
+  const [listingMode, setListingMode] =
+    useState<(typeof LISTING_MODES)[number]>("Select NFT");
 
   return (
     <ListerOnly contract={contract}>
@@ -40,14 +45,27 @@ export const CreateListingButton: React.FC<CreateListingButtonProps> = ({
         </SheetTrigger>
         <SheetContent className="w-full overflow-y-auto sm:min-w-[540px] lg:min-w-[700px]">
           <SheetHeader>
-            <SheetTitle className="mb-5 text-left">{createText}</SheetTitle>
+            <SheetTitle className="mb-3 text-left">{createText}</SheetTitle>
           </SheetHeader>
-          <CreateListingsForm
-            contract={contract}
-            type={type}
-            actionText={createText}
-            setOpen={setOpen}
+          <TabButtons
+            tabs={LISTING_MODES.map((mode) => ({
+              name: mode,
+              isActive: mode === listingMode,
+              onClick: () => setListingMode(mode),
+              isEnabled: true,
+            }))}
+            tabClassName="text-sm gap-2 !text-sm"
+            tabContainerClassName="gap-0.5"
           />
+          <div className="mt-5">
+            <CreateListingsForm
+              contract={contract}
+              type={type}
+              actionText={createText}
+              setOpen={setOpen}
+              mode={listingMode === "Select NFT" ? "automatic" : "manual"}
+            />
+          </div>
         </SheetContent>
       </Sheet>
     </ListerOnly>