extract to theme

website/src/components/Dashboard/TaskOption.tsx

@@ -65,18 +65,7 @@ export const TaskOption = ({ content }: TasksOptionProps) => {
                         <Text size="sm">{t(getTypeSafei18nKey(`tasks:${item.id}.desc`))}</Text>
                       </Flex>
                       <Box>
-                        <Badge
-                          colorScheme="blue"
-                          flexGrow={0}
-                          rounded="lg"
-                          px={2}
-                          py={0.5}
-                          variant="solid"
-                          textTransform="none"
-                          fontWeight="600"
-                        >
-                          {t("tasks:available_task_count", { count: item.count })}
-                        </Badge>
+                        <Badge textTransform="none">{t("tasks:available_task_count", { count: item.count })}</Badge>
                       </Box>
                     </Flex>
                     <Text

website/src/styles/Theme/components/Badge.ts

@@ -0,0 +1,14 @@
+import { defineStyleConfig } from "@chakra-ui/react";
+
+export const badgeTheme = defineStyleConfig({
+  baseStyle: {
+    borderRadius: "lg",
+    px: 2,
+    py: 0.5,
+    fontWeight: "600",
+  },
+  defaultProps: {
+    variant: "solid",
+    colorScheme: "blue",
+  },
+});

website/src/styles/Theme/index.ts

@@ -2,6 +2,7 @@ import { type ThemeConfig, extendTheme } from "@chakra-ui/react";
 import { Styles } from "@chakra-ui/theme-tools";
 
 import { colors } from "./colors";
+import { badgeTheme } from "./components/Badge";
 import { cardTheme } from "./components/Card";
 import { containerTheme } from "./components/Container";
 
@@ -12,6 +13,7 @@ const config: ThemeConfig = {
 };
 
 const components = {
+  Badge: badgeTheme,
   Container: containerTheme,
   Card: cardTheme,
 };