From 44b2634d4c494ecbc91da3057fe50ac16353a1e8 Mon Sep 17 00:00:00 2001
From: kien-ngo <github@kien.ngo>
Date: Tue, 15 Oct 2024 02:49:27 +0000
Subject: [PATCH] [Dashboard] Marketplace Listing drawer -> Sheet (#5008)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR refactors the `ListingDrawer` component by replacing the `Drawer` component with the `Sheet` component, streamlining the layout and improving the structure of the user interface.

### Detailed summary
- Removed `Drawer` component and replaced it with `Sheet` and `SheetContent`.
- Adjusted properties for `Sheet` to manage open state and layout.
- Updated class names for `SheetContent` to maintain styling consistency.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
---
 .../tabs/shared-components/listing-drawer.tsx   | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/apps/dashboard/src/contract-ui/tabs/shared-components/listing-drawer.tsx b/apps/dashboard/src/contract-ui/tabs/shared-components/listing-drawer.tsx
index 991b2849259..2f70eb478f6 100644
--- a/apps/dashboard/src/contract-ui/tabs/shared-components/listing-drawer.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/shared-components/listing-drawer.tsx
@@ -1,4 +1,5 @@
 import { WalletAddress } from "@/components/blocks/wallet-address";
+import { Sheet, SheetContent } from "@/components/ui/sheet";
 import {
   Flex,
   GridItem,
@@ -17,7 +18,7 @@ import type {
   EnglishAuction,
 } from "thirdweb/extensions/marketplace";
 import { useActiveAccount } from "thirdweb/react";
-import { Badge, Card, CodeBlock, Drawer, Heading, Text } from "tw-components";
+import { Badge, Card, CodeBlock, Heading, Text } from "tw-components";
 import { AddressCopyButton } from "tw-components/AddressCopyButton";
 import { NFTMediaWithEmptyState } from "tw-components/nft-media";
 import { CancelDirectListing } from "../direct-listings/components/cancel";
@@ -200,14 +201,8 @@ export const ListingDrawer: React.FC<NFTDrawerProps> = ({
   }
 
   return (
-    <Drawer
-      allowPinchZoom
-      preserveScrollBarGap
-      size="xl"
-      onClose={onClose}
-      isOpen={isOpen}
-    >
-      <Flex py={6} px={2} flexDir="column" gap={6}>
+    <Sheet open={isOpen} onOpenChange={onClose}>
+      <SheetContent className="flex w-full flex-col gap-6 py-6 md:min-w-[600px]">
         <Flex gap={6}>
           <NFTMediaWithEmptyState
             metadata={renderData.asset.metadata}
@@ -246,7 +241,7 @@ export const ListingDrawer: React.FC<NFTDrawerProps> = ({
             })}
           </TabPanels>
         </Tabs>
-      </Flex>
-    </Drawer>
+      </SheetContent>
+    </Sheet>
   );
 };