Desenvolvedores
src_
components_
ui_
Badge.jsx

Explicação detalhada do código:

Este código define um componente Badge que permite a exibição de badges estilizados com diferentes variantes de cores e interatividade, utilizando a biblioteca class-variance-authority (CVA) para gerenciar as classes de forma dinâmica. A seguir, temos a análise detalhada de como isso é feito.

Passo 1: Importação de dependências

import * as React from "react"
import { cva } from "class-variance-authority";
import { cn } from "@/lib/utils"
  • React: Importa a biblioteca principal para que o componente seja reconhecido como um componente React.
  • cva: Importa a função da biblioteca class-variance-authority, que é usada para gerar classes CSS dinâmicas com base em variantes.
  • cn: Importa a função utilitária que é provavelmente definida em @/lib/utils para combinar e condicionar classes de forma eficiente.

Passo 2: Definição das variantes do Badge

const badgeVariants = cva(
  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
  {
    variants: {
      variant: {
        default:
          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
        secondary:
          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
        destructive:
          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
        outline: "text-foreground",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
)
  • A função cva é usada para definir o estilo básico do badge, bem como suas variantes (por exemplo, default, secondary, destructive, outline).
  • O estilo base do badge é configurado com a classe CSS padrão, e as variantes controlam os diferentes comportamentos de cor e fundo quando interagido, com destaque para o hover e o focus.

Passo 3: Componente Badge

function Badge({
  className,
  variant,
  ...props
}) {
  return (<div className={cn(badgeVariants({ variant }), className)} {...props} />);
}
  • O componente Badge recebe className, variant e outros props como parâmetros.
  • A classe do componente é gerada dinamicamente, combinando o estilo das variantes com qualquer classe adicional passada via className.
  • O atributo variant determina qual estilo será aplicado ao badge.
  • O componente renderiza uma <div> com as classes adequadas e passa os outros props para o componente, permitindo flexibilidade no uso.

Passo 4: Exportação

export { Badge, badgeVariants }
  • O componente Badge e a constante badgeVariants são exportados, permitindo seu uso em outras partes do aplicativo.

Emojis:

  • 🏷️ para representar o conceito de badges.
  • 🎨 para as variantes de estilos aplicáveis ao componente.

Código completo:

import * as React from "react"
import { cva } from "class-variance-authority";
 
import { cn } from "@/lib/utils"
 
const badgeVariants = cva(
  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
  {
    variants: {
      variant: {
        default:
          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
        secondary:
          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
        destructive:
          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
        outline: "text-foreground",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
)
 
function Badge({
  className,
  variant,
  ...props
}) {
  return (<div className={cn(badgeVariants({ variant }), className)} {...props} />);
}
 
export { Badge, badgeVariants }
Avatar.jsxBreadcrumb.jsx