Random Component

random-component.tsx

import { VariantProps, cva } from 'class-variance-authority';
import { ComponentPropsWithoutRef, forwardRef } from 'react';
import clsx from 'clsx';

import styles from './EnvLabel.module.scss';

export const envLabelCva = cva(styles.root, {
  variants: {
    environment: {
      dev: styles.dev,
      test: styles.test,
      prod: styles.prod,
    },
  },
  defaultVariants: {},
});

interface EnvLabelProps extends ComponentPropsWithoutRef<'span'>, VariantProps<typeof envLabelCva> {}

export const EnvLabel = forwardRef<HTMLSpanElement, EnvLabelProps>(({ className, environment, ...props }, ref) => (
  <span
    {...props}
    className={clsx(envLabelCva({ environment }), className)}
    ref={ref}>
    {environment}
  </span>
));

EnvLabel.displayName = 'EnvLabel';