[Dashboard] Fix JSON donwload in upload-step.tsx

Author: kien-ngo

apps/dashboard/src/core-ui/batch-upload/upload-step.tsx

@@ -3,7 +3,6 @@ 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 +38,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
-              download
+            <a
+              download="example.json"
               className="text-link-foreground hover:text-foreground"
               href="/example.json"
             >
               Download example.json
-            </Link>
+            </a>
             .
           </li>
           <li>
@@ -100,9 +93,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.