64 lines
2.0 KiB
TypeScript
Executable File
64 lines
2.0 KiB
TypeScript
Executable File
/* -------------------------------------------------------------------------- */
|
|
/* Imports */
|
|
/* -------------------------------------------------------------------------- */
|
|
|
|
import classNames from "classnames";
|
|
import { StyleType } from "core/_variants";
|
|
import React from "react";
|
|
import {ReactComponent as DeleteIcon} from "./Filters/svg/chest.svg"
|
|
|
|
/* -------------------------------------------------------------------------- */
|
|
/* Component props */
|
|
/* -------------------------------------------------------------------------- */
|
|
|
|
type Props = {
|
|
emphasis?: StyleType;
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
iconed?: boolean;
|
|
onClick?: (element: any) => void;
|
|
closeOption?: Boolean;
|
|
} & Omit<React.MouseEventHandler<HTMLSpanElement>, "">;
|
|
|
|
/* -------------------------------------------------------------------------- */
|
|
/* Component implementation */
|
|
/* -------------------------------------------------------------------------- */
|
|
|
|
function Badge({
|
|
className,
|
|
children,
|
|
onClick,
|
|
emphasis = "low",
|
|
closeOption = false,
|
|
...props
|
|
}: Props): JSX.Element {
|
|
return (
|
|
<>
|
|
<span
|
|
className={classNames(
|
|
"border-none p-2 rounded-md text-xs text-center",
|
|
{
|
|
"cursor-pointer": onClick,
|
|
"border-transparent": emphasis == "low",
|
|
"bg-blue-400 text-white rounded-xs": emphasis == "high",
|
|
"border-gray-400 background-gray-200": emphasis == "medium",
|
|
},
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
{closeOption && (
|
|
<button
|
|
onClick={onClick}
|
|
className=" text-white pr-1 pl-3 py-1"
|
|
>
|
|
<div><DeleteIcon className="h-[9px] w-[9px]" /></div>
|
|
</button>
|
|
)}
|
|
</span>
|
|
</>
|
|
);
|
|
}
|
|
export default Badge;
|