extract to theme

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,
 };