52 lines
1.6 KiB
TypeScript
52 lines
1.6 KiB
TypeScript
/* -------------------------------------------------------------------------- */
|
|
/* Imports */
|
|
/* -------------------------------------------------------------------------- */
|
|
|
|
import classNames from "classnames";
|
|
import { StyleType } from "core/_variants";
|
|
import React from "react";
|
|
|
|
/* -------------------------------------------------------------------------- */
|
|
/* Component props */
|
|
/* -------------------------------------------------------------------------- */
|
|
|
|
type Props = {
|
|
emphasis?: StyleType;
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
iconed?: boolean;
|
|
onClick?: () => void;
|
|
} & Omit<React.MouseEventHandler<HTMLSpanElement>, "">;
|
|
|
|
/* -------------------------------------------------------------------------- */
|
|
/* Component implementation */
|
|
/* -------------------------------------------------------------------------- */
|
|
|
|
function Badge({
|
|
className,
|
|
children,
|
|
onClick,
|
|
emphasis = "low",
|
|
...props
|
|
}: Props): JSX.Element {
|
|
return (
|
|
<span
|
|
onClick={onClick}
|
|
className={classNames(
|
|
"border p-2 rounded-sm text-xs text-center",
|
|
{
|
|
"cursor-pointer": onClick,
|
|
"border-transparent": emphasis == "low",
|
|
"bg-blue-400 text-white": emphasis == "high",
|
|
"border-gray-400 background-gray-200": emphasis == "medium",
|
|
},
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</span>
|
|
);
|
|
}
|
|
export default Badge;
|