feat: migrate AssetDownload to tailwind

Author: saurabhburade

src/components/AssetDownload/index.tsx

@@ -1,25 +1,26 @@
 import { extname } from "path"
 
-import type { StaticImageData } from "next/image"
+import { BaseHTMLAttributes } from "react"
+import type { ImageProps, StaticImageData } from "next/image"
 import { useTranslation } from "next-i18next"
-import { Box, Flex, type FlexProps } from "@chakra-ui/react"
 
 import AssetDownloadArtist from "@/components/AssetDownload/AssetDownloadArtist"
 import AssetDownloadImage from "@/components/AssetDownload/AssetDownloadImage"
-import { ButtonLink } from "@/components/Buttons"
-import type { ImageProps } from "@/components/Image"
-import OldHeading from "@/components/OldHeading"
 
+import { cn } from "@/lib/utils/cn"
 import { trackCustomEvent } from "@/lib/utils/matomo"
 
+import { ButtonLink } from "../ui/buttons/Button"
+import { Flex, Stack } from "../ui/flex"
+
 type AssetDownloadProps = {
   title: string
   alt: string
   artistName?: string
   artistUrl?: string
   image: ImageProps["src"]
   svgUrl?: string
-} & FlexProps
+} & BaseHTMLAttributes<HTMLDivElement> & { asChild?: boolean }
 
 const AssetDownload = ({
   alt,
@@ -28,6 +29,7 @@ const AssetDownload = ({
   image,
   svgUrl,
   title,
+  className,
   ...props
 }: AssetDownloadProps) => {
   const { t } = useTranslation(["page-assets"])
@@ -41,23 +43,18 @@ const AssetDownload = ({
   const imgSrc = (image as StaticImageData).src
 
   return (
-    <Flex
-      flexDirection="column"
-      justifyContent="space-between"
-      m={4}
-      p={0}
+    <Stack
+      className={cn("m-4 justify-between gap-0 p-0", className)}
       {...props}
     >
-      <OldHeading as="h4" fontSize={{ base: "md", md: "xl" }} fontWeight="500">
-        {title}
-      </OldHeading>
-      <Box>
+      <h4 className="my-8 text-md font-medium md:text-xl">{title}</h4>
+      <div>
         <AssetDownloadImage image={image} alt={alt} />
         {artistName && (
           <AssetDownloadArtist artistName={artistName} artistUrl={artistUrl} />
         )}
-      </Box>
-      <Flex gap={5} mt={4}>
+      </div>
+      <Flex className="mt-4 gap-5">
         <ButtonLink
           href={imgSrc}
           onClick={matomoHandler}
@@ -73,7 +70,7 @@ const AssetDownload = ({
           </ButtonLink>
         )}
       </Flex>
-    </Flex>
+    </Stack>
   )
 }