71 lines
1.7 KiB
TypeScript
71 lines
1.7 KiB
TypeScript
import React, { type PropsWithChildren } from "react";
|
|
import { twMerge } from "tailwind-merge";
|
|
import {
|
|
ButtonClasses,
|
|
type TWUIButtonColorType,
|
|
type TWUIButtonVariantType,
|
|
} from "../layout/Button";
|
|
|
|
export type TWUI_TOGGLE_PROPS = PropsWithChildren &
|
|
React.DetailedHTMLProps<
|
|
React.HTMLAttributes<HTMLDivElement>,
|
|
HTMLDivElement
|
|
> & {
|
|
color?: TWUIButtonColorType;
|
|
variant?: TWUIButtonVariantType;
|
|
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 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",
|
|
finalClassName,
|
|
"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;
|
|
}
|