Updates

components/elements/Tag.tsx

@@ -1,20 +1,18 @@
-import React, { PropsWithChildren } from "react";
+import React, { type PropsWithChildren } from "react";
 import { twMerge } from "tailwind-merge";
-
-export type TWUITabsObject = {
-    title: string;
-    value: string;
-    content: React.ReactNode;
-    defaultActive?: boolean;
-};
+import {
+    ButtonClasses,
+    type TWUIButtonColorType,
+    type TWUIButtonVariantType,
+} from "../layout/Button";
 
 export type TWUI_TOGGLE_PROPS = PropsWithChildren &
     React.DetailedHTMLProps<
         React.HTMLAttributes<HTMLDivElement>,
         HTMLDivElement
     > & {
-        color?: "normal" | "secondary" | "error" | "success" | "gray";
-        variant?: "normal" | "outlined" | "ghost";
+        color?: TWUIButtonColorType;
+        variant?: TWUIButtonVariantType;
         href?: string;
         newTab?: boolean;
         linkProps?: React.DetailedHTMLProps<
@@ -37,50 +35,18 @@ export default function Tag({
     linkProps,
     ...props
 }: TWUI_TOGGLE_PROPS) {
+    const finalClassName =
+        ButtonClasses[variant || "normal"]?.[color || "primary"] ?? "";
+
     const mainComponent = (
         <div
             {...props}
             className={twMerge(
                 "text-xs px-2 py-0.5 rounded-full outline-0",
                 "text-center flex items-center justify-center",
-                color == "secondary"
-                    ? "bg-secondary text-white outline-secbg-secondary"
-                    : color == "success"
-                    ? "bg-success outline-success text-white"
-                    : color == "error"
-                    ? "bg-orange-700 outline-orange-700"
-                    : color == "gray"
-                    ? twMerge(
-                          "bg-slate-100 outline-slate-200 dark:bg-gray-dark dark:outline-gray-dark",
-                          "text-slate-800 dark:text-white"
-                      )
-                    : "bg-primary text-white outline-primbg-primary twui-tag-primary",
-                variant == "outlined"
-                    ? "!bg-transparent outline-1 " +
-                          (color == "secondary"
-                              ? "text-secondary"
-                              : color == "success"
-                              ? "text-success dark:text-success-dark"
-                              : color == "error"
-                              ? "text-orange-700"
-                              : color == "gray"
-                              ? "text-slate-700 dark:text-white/80"
-                              : "text-primary dark:text-primary-dark twui-tag-primary-outlined")
-                    : variant == "ghost"
-                    ? "!bg-transparent outline-none border-none " +
-                      (color == "secondary"
-                          ? "text-secondary"
-                          : color == "success"
-                          ? "text-success dark:text-success-dark"
-                          : color == "error"
-                          ? "text-orange-700"
-                          : color == "gray"
-                          ? "text-slate-700 dark:text-white/80"
-                          : "text-primary dark:text-primary-dark")
-                    : "",
-
+                finalClassName,
                 "twui-tag",
-                props.className
+                props.className,
             )}
         >
             {children}