105 lines
3.4 KiB
TypeScript
105 lines
3.4 KiB
TypeScript
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;
|
|
}
|