{avatarUrls.map((url, index) => ( ${\`Avatar$ ))} +{numPeople}

) } export AvatarCircles `,__src__:"registry/miami/ui/avatar-circles.tsx",__style__:"miami",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"lumos-dark",style:{display:"grid"},children:[(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#FF9900"},children:"use client"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:'"'})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#14F195"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" React"}),(0,n.jsx)(l.span,{style:{color:"#14F195"},children:" from"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#FF9900"},children:"react"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:'"'})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#14F195"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" { "}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"ny"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#14F195"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#FF9900"},children:"~/lib/utils"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:'"'})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#14F195"},children:"interface"}),(0,n.jsx)(l.span,{style:{color:"#CCFF00"},children:" AvatarCirclesProps"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:"?:"}),(0,n.jsx)(l.span,{style:{color:"#CCFF00"},children:" string"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" numPeople"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:"?:"}),(0,n.jsx)(l.span,{style:{color:"#CCFF00"},children:" number"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" avatarUrls"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#CCFF00"},children:" string"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"[]"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"}"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#14F195"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#FEE75C"},children:" AvatarCircles"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"({"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" numPeople"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" avatarUrls"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#CCFF00"},children:" AvatarCirclesProps"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:") {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#14F195"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#14F195"},children:"div"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#FEE75C"},children:"ny"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#FF9900"},children:"z-10 flex -space-x-4 rtl:space-x-reverse"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:")}"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" >"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"avatarUrls"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FEE75C"},children:"map"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"(("}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"url"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"index"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#14F195"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#14F195"},children:"img"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" key"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"index"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#FF9900"},children:"size-10 rounded-full border-2 border-white dark:border-gray-800"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:'"'})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" src"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"url"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" width"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#FEE75C"},children:"40"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" height"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#FEE75C"},children:"40"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" alt"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:"`"}),(0,n.jsx)(l.span,{style:{color:"#FF9900"},children:"Avatar ${"}),(0,n.jsx)(l.span,{style:{color:"#FF9900"},children:"index "}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:"+"}),(0,n.jsx)(l.span,{style:{color:"#FEE75C"},children:" 1"}),(0,n.jsx)(l.span,{style:{color:"#FF9900"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:"`"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"}"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" />"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" ))}"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#14F195"},children:"a"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#FF9900"},children:"flex size-10 items-center justify-center rounded-full border-2 border-white bg-black text-center text-xs font-medium text-white hover:bg-gray-600 dark:border-gray-800 dark:bg-white dark:text-black"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:'"'})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" href"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:'""'})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" >"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" +{"}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"numPeople"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" "})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" )"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"}"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#14F195"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" AvatarCircles"})]})]})})}),(0,n.jsx)(l.figure,{__src__:"registry/default/ui/avatar-circles.tsx",__style__:"default","data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#121212",color:"#dbd7caee"},tabIndex:"0","data-language":"tsx","data-theme":"lumos-dark",__rawString__:`"use client" import React from "react" import { ny } from "~/lib/utils" interface AvatarCirclesProps { className?: string numPeople?: number avatarUrls: string[] } function AvatarCircles({ numPeople, className, avatarUrls, }: AvatarCirclesProps) { return (

{avatarUrls.map((url, index) => ( ${\`Avatar$ ))} +{numPeople}

) } export AvatarCircles `,__src__:"registry/default/ui/avatar-circles.tsx",__style__:"default",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"lumos-dark",style:{display:"grid"},children:[(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#FF9900"},children:"use client"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:'"'})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#14F195"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" React"}),(0,n.jsx)(l.span,{style:{color:"#14F195"},children:" from"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#FF9900"},children:"react"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:'"'})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#14F195"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" { "}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"ny"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#14F195"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#FF9900"},children:"~/lib/utils"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:'"'})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#14F195"},children:"interface"}),(0,n.jsx)(l.span,{style:{color:"#CCFF00"},children:" AvatarCirclesProps"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:"?:"}),(0,n.jsx)(l.span,{style:{color:"#CCFF00"},children:" string"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" numPeople"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:"?:"}),(0,n.jsx)(l.span,{style:{color:"#CCFF00"},children:" number"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" avatarUrls"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#CCFF00"},children:" string"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"[]"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"}"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#14F195"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#FEE75C"},children:" AvatarCircles"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"({"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" numPeople"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" avatarUrls"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#CCFF00"},children:" AvatarCirclesProps"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:") {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#14F195"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#14F195"},children:"div"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#FEE75C"},children:"ny"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#FF9900"},children:"z-10 flex -space-x-4 rtl:space-x-reverse"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:")}"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" >"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"avatarUrls"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FEE75C"},children:"map"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"(("}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"url"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"index"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#14F195"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#14F195"},children:"img"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" key"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"index"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#FF9900"},children:"size-10 rounded-full border-2 border-white dark:border-gray-800"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:'"'})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" src"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"url"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" width"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#FEE75C"},children:"40"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" height"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#FEE75C"},children:"40"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" alt"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:"`"}),(0,n.jsx)(l.span,{style:{color:"#FF9900"},children:"Avatar ${"}),(0,n.jsx)(l.span,{style:{color:"#FF9900"},children:"index "}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:"+"}),(0,n.jsx)(l.span,{style:{color:"#FEE75C"},children:" 1"}),(0,n.jsx)(l.span,{style:{color:"#FF9900"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:"`"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"}"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" />"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" ))}"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#14F195"},children:"a"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#FF9900"},children:"flex size-10 items-center justify-center rounded-full border-2 border-white bg-black text-center text-xs font-medium text-white hover:bg-gray-600 dark:border-gray-800 dark:bg-white dark:text-black"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:'"'})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" href"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:'""'})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" >"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" +{"}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"numPeople"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" "})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" )"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"}"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#14F195"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" AvatarCircles"})]})]})})})]})]})})]}),` `,(0,n.jsxs)(l.h2,{id:"props",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#props",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Props"]}),` `,(0,n.jsxs)(l.table,{children:[(0,n.jsx)(l.thead,{children:(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.th,{children:"Prop"}),(0,n.jsx)(l.th,{children:"Type"}),(0,n.jsx)(l.th,{children:"Description"}),(0,n.jsx)(l.th,{children:"Default"})]})}),(0,n.jsxs)(l.tbody,{children:[(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:"className"}),(0,n.jsx)(l.td,{children:"string"}),(0,n.jsx)(l.td,{children:"The class name to be applied to the component"}),(0,n.jsx)(l.td,{})]}),(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:"numPeople"}),(0,n.jsx)(l.td,{children:"number"}),(0,n.jsx)(l.td,{children:"The number appearing in the last circle"}),(0,n.jsx)(l.td,{children:"99"})]})]})]})]})}function D(e={}){let{wrapper:l}=e.components||{};return l?(0,n.jsx)(l,{...e,children:(0,n.jsx)(E,{...e})}):E(e)}function s(e,l){throw new Error("Expected "+(l?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return x(_);})(); ;return Component;

Prop	Type	Description	Default
className	string	The class name to be applied to the component
numPeople	number	The number appearing in the last circle	99

Avatar Circles

Installation

Props