Shadcn migrate - AssetDownload - AssetDownloadArtist - AssetDownloadImage

src/components/AssetDownload/AssetDownloadArtist.tsx

@@ -1,9 +1,11 @@
 import { useTranslation } from "next-i18next"
-import { Flex } from "@chakra-ui/react"
 
 import Emoji from "@/components/Emoji"
-import Link from "@/components/Link"
-import Text from "@/components/OldText"
+
+import { cn } from "@/lib/utils/cn"
+
+import { Flex } from "../ui/flex"
+import { BaseLink } from "../ui/Link"
 
 type AssetDownloadArtistProps = {
   artistName: string
@@ -16,21 +18,13 @@ const AssetDownloadArtist = ({
 }: AssetDownloadArtistProps) => {
   const { t } = useTranslation("page-assets")
   return (
-    <Flex
-      mb="4"
-      border="1px"
-      borderTop="none"
-      borderColor="white700"
-      py="2"
-      px="4"
-      borderRadius="0 0 4px 4px"
-    >
-      <Flex me="2" fontSize="md" textColor="text300">
+    <Flex className={cn("mb-4 border border-t-0", "rounded-b px-4 py-2")}>
+      <Flex className="me-2">
         <Emoji text=":artist_palette:" className="me-2 text-2xl" />
         {t("page-assets-download-artist")}
       </Flex>
-      {artistUrl && <Link href={artistUrl}>{artistName}</Link>}
-      {!artistUrl && <Text m="0">{artistName}</Text>}
+      {artistUrl && <BaseLink href={artistUrl}>{artistName}</BaseLink>}
+      {!artistUrl && <p>{artistName}</p>}
     </Flex>
   )
 }

src/components/AssetDownload/AssetDownloadImage.tsx

@@ -1,15 +1,16 @@
-import { Center } from "@chakra-ui/react"
+import { ImageProps } from "next/image"
 
-import { Image, type ImageProps } from "@/components/Image"
+import { TwImage } from "../Image"
+import { Center } from "../ui/flex"
 
 interface AssetDownloadImageProps {
   image: ImageProps["src"]
   alt: string
 }
 
 const AssetDownloadImage = ({ image, alt }: AssetDownloadImageProps) => (
-  <Center border="1px" borderColor="white700" p="8" w="full">
-    <Image src={image} alt={alt} w="full" alignSelf="center" />
+  <Center className="w-full border p-8">
+    <TwImage src={image} alt={alt} className="w-full self-center" />
   </Center>
 )
 

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>
 
 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>
   )
 }