From a99f540279f23248ecf13258e42936d114d2e620 Mon Sep 17 00:00:00 2001
From: ruru <142723369+ruru-m07@users.noreply.github.com>
Date: Tue, 24 Sep 2024 18:08:53 +0530
Subject: [PATCH] fix(docs): fix dropzone docs and make it more cleaner

---
 apps/www/content/docs/components/dropzone.mdx | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/apps/www/content/docs/components/dropzone.mdx b/apps/www/content/docs/components/dropzone.mdx
index f2ab0e7..c50c83c 100644
--- a/apps/www/content/docs/components/dropzone.mdx
+++ b/apps/www/content/docs/components/dropzone.mdx
@@ -51,7 +51,9 @@ This component is a **wrapper** around the [react-dropzone](https://github.com/r
 
 <Tabs items={["Preview", "Code"]}>
   <Tab className={"flex justify-center"} value="Preview" >
-    <Dropzone className="m-10" />
+    <div className="p-4 w-full">
+      <Dropzone />
+    </div>
   </Tab>
   <Tab className={"-mt-8"} value="Code">
 ```tsx
@@ -73,7 +75,9 @@ In this example, we learn how to handle files using the Dropzone component.
 
 <Tabs items={["Preview", "Code"]}>
   <Tab className={"flex justify-center"} value="Preview" >
-    <AdvanceDropzone className="m-10" />
+    <div className="p-4 w-full">
+      <AdvanceDropzone className="m-10" />
+    </div>
   </Tab>
   <Tab className={"-mt-8"} value="Code">
 ```tsx
@@ -132,6 +136,17 @@ export default AdvanceDropzone;
   </Tab>
 </Tabs>
 
+## Import
+
+We are exporting the `RD` component from the `react-dropzone` module.
+Here RD is the alias for the `react-dropzone` library.
+
+```tsx title="dropzone.tsx"
+// [!code word:RD]
+import * as RD from "react-dropzone";
+export { RD };
+```
+
 ## Props
 
 | Name      | Type                                              | Default | Description                                               |