[ui][badge] add startAddOn

pull/549/head
Jeff Sieu 2 years ago
parent 2360c07aec
commit a6fd4c4c09

@ -48,7 +48,31 @@ export function Variants() {
);
}
export function Icon() {
export function StartIcon() {
return (
<div className="space-x-4">
<Badge label="Primary" startAddOn={StarIcon} variant="primary" />
<Badge label="Success" startAddOn={CheckCircleIcon} variant="success" />
<Badge
label="Information"
startAddOn={InformationCircleIcon}
variant="info"
/>
<Badge
label="Warning"
startAddOn={ExclamationTriangleIcon}
variant="warning"
/>
<Badge
label="Danger"
startAddOn={ExclamationCircleIcon}
variant="danger"
/>
</div>
);
}
export function EndIcon() {
return (
<div className="space-x-4">
<Badge endAddOn={StarIcon} label="Primary" variant="primary" />

@ -10,6 +10,7 @@ export type BadgeVariant =
type Props = Readonly<{
endAddOn?: React.ComponentType<React.ComponentProps<'svg'>>;
label: string;
startAddOn?: React.ComponentType<React.ComponentProps<'svg'>>;
variant: BadgeVariant;
}>;
@ -42,7 +43,12 @@ const classes: Record<
},
};
export default function Badge({ endAddOn: EndAddOn, label, variant }: Props) {
export default function Badge({
endAddOn: EndAddOn,
label,
startAddOn: StartAddOn,
variant,
}: Props) {
const { backgroundClass, textClass } = classes[variant];
return (
@ -52,6 +58,7 @@ export default function Badge({ endAddOn: EndAddOn, label, variant }: Props) {
backgroundClass,
textClass,
)}>
{StartAddOn && <StartAddOn aria-hidden="true" className="mr-1 h-4 w-4" />}
<span>{label}</span>
{EndAddOn && <EndAddOn aria-hidden="true" className="ml-1 h-4 w-4" />}
</span>

Loading…
Cancel
Save