Updates

2026-03-04 17:35:14 +01:00
parent f73b56cdc4
commit db26e26495
113 changed files with 12433 additions and 169 deletions
@@ -0,0 +1,104 @@
+import React, { PropsWithChildren } from "react";
+import { twMerge } from "tailwind-merge";
+
+export type TWUITabsObject = {
+    title: string;
+    value: string;
+    content: React.ReactNode;
+    defaultActive?: boolean;
+};
+
+export type TWUI_TOGGLE_PROPS = PropsWithChildren &
+    React.DetailedHTMLProps<
+        React.HTMLAttributes<HTMLDivElement>,
+        HTMLDivElement
+    > & {
+        color?: "normal" | "secondary" | "error" | "success" | "gray";
+        variant?: "normal" | "outlined" | "ghost";
+        href?: string;
+        newTab?: boolean;
+        linkProps?: React.DetailedHTMLProps<
+            React.AnchorHTMLAttributes<HTMLAnchorElement>,
+            HTMLAnchorElement
+        >;
+    };
+
+/**
+ * # Tabs Component
+ * @className twui-tag
+ * @className twui-tag-primary-outlined
+ */
+export default function Tag({
+    color,
+    variant,
+    children,
+    href,
+    newTab,
+    linkProps,
+    ...props
+}: TWUI_TOGGLE_PROPS) {
+    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")
+                    : "",
+
+                "twui-tag",
+                props.className
+            )}
+        >
+            {children}
+        </div>
+    );
+
+    if (href) {
+        return (
+            <a
+                href={href}
+                target={newTab ? "_blank" : undefined}
+                {...linkProps}
+                className={twMerge("hover:opacity-80", linkProps?.className)}
+            >
+                {mainComponent}
+            </a>
+        );
+    }
+
+    return mainComponent;
+}