[Dashboard] migrate SelectOption to shadcn

Author: jnsdls

apps/dashboard/src/core-ui/batch-upload/lazy-mint-form/select-option.tsx

@@ -1,10 +1,10 @@
+import { Card } from "@/components/ui/card";
+import { ToolTipLabel } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
-import { Flex, Radio, Tooltip } from "@chakra-ui/react";
 import { InfoIcon } from "lucide-react";
 import type { JSX, MouseEventHandler } from "react";
-import { Card, Heading, Text } from "tw-components";
 
-interface SelectOptionProps {
+interface SelectOptionProps extends React.HTMLAttributes<HTMLDivElement> {
   name: string;
   description?: string;
   isActive?: boolean;
@@ -24,84 +24,62 @@ export const SelectOption: React.FC<SelectOptionProps> = ({
   disabledText,
   infoText,
   className,
-  ...stackProps
+  ...divProps
 }) => {
   return (
-    <Tooltip
+    <ToolTipLabel
       label={
-        disabled && (
-          <Card bgColor="backgroundHighlight">
-            <Text>{disabledText}</Text>
+        disabled ? (
+          <Card className="bg-muted p-3">
+            <p className="text-sm">{disabledText}</p>
           </Card>
-        )
+        ) : undefined
       }
-      bg="transparent"
-      boxShadow="none"
-      p={0}
-      shouldWrapChildren
     >
       <Card
         className={cn(
-          "flex flex-col gap-2 rounded-md p-5",
+          "flex flex-col gap-2 rounded-md p-5 md:w-[350px]",
           disabled
-            ? "pointer-events-none cursor-not-allowed"
+            ? "pointer-events-none cursor-not-allowed bg-muted"
             : "cursor-pointer",
+          isActive && "border-primary",
           className,
         )}
-        width={{ base: "inherit", md: "350px" }}
-        borderColor={isActive ? "primary.500" : undefined}
-        bgColor={disabled ? "backgroundHighlight" : undefined}
-        {...stackProps}
         onClick={onClick}
+        {...divProps}
       >
-        <Flex flexDirection="row" justifyContent="space-between">
-          <div className="flex flex-row items-start gap-0">
-            <Radio
-              cursor="pointer"
-              size="lg"
-              colorScheme="primary"
-              mt={0.5}
-              mr={2.5}
-              isChecked={isActive}
-              isDisabled={disabled}
-            />
+        <div className="flex flex-row justify-between">
+          <div className="flex flex-row items-start">
+            <div className="mt-0.5 mr-2.5 flex h-4 w-4 items-center justify-center rounded-full border border-inverted text-inverted">
+              {isActive && <div className="h-2 w-2 rounded-full bg-inverted" />}
+            </div>
             <div className="ml-4 flex flex-col gap-2 self-start">
-              <Heading
-                size="subtitle.sm"
-                fontWeight="700"
-                mb={0}
-                color={disabled ? "gray.600" : "inherit"}
+              <h4
+                className={cn(
+                  "font-semibold text-sm",
+                  disabled && "text-gray-600",
+                )}
               >
                 {name}
-              </Heading>
-              {description && (
-                <Text size="body.sm" mt="4px">
-                  {description}
-                </Text>
-              )}
+              </h4>
+              {description && <p className="mt-1 text-sm">{description}</p>}
             </div>
           </div>
           {infoText && (
-            <div className="flex flex-row">
-              <Tooltip
-                bg="transparent"
-                boxShadow="none"
-                p={0}
-                shouldWrapChildren
-                label={
-                  <Card bgColor="backgroundHighlight">
-                    <Text>{infoText}</Text>
-                  </Card>
-                }
-              >
-                <Flex alignItems="center">
-                  <InfoIcon className="size-4" />
-                </Flex>
-              </Tooltip>
-            </div>
+            <ToolTipLabel
+              label={
+                <Card className="bg-muted p-3">
+                  <p className="text-sm">{infoText}</p>
+                </Card>
+              }
+            >
+              <div className="flex items-center">
+                <InfoIcon className="size-4" />
+              </div>
+            </ToolTipLabel>
           )}
-        </Flex>
+        </div>
       </Card>
-    </Tooltip>
+    </ToolTipLabel>
   );
 };