feat(Simulator/WalletHome/NFTList): migrate to Tailwind

Author: TylerAPfledderer

src/components/Simulator/WalletHome/NFTList.tsx

@@ -1,7 +1,7 @@
-import React from "react"
-import { Box, Flex, type FlexProps, Text } from "@chakra-ui/react"
+import { TwImage as Image } from "@/components/Image"
+import { Flex, type FlexProps } from "@/components/ui/flex"
 
-import { Image } from "@/components/Image"
+import { cn } from "@/lib/utils/cn"
 
 import type { NFT } from "./interfaces"
 
@@ -11,26 +11,21 @@ type NFTListProps = FlexProps & {
   nfts: Array<NFT>
 }
 export const NFTList = ({ nfts, ...flexProps }: NFTListProps) => {
-  const size = useBreakpointValue({ base: 20, md: 24 })
+  const size = useBreakpointValue({
+    base: "max-w-20 max-h-20",
+    md: "max-w-24 max-h-24",
+  })
   return (
-    <Flex w="full" gap={4} h="full" flexWrap="wrap" {...flexProps}>
+    <Flex className="size-full flex-wrap gap-4" {...flexProps}>
       {nfts.length ? (
         nfts.map(({ title, image }) => (
-          <Box key={title} w="fit-content">
-            <Image
-              src={image}
-              alt=""
-              objectFit="contain"
-              maxW={size}
-              maxH={size}
-            />
-            <Text fontSize="xs" m={0}>
-              {title}
-            </Text>
-          </Box>
+          <div key={title} className="w-fit">
+            <Image src={image} alt="" className={cn("object-contain", size)} />
+            <p className="text-xs">{title}</p>
+          </div>
         ))
       ) : (
-        <Text>No NFTs yet!</Text>
+        <p>No NFTs yet!</p>
       )}
     </Flex>
   )