mirror of
https://github.com/tailscale/tailscale.git
synced 2025-04-25 02:04:38 +00:00
5f40b8a0bc
Enforcing inclusion of our OSS license at the top of .ts and .tsx files. Also updates any relevant files in the repo that were previously missing the license comment. An additional `@license` comment is added to client/web/src/index.tsx to preserve the license in generated Javascript. Updates #10261 Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
// Copyright (c) Tailscale Inc & AUTHORS
|
|
// SPDX-License-Identifier: BSD-3-Clause
|
|
|
|
import cx from "classnames"
|
|
import React, { HTMLAttributes } from "react"
|
|
|
|
export type BadgeColor =
|
|
| "blue"
|
|
| "green"
|
|
| "red"
|
|
| "orange"
|
|
| "yellow"
|
|
| "gray"
|
|
| "outline"
|
|
|
|
type Props = {
|
|
variant: "tag" | "status"
|
|
color: BadgeColor
|
|
} & HTMLAttributes<HTMLDivElement>
|
|
|
|
export default function Badge(props: Props) {
|
|
const { className, color, variant, ...rest } = props
|
|
|
|
return (
|
|
<div
|
|
className={cx(
|
|
"inline-flex items-center align-middle justify-center font-medium",
|
|
{
|
|
"border border-gray-200 bg-gray-200 text-gray-600": color === "gray",
|
|
"border border-green-50 bg-green-50 text-green-600":
|
|
color === "green",
|
|
"border border-blue-50 bg-blue-50 text-blue-600": color === "blue",
|
|
"border border-orange-50 bg-orange-50 text-orange-600":
|
|
color === "orange",
|
|
"border border-yellow-50 bg-yellow-50 text-yellow-600":
|
|
color === "yellow",
|
|
"border border-red-50 bg-red-50 text-red-600": color === "red",
|
|
"border border-gray-300 bg-white": color === "outline",
|
|
"rounded-full px-2 py-1 leading-none": variant === "status",
|
|
"rounded-sm px-1": variant === "tag",
|
|
},
|
|
className
|
|
)}
|
|
{...rest}
|
|
/>
|
|
)
|
|
}
|
|
|
|
Badge.defaultProps = {
|
|
color: "gray",
|
|
}
|