https://pikas-ui.vercel.app/_next/static/chunks/pages/components/avatar-ac414c1e7f55ea6b.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[6259],{5411:function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/components/avatar",function(){return n(9938)}])},9938:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return L},getLink:function(){return _},stylesLink:function(){return S}});var s=n(7458),a=n(2640),l=n(3131),i=n(2983),r=n(445),c=n(5552),d=n(515),o=n(1653);let h="Avatar",[x,u]=(0,r.b)(h),[j,p]=x(h),g=(0,i.forwardRef)((e,t)=>{let{__scopeAvatar:n,...s}=e,[a,r]=(0,i.useState)("idle");return(0,i.createElement)(j,{scope:n,imageLoadingStatus:a,onImageLoadingStatusChange:r},(0,i.createElement)(o.WV.span,(0,l.Z)({},s,{ref:t})))}),m=(0,i.forwardRef)((e,t)=>{let{__scopeAvatar:n,src:s,onLoadingStatusChange:a=()=>{},...r}=e,h=p("AvatarImage",n),x=function(e){let[t,n]=(0,i.useState)("idle");return(0,d.b)(()=>{if(!e){n("error");return}let t=!0,s=new window.Image,a=e=>()=>{t&&n(e)};return n("loading"),s.onload=a("loaded"),s.onerror=a("error"),s.src=e,()=>{t=!1}},[e]),t}(s),u=(0,c.W)(e=>{a(e),h.onImageLoadingStatusChange(e)});return(0,d.b)(()=>{"idle"!==x&&u(x)},[x,u]),"loaded"===x?(0,i.createElement)(o.WV.img,(0,l.Z)({},r,{ref:t,src:s})):null}),f=(0,i.forwardRef)((e,t)=>{let{__scopeAvatar:n,delayMs:s,...a}=e,r=p("AvatarFallback",n),[c,d]=(0,i.useState)(void 0===s);return(0,i.useEffect)(()=>{if(void 0!==s){let e=window.setTimeout(()=>d(!0),s);return()=>window.clearTimeout(e)}},[s]),c&&"loaded"!==r.imageLoadingStatus?(0,i.createElement)(o.WV.span,(0,l.Z)({},a,{ref:t})):null});var k=n(2865),y=n(4243);let b=(0,k.zo)(g,{display:"inline-flex",alignItems:"center",justifyContent:"center",verticalAlign:"middle",overflow:"hidden",userSelect:"none",position:"relative"}),N=(0,k.zo)(m,{width:"100%",height:"100%",objectFit:"cover",borderRadius:"inherit"}),A=(0,k.zo)(f,{width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center",lineHeight:1,fontWeight:"$bold"}),v=({alt:e,src:t,onLoadingStatusChange:n,delayMs:a,fallback:l,fallbackBackgroundColorName:i="primary-lightest-2",fallbackColorName:r="primary",css:c,size:d=80,borderRadius:o="full",loading:h=!1})=>(0,s.jsxs)(b,{css:{height:d,minHeight:d,width:d,minWidth:d,borderRadius:`$${o}`,...c?.container},children:[h?(0,s.jsx)(y.O,{animation:"pulse",width:"100%",height:"100%",borderRadius:o,css:{position:"absolute"}}):null,(0,s.jsx)(N,{src:t,alt:e,onLoadingStatusChange:n,css:{...c?.image}}),(0,s.jsx)(A,{delayMs:a,css:{fontSize:d?d/2.5:void 0,color:`$${r}`,backgroundColor:`$${i}`,...c?.fallback},children:l})]});var w=n(5085);let C=()=>(0,s.jsxs)(w.S_,{children:[(0,s.jsx)(v,{alt:"John Doe",fallback:"JD"}),(0,s.jsx)(v,{alt:"Jane Doe",fallback:"JD",src:"https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80"}),(0,s.jsx)(v,{alt:"Paul Doe",fallback:"PD",loading:!0})]});var T=n(9869),$=n(6792);let{getLink:_}=T.docsUIRoutes,S=_("styles");function R(e){let t={a:"a",code:"code",div:"div",h1:"h1",h2:"h2",h3:"h3",h4:"h4",hr:"hr",p:"p",pre:"pre",span:"span",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,a.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)($.PB,{title:"Avatar"}),"\n",(0,s.jsx)(t.h1,{children:"@pikas-ui/avatar"}),"\n",(0,s.jsx)(t.p,{children:"This package contains a avatar component that can be used to show a user's profile picture."}),"\n",(0,s.jsxs)(t.p,{children:["This library is based on ",(0,s.jsx)(t.a,{href:"https://www.radix-ui.com/",children:"Radix Ui"}),"."]}),"\n",(0,s.jsx)("a",{href:"https://github.com/Achaak/pikas/blob/main/packages/ui/avatar/CHANGELOG.md",children:(0,s.jsx)(t.p,{children:"Change Log"})}),"\n",(0,s.jsx)(t.h2,{children:"Requirements"}),"\n",(0,s.jsxs)(t.p,{children:["To use this package, you must install the ",(0,s.jsx)("a",{href:S,children:"@pikas-ui/styles"})," package."]}),"\n",(0,s.jsx)(t.h2,{children:"Installation"}),"\n",(0,s.jsx)(t.p,{children:"You can install this package using npm, yarn, or pnpm."}),"\n",(0,s.jsx)(t.div,{className:"remark-highlight",children:(0,s.jsx)(t.pre,{className:"language-unknown",children:(0,s.jsx)(t.code,{className:"language-unknown",children:"npm install @pikas-ui/avatar"})})}),"\n",(0,s.jsx)(t.div,{className:"remark-highlight",children:(0,s.jsx)(t.pre,{className:"language-unknown",children:(0,s.jsx)(t.code,{className:"language-unknown",children:"yarn add @pikas-ui/avatar"})})}),"\n",(0,s.jsx)(t.div,{className:"remark-highlight",children:(0,s.jsx)(t.pre,{className:"language-unknown",children:(0,s.jsx)(t.code,{className:"language-unknown",children:"pnpm add @pikas-ui/avatar"})})}),"\n",(0,s.jsx)(t.hr,{}),"\n",(0,s.jsx)(t.h2,{children:"Usage"}),"\n",(0,s.jsx)(t.h3,{children:"Avatar"}),"\n",(0,s.jsx)(t.p,{children:"The avatar component is used to show a user's profile picture."}),"\n",(0,s.jsx)(C,{}),"\n",(0,s.jsx)(t.div,{className:"remark-highlight",children:(0,s.jsx)(t.pre,{className:"language-tsx",children:(0,s.jsxs)(t.code,{className:"language-tsx",children:[(0,s.jsx)(t.span,{className:"token keyword",children:"import"})," ",(0,s.jsxs)(t.span,{className:"token imports",children:[(0,s.jsx)(t.span,{className:"token punctuation",children:"{"})," ",(0,s.jsx)(t.span,{className:"token maybe-class-name",children:"Avatar"})," ",(0,s.jsx)(t.span,{className:"token punctuation",children:"}"})]})," ",(0,s.jsx)(t.span,{className:"token keyword",children:"from"})," ",(0,s.jsx)(t.span,{className:"token string",children:"'@pikas-ui/avatar'"}),(0,s.jsx)(t.span,{className:"token punctuation",children:";"}),"\n\n",(0,s.jsx)(t.span,{className:"token keyword",children:"const"})," ",(0,s.jsx)(t.span,{className:"token maybe-class-name",children:"Example"}),(0,s.jsx)(t.span,{className:"token operator",children:":"})," ",(0,s.jsx)(t.span,{className:"token maybe-class-name",children:"React"}),(0,s.jsx)(t.span,{className:"token punctuation",children:"."}),(0,s.jsx)(t.span,{className:"token method-variable function-variable method function property-access",children:(0,s.jsx)(t.span,{className:"token maybe-class-name",children:"FC"})})," ",(0,s.jsx)(t.span,{className:"token operator",children:"="})," ",(0,s.jsx)(t.span,{className:"token punctuation",children:"("}),(0,s.jsx)(t.span,{className:"token punctuation",children:")"})," ",(0,s.jsx)(t.span,{className:"token arrow operator",children:"=>"})," ",(0,s.jsx)(t.span,{className:"token punctuation",children:"{"}),"\n  ",(0,s.jsx)(t.span,{className:"token keyword",children:"return"})," ",(0,s.jsx)(t.span,{className:"token punctuation",children:"("}),"\n    ",(0,s.jsxs)(t.span,{className:"token tag",children:[(0,s.jsxs)(t.span,{className:"token tag",children:[(0,s.jsx)(t.span,{className:"token punctuation",children:"<"}),(0,s.jsx)(t.span,{className:"token class-name",children:"Avatar"})]}),"\n      ",(0,s.jsx)(t.span,{className:"token attr-name",children:"alt"}),(0,s.jsxs)(t.span,{className:"token attr-value",children:[(0,s.jsx)(t.span,{className:"token punctuation attr-equals",children:"="}),(0,s.jsx)(t.span,{className:"token punctuation",children:'"'}),"Jane Doe",(0,s.jsx)(t.span,{className:"token punctuation",children:'"'})]}),"\n      ",(0,s.jsx)(t.span,{className:"token attr-name",children:"fallback"}),(0,s.jsxs)(t.span,{className:"token attr-value",children:[(0,s.jsx)(t.span,{className:"token punctuation attr-equals",children:"="}),(0,s.jsx)(t.span,{className:"token punctuation",children:'"'}),"JD",(0,s.jsx)(t.span,{className:"token punctuation",children:'"'})]}),"\n      ",(0,s.jsx)(t.span,{className:"token attr-name",children:"src"}),(0,s.jsxs)(t.span,{className:"token script language-javascript",children:[(0,s.jsx)(t.span,{className:"token script-punctuation punctuation",children:"="}),(0,s.jsx)(t.span,{className:"token punctuation",children:"{"}),"\n        ",(0,s.jsx)(t.span,{className:"token string",children:"'https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80'"}),"\n      ",(0,s.jsx)(t.span,{className:"token punctuation",children:"}"})]}),"\n    ",(0,s.jsx)(t.span,{className:"token punctuation",children:"/>"})]}),"\n  ",(0,s.jsx)(t.span,{className:"token punctuation",children:")"}),(0,s.jsx)(t.span,{className:"token punctuation",children:";"}),"\n",(0,s.jsx)(t.span,{className:"token punctuation",children:"}"}),(0,s.jsx)(t.span,{className:"token punctuation",children:";"}),"\n"]})})}),"\n",(0,s.jsx)(t.h4,{children:"Props"}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Prop"}),(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Description"}),(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Type"}),(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Default"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"alt"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"The alt text for the image."}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"string"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"-"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"src"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"The image source."}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"string"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"-"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"onLoadingStatusChange"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"Callback when the image loading status changes."}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"(status: AvatarImageLoadingStatus) => void"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"-"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"delayMs"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"The delay in milliseconds before the image is loaded."}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"number"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"-"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"fallback"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"The fallback text."}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"string"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"-"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"fallbackColorName"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"The fallback text color."}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"string"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:'"primary"'})})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"}

1,children:(0,s.jsx)(t.code,{children:"fallbackBackgroundColorName"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"The fallback background color."}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"string"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:'"primary-lightest-2"'})})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"css"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"The css."}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"AvatarCSS"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"-"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"size"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"The size of the avatar."}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"number"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"80"})})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"borderRadius"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"The border radius of the avatar."}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"PikasRadius"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:'"full"'})})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"loading"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"The loading status of the avatar."}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"boolean"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"false"})})]})]})]}),"\n",(0,s.jsx)(t.hr,{}),"\n",(0,s.jsx)(t.h2,{children:"Contributing"}),"\n",(0,s.jsxs)(t.p,{children:["This documentation can be edited on GitHub ",(0,s.jsx)(t.a,{href:"https://github.com/Achaak/pikas/blob/main/apps/docs-ui/pages/components/avatar.mdx",children:"here"})]})]})}function L(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}={...(0,a.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(R,{...e})}):R(e)}},2640:function(e,t,n){"use strict";n.d(t,{a:function(){return l}});var s=n(2983);let a=s.createContext({});function l(e){let t=s.useContext(a);return s.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}},4243:function(e,t,n){"use strict";n.d(t,{O:function(){return c}});var s=n(7458),a=n(2865);let l=(0,a.F4)({"0%":{transform:"translateX(-100%)"},"50%":{transform:"translateX(100%)"},"100%":{transform:"translateX(100%)"}}),i=(0,a.F4)({"0%":{opacity:1},"50%":{opacity:.4},"100%":{opacity:1}}),r=(0,a.zo)("div",{display:"block",width:"100%",height:"100%",position:"relative",overflow:"hidden",variants:{animation:{pulse:{backgroundColor:"$gray-light","&::before":{content:'""',position:"absolute",top:0,left:0,right:0,bottom:0,animation:`${i.name} 2s 0.5s linear infinite`,backgroundColor:"$gray-lighter"}},wave:{overflow:"hidden",backgroundColor:"$gray-light","&::before":{content:'""',position:"absolute",top:0,left:0,right:0,bottom:0,opacity:.5,backgroundColor:"$gray-lighter"},"&::after":{content:'""',position:"absolute",top:0,bottom:0,left:0,width:"100%",background:"linear-gradient(90deg, $transparent, $gray-lighter, $transparent)",animation:`${l.name} 3s 0.5s linear infinite`}},false:{backgroundColor:"$gray-light","&::before":{content:'""',position:"absolute",top:0,left:0,right:0,bottom:0,opacity:.7,backgroundColor:"$gray-lighter"}}}}}),c=({animation:e="pulse",borderRadius:t="sm",height:n,width:a,css:l})=>(0,s.jsx)(r,{css:{width:a,height:n,borderRadius:`$${t}`,...l},animation:e})}},function(e){e.O(0,[2888,9774,179],function(){return e(e.s=5411)}),_N_E=e.O()}]);