var Component=(()=>{var D=Object.create;var t=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var A=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var B=(n,l)=>()=>(l||n((l={exports:{}}).exports,l),l.exports),g=(n,l)=>{for(var a in l)t(n,a,{get:l[a],enumerable:!0})},F=(n,l,a,c)=>{if(l&&typeof l=="object"||typeof l=="function")for(let r of N(l))!u.call(n,r)&&r!==a&&t(n,r,{get:()=>l[r],enumerable:!(c=f(l,r))||c.enumerable});return n};var _=(n,l,a)=>(a=n!=null?D(A(n)):{},F(l||!n||!n.__esModule?t(a,"default",{value:n,enumerable:!0}):a,n)),R=n=>F(t({},"__esModule",{value:!0}),n);var m=B((C,y)=>{y.exports=_jsx_runtime});var P={};g(P,{default:()=>v,frontmatter:()=>b});var e=_(m()),b={title:"\u5934\u50CF",description:"\u4E00\u79CD\u56FE\u50CF\u5143\u7D20\uFF0C\u7528\u4E8E\u8868\u793A\u7528\u6237\uFF0C\u5E76\u5177\u6709\u540E\u5907\u56FE\u50CF\u3002",component:!0,links:{doc:"https://www.radix-ui.com/docs/primitives/components/avatar",api:"https://www.radix-ui.com/docs/primitives/components/avatar#api-reference"}};function E(n){let l={a:"a",code:"code",div:"div",h2:"h2",pre:"pre",span:"span",...n.components},{CodeTabs:a,ComponentPreview:c,ComponentSource:r,Step:o,Steps:p,TabsContent:i,TabsList:h,TabsTrigger:d}=l;return a||s("CodeTabs",!0),c||s("ComponentPreview",!0),r||s("ComponentSource",!0),o||s("Step",!0),p||s("Steps",!0),i||s("TabsContent",!0),h||s("TabsList",!0),d||s("TabsTrigger",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(c,{name:"avatar-demo",title:"\u5934\u50CF",description:"\u5E26\u6709\u540E\u5907\u56FE\u50CF\u7684\u5934\u50CF.",children:[(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Avatar, AvatarFallback, AvatarImage, } from "@/components/ui/avatar" export function AvatarDemo() { return ( CN ) } `,__src__:"registry/new-york/examples/avatar-demo.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" {"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" Avatar,"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" AvatarFallback,"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" AvatarImage,"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"} "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "@/components/ui/avatar"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:" AvatarDemo"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"Avatar"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"AvatarImage"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" src"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"https://github.com/shadcn.png"'}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" alt"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"@shadcn"'}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"AvatarFallback"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:">CN"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"}"})})]})})}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Avatar, AvatarFallback, AvatarImage, } from "@/components/ui/avatar" export function AvatarDemo() { return ( CN ) } `,__src__:"registry/default/examples/avatar-demo.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" {"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" Avatar,"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" AvatarFallback,"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" AvatarImage,"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"} "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "@/components/ui/avatar"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:" AvatarDemo"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"Avatar"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"AvatarImage"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" src"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"https://github.com/shadcn.png"'}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" alt"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"@shadcn"'}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"AvatarFallback"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:">CN"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"}"})})]})})})]}),` `,(0,e.jsxs)(l.h2,{id:"\u5B89\u88C5",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#\u5B89\u88C5",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"\u5B89\u88C5"]}),` `,(0,e.jsxs)(a,{children:[(0,e.jsxs)(h,{children:[(0,e.jsx)(d,{value:"cli",children:"\u547D\u4EE4\u884C"}),(0,e.jsx)(d,{value:"manual",children:"\u624B\u52A8"})]}),(0,e.jsx)(i,{value:"cli",children:(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npx shadcn@latest add avatar `,__npmCommand__:`npx shadcn@latest add avatar `,__yarnCommand__:`npx shadcn@latest add avatar `,__pnpmCommand__:`pnpm dlx shadcn@latest add avatar `,__bunCommand__:`bunx --bun shadcn@latest add avatar `,children:(0,e.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"npx"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" shadcn@latest"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" add"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" avatar"})]})})})})}),(0,e.jsx)(i,{value:"manual",children:(0,e.jsxs)(p,{children:[(0,e.jsx)(o,{children:"\u5B89\u88C5\u4EE5\u4E0B\u4F9D\u8D56:"}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npm install @radix-ui/react-avatar `,__npmCommand__:`npm install @radix-ui/react-avatar `,__yarnCommand__:`yarn add @radix-ui/react-avatar `,__pnpmCommand__:`pnpm add @radix-ui/react-avatar `,__bunCommand__:`bun add @radix-ui/react-avatar `,children:(0,e.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"npm"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" install"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" @radix-ui/react-avatar"})]})})})}),(0,e.jsx)(o,{children:"\u5C06\u4EE5\u4E0B\u4EE3\u7801\u590D\u5236\u5E76\u7C98\u8D34\u5230\u60A8\u7684\u9879\u76EE\u4E2D\u3002"}),(0,e.jsxs)(r,{name:"avatar",children:[(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client" import * as React from "react" import * as AvatarPrimitive from "@radix-ui/react-avatar" import { cn } from "@/lib/utils" const Avatar = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Avatar.displayName = AvatarPrimitive.Root.displayName const AvatarImage = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AvatarImage.displayName = AvatarPrimitive.Image.displayName const AvatarFallback = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName export { Avatar, AvatarImage, AvatarFallback } `,__src__:"registry/new-york/ui/avatar.tsx",__style__:"new-york",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"use client"'})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" *"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:" as"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "react"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" *"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:" as"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" AvatarPrimitive "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "@radix-ui/react-avatar"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" { cn } "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "@/lib/utils"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" Avatar"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" React.forwardRef"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"<"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" React.ElementRef"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:""}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" React.ComponentPropsWithoutRef"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"(({ "}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" }, "}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"AvatarPrimitive.Root"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" ref"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full"'}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" className"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" )"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:" {..."}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" />"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"))"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"Avatar.displayName "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" AvatarPrimitive.Root.displayName"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" AvatarImage"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" React.forwardRef"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"<"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" React.ElementRef"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:""}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" React.ComponentPropsWithoutRef"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"(({ "}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" }, "}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"AvatarPrimitive.Image"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" ref"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"aspect-square h-full w-full"'}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:", className)"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:" {..."}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" />"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"))"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"AvatarImage.displayName "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" AvatarPrimitive.Image.displayName"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" AvatarFallback"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" React.forwardRef"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"<"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" React.ElementRef"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:""}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" React.ComponentPropsWithoutRef"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"(({ "}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" }, "}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"AvatarPrimitive.Fallback"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" ref"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "flex h-full w-full items-center justify-center rounded-full bg-muted"'}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" className"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" )"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:" {..."}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" />"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"))"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"AvatarFallback.displayName "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" AvatarPrimitive.Fallback.displayName"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" { Avatar, AvatarImage, AvatarFallback }"})]})]})})}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client" import * as React from "react" import * as AvatarPrimitive from "@radix-ui/react-avatar" import { cn } from "@/lib/utils" const Avatar = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Avatar.displayName = AvatarPrimitive.Root.displayName const AvatarImage = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AvatarImage.displayName = AvatarPrimitive.Image.displayName const AvatarFallback = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName export { Avatar, AvatarImage, AvatarFallback } `,__src__:"registry/default/ui/avatar.tsx",__style__:"default",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"use client"'})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" *"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:" as"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "react"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" *"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:" as"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" AvatarPrimitive "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "@radix-ui/react-avatar"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" { cn } "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "@/lib/utils"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" Avatar"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" React.forwardRef"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"<"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" React.ElementRef"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:""}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" React.ComponentPropsWithoutRef"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"(({ "}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" }, "}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"AvatarPrimitive.Root"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" ref"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full"'}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" className"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" )"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:" {..."}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" />"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"))"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"Avatar.displayName "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" AvatarPrimitive.Root.displayName"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" AvatarImage"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" React.forwardRef"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"<"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" React.ElementRef"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:""}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" React.ComponentPropsWithoutRef"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"(({ "}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" }, "}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"AvatarPrimitive.Image"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" ref"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"aspect-square h-full w-full"'}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:", className)"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:" {..."}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" />"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"))"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"AvatarImage.displayName "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" AvatarPrimitive.Image.displayName"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" AvatarFallback"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" React.forwardRef"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"<"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" React.ElementRef"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:""}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" React.ComponentPropsWithoutRef"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"(({ "}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" }, "}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"AvatarPrimitive.Fallback"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" ref"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "flex h-full w-full items-center justify-center rounded-full bg-muted"'}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" className"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" )"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:" {..."}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" />"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"))"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"AvatarFallback.displayName "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" AvatarPrimitive.Fallback.displayName"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" { Avatar, AvatarImage, AvatarFallback }"})]})]})})})]}),(0,e.jsx)(o,{children:"\u66F4\u65B0\u5BFC\u5165\u8DEF\u5F84\u4EE5\u5339\u914D\u60A8\u7684\u9879\u76EE\u8BBE\u7F6E\u3002"})]})})]}),` `,(0,e.jsxs)(l.h2,{id:"\u7528\u6CD5",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#\u7528\u6CD5",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"\u7528\u6CD5"]}),` `,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" `,children:(0,e.jsx)(l.code,{"data-language":"tsx","data-theme":"default",children:(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" { Avatar, AvatarFallback, AvatarImage } "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "@/components/ui/avatar"'})]})})})}),` `,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:` CN `,children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"Avatar"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"AvatarImage"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" src"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"https://github.com/shadcn.png"'}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"AvatarFallback"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:">CN"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:""})]})]})})})]})}function v(n={}){let{wrapper:l}=n.components||{};return l?(0,e.jsx)(l,{...n,children:(0,e.jsx)(E,{...n})}):E(n)}function s(n,l){throw new Error("Expected "+(l?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return R(P);})(); ;return Component;

头像

安装

用法