From cf72be451cf69867654c446e6eff2cf7c0dc915a Mon Sep 17 00:00:00 2001
From: bhushanpardeshii <bhushanpardeshi549@gmail.com>
Date: Wed, 6 Nov 2024 15:21:17 +0530
Subject: [PATCH] migration stat component to shadcn/tailwind [Fixes #13946]

---
 src/components/Stat/index.tsx | 25 +++++++++++--------------
 1 file changed, 11 insertions(+), 14 deletions(-)

diff --git a/src/components/Stat/index.tsx b/src/components/Stat/index.tsx
index a7beeb38982..459b915f1c0 100644
--- a/src/components/Stat/index.tsx
+++ b/src/components/Stat/index.tsx
@@ -1,12 +1,11 @@
 import { useEffect, useState } from "react"
-import type { IconType } from "react-icons/lib"
 import { MdInfoOutline, MdWarning } from "react-icons/md"
-import { chakra, Flex, HStack, Icon, Text } from "@chakra-ui/react"
-
+import type { IconType } from "react-icons/lib"
 import { NULL_VALUE } from "@/lib/constants"
-
+import { Flex } from "@/components/ui/flex"
 import Tooltip, { type TooltipProps } from "../Tooltip"
 
+
 const initialContent = {
   contentValue: NULL_VALUE,
   tooltipIcon: MdInfoOutline,
@@ -39,20 +38,18 @@ const Stat = ({ tooltipProps, value, label, isError }: StatProps) => {
   }, [isError, value])
 
   return (
-    <Flex flexDirection="column-reverse">
-      <HStack lineHeight="initial" spacing="0.5" color="body.medium">
-        <Text as="span">{label}</Text>
+    <Flex className="flex-col-reverse">
+      <div className="flex items-center space-x-2 leading-none text-body-medium">
+        <span>{label}</span>
         {!!tooltipProps && (
           <Tooltip {...tooltipProps}>
-            <chakra.button display="flex" color="inherit">
-              <Icon as={content.tooltipIcon} />
-            </chakra.button>
+            <button className="flex text-inherit">
+              <content.tooltipIcon className="h-4 w-4" />
+            </button>
           </Tooltip>
         )}
-      </HStack>
-      <Text as="span" size="5xl" fontWeight="bold">
-        {content.contentValue}
-      </Text>
+      </div>
+      <span className="text-5xl font-bold">{content.contentValue}</span>
     </Flex>
   )
 }