Readme Badge Row

1/**
2 * shieldcn
3 * ReadmeBadgeRow
4 * by Justin Levine
5 * shieldcn.dev
6 *
7 * Horizontal layout wrapper for multiple badges with consistent spacing,
8 * wrapping, and alignment. Works with ReadmeBadge or any inline elements.
9 *
10 * Props:
11 * - gap?: spacing between badges ("xs" | "sm" | "md" | "lg", default "sm")
12 * - align?: horizontal alignment ("left" | "center" | "right", default "left")
13 * - className?: additional class names
14 * - children: badge elements
15 */
16 
17import * as React from "react"
18import { cn } from "@/lib/utils"
19 
20const gapMap = {
21  xs: "gap-1",
22  sm: "gap-2",
23  md: "gap-3",
24  lg: "gap-4",
25} as const
26 
27const alignMap = {
28  left: "justify-start",
29  center: "justify-center",
30  right: "justify-end",
31} as const
32 
33interface ReadmeBadgeRowProps extends React.ComponentProps<"div"> {
34  /** Spacing between badges. @default "sm" */
35  gap?: keyof typeof gapMap
36  /** Horizontal alignment. @default "left" */
37  align?: keyof typeof alignMap
38  /** Additional class names. */
39  className?: string
40  children: React.ReactNode
41}
42 
43function ReadmeBadgeRow({
44  gap = "sm",
45  align = "left",
46  className,
47  children,
48  ...props
49}: ReadmeBadgeRowProps) {
50  return (
51    <div
52      data-slot="readme-badge-row"
53      className={cn(
54        "flex flex-wrap items-center",
55        gapMap[gap],
56        alignMap[align],
57        className
58      )}
59      {...props}
60    >
61      {children}
62    </div>
63  )
64}
65 
66export { ReadmeBadgeRow }
67export type { ReadmeBadgeRowProps }