From 36e55c9bf4da5afc94b3fff27949ae3f7a33a491 Mon Sep 17 00:00:00 2001
From: notmd <tinhmeo10@gmail.com>
Date: Wed, 1 Feb 2023 14:53:28 +0700
Subject: [PATCH] extract to theme

---
 website/src/components/Dashboard/TaskOption.tsx | 13 +------------
 website/src/styles/Theme/components/Badge.ts    | 14 ++++++++++++++
 website/src/styles/Theme/index.ts               |  2 ++
 3 files changed, 17 insertions(+), 12 deletions(-)
 create mode 100644 website/src/styles/Theme/components/Badge.ts

diff --git a/website/src/components/Dashboard/TaskOption.tsx b/website/src/components/Dashboard/TaskOption.tsx
index 1ee0489b..55236b93 100644
--- a/website/src/components/Dashboard/TaskOption.tsx
+++ b/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
diff --git a/website/src/styles/Theme/components/Badge.ts b/website/src/styles/Theme/components/Badge.ts
new file mode 100644
index 00000000..b67c1f3e
--- /dev/null
+++ b/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",
+  },
+});
diff --git a/website/src/styles/Theme/index.ts b/website/src/styles/Theme/index.ts
index 37ca424d..91d54088 100644
--- a/website/src/styles/Theme/index.ts
+++ b/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,
 };