@react-three/uikit-default
Version:
Default (shadcn) kit for @react-three/uikit
45 lines (44 loc) • 1.52 kB
JavaScript
import { Container, DefaultProperties, } from '@react-three/uikit';
import React, { forwardRef } from 'react';
import { colors } from './theme.js';
const badgeVariants = {
default: {
defaultProps: {
color: colors.primaryForeground,
},
containerProps: {
backgroundColor: colors.primary,
},
containerHoverProps: {
backgroundOpacity: 0.8,
},
},
secondary: {
defaultProps: {
color: colors.secondaryForeground,
},
containerProps: {
backgroundColor: colors.secondary,
},
containerHoverProps: {
backgroundOpacity: 0.8,
},
},
destructive: {
defaultProps: {
color: colors.destructiveForeground,
},
containerProps: {
backgroundColor: colors.destructive,
},
containerHoverProps: {
backgroundOpacity: 0.8,
},
},
outline: {},
};
export const Badge = forwardRef(({ children, variant = 'default', hover, ...props }, ref) => {
const { containerProps, defaultProps, containerHoverProps, } = badgeVariants[variant];
return (React.createElement(Container, { borderRadius: 1000, borderWidth: 1, paddingX: 10, paddingY: 2, hover: { ...containerHoverProps, ...hover }, ref: ref, ...containerProps, ...props },
React.createElement(DefaultProperties, { fontSize: 12, lineHeight: 16, fontWeight: "semi-bold", ...defaultProps }, children)));
});