import { useId, type ComponentProps } from "react"; import { cn } from "cn"; const BODY = "M58 10C66 15 94 15 102 10L128 17C139 20 146 26 150 34L157 58L133 65L127 51L129 124L31 124L33 51L27 65L3 58L10 34C14 26 21 20 32 17Z"; /** Side stripes and sleeve cuffs, clipped to the body. */ const TRIM = [ "M37 22L44 20L44 124L37 124Z", "M123 22L116 20L116 124L123 124Z", "M1 50L30 57L28 64L-1 57Z", "M159 50L130 57L132 64L161 57Z", ]; export type JerseyProps = Omit, "color"> & { /** Body colour. Any CSS colour. */ color: string; /** Collar, side stripes, sleeve cuffs and the number's outline. */ accent: string; number: number | string; /** Across the chest above the number, e.g. `Seattle`. */ name?: string; numberColor?: string; }; /** * A football jersey from the front, painted from team colours at runtime — * a stand-in for a player headshot that every roster can wear. */ function Jersey({ color, accent, number, name, numberColor = "#ffffff", className, ...props }: JerseyProps) { // Gradient and clip ids must be unique per instance on the page. const id = useId().replace(/[^\w-]/g, ""); const labelled = props["aria-label"] !== undefined; return ( ); } export { Jersey };

Team colours

Code