[Dashboard] Fix JSON donwload in upload-step.tsx (thirdweb-dev#5491)

kien-ngo · kien-ngo · commit 24f4e5acf5a4 · 2024-11-22T14:09:40.000Z
## Problem solved

Short description of the bug fixed or feature added

&lt;!-- start pr-codex --&gt;

---

## PR-Codex overview
This PR focuses on refactoring the `UploadStep` component in `upload-step.tsx` to replace `Heading` and `Link` components with standard HTML elements like `p` and `a`, enhancing simplicity and readability.

### Detailed summary
- Replaced `Heading` components with `p` elements for text display.
- Changed `Link` components to `a` elements for file downloads.
- Updated class names for styling consistency.
- Simplified the conditional rendering structure.

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

&lt;!-- end pr-codex --&gt;
diff --git a/apps/dashboard/src/core-ui/batch-upload/upload-step.tsx b/apps/dashboard/src/core-ui/batch-upload/upload-step.tsx
@@ -2,8 +2,6 @@ import { UnorderedList } from "@/components/ui/List/List";
 import { InlineCode } from "@/components/ui/inline-code";
 import { cn } from "@/lib/utils";
 import { UploadIcon } from "lucide-react";
-import Link from "next/link";
-import { Heading, Text } from "tw-components";
 
 interface UploadStepProps {
   // biome-ignore lint/suspicious/noExplicitAny: FIXME
@@ -39,50 +37,44 @@ export const UploadStep: React.FC<UploadStepProps> = ({
               )}
             />
             {isDragActive ? (
-              <Heading
-                as={Text}
-                size="label.md"
-                color="gray.600"
-                textAlign="center"
-              >
+              <p className="text-center text-muted-foreground">
                 Drop the files here
-              </Heading>
+              </p>
             ) : (
-              <Heading
-                as={Text}
-                size="label.md"
-                lineHeight={1.2}
-                color={hasFailed ? "red.500" : "gray.600"}
-                textAlign="center"
+              <p
+                className={cn(
+                  "text-center leading-[1.2]",
+                  hasFailed ? "text-red-500" : "text-muted-foreground",
+                )}
               >
                 {hasFailed
                   ? `No valid CSV or JSON file found. Please make sure your NFT metadata includes at least a "name" field and try again.`
                   : "Drag & Drop files or folders here, or click to select files"}
-              </Heading>
+              </p>
             )}
           </div>
         </div>
       </div>
       <div className="flex w-full flex-col gap-2 md:w-1/2">
-        <Heading size="subtitle.sm">Requirements</Heading>
+        <p className="text-lg">Requirements</p>
         <UnorderedList>
           <li>
             Files <em>must</em> contain one .csv or .json file with metadata. -{" "}
-            <Link
+            <a
               download
               className="text-link-foreground hover:text-foreground"
               href="/example.csv"
             >
               Download example.csv
-            </Link>
+            </a>
             .{" "}
-            <Link
+            <a
               download
               className="text-link-foreground hover:text-foreground"
               href="/example.json"
             >
               Download example.json
-            </Link>
+            </a>
             .
           </li>
           <li>
@@ -100,9 +92,7 @@ export const UploadStep: React.FC<UploadStepProps> = ({
             <strong>at the same time</strong>.
           </li>
         </UnorderedList>
-        <Heading size="subtitle.sm" mt={4}>
-          Options
-        </Heading>
+        <p className="mt-4 text-lg">Options</p>
         <UnorderedList>
           <li>
             Images and other file types can be used in combination.
@@ -120,25 +110,25 @@ export const UploadStep: React.FC<UploadStepProps> = ({
             can add an <InlineCode code="image" /> and/or
             <InlineCode code="animation_url" /> column and add the IPFS hashes
             there.{" "}
-            <Link
+            <a
               download
               className="text-link-foreground hover:text-foreground"
               href="/example-with-ipfs.csv"
             >
               Download example.csv
-            </Link>
+            </a>
           </li>
           <li>
             If you want to make your media files map to your NFTs, you can add
             the name of your files to the <InlineCode code="image" /> and
             <InlineCode code="animation_url" /> column.{" "}
-            <Link
+            <a
               download
               className="text-link-foreground hover:text-foreground"
               href="/example-with-maps.csv"
             >
               Download example.csv
-            </Link>
+            </a>
           </li>
         </UnorderedList>
       </div>
