https://layer5.io/component---src-templates-sistent-component-js-c…avatar-guidance-mdx-b4b22178d1b2687cb426.js

1(self.webpackChunkLayer5=self.webpackChunkLayer5||[]).push([[6227],{25452:function(e,t,n){"use strict";var a=n(96540),i=n(48995),l=n(92121);t.A=e=>{let{children:t}=e;const{isDark:n}=(0,l.G)();return a.createElement(i.SistentThemeProvider,{initialMode:n?"dark":"light"},t)}},36669:function(e,t,n){var a=n(75972).k5;e.exports.Z=function(e){return a({tag:"svg",attr:{viewBox:"0 0 448 512"},child:[{tag:"path",attr:{d:"M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"}}]})(e)}},38141:function(e,t,n){"use strict";n.d(t,{A:function(){return c}});var a=n(96540),i=n(86462),l=n(64810);const r=e=>{let{canonical:t,description:n,image:r,schemaMarkup:c,title:o,children:m}=e;const{pathname:s}=(0,i.useLocation)(),u="true"==={}.GATSBY_PREVIEW,{title:d,description:p,image:g,siteUrl:E,twitterUsername:f}=(0,l.useStaticQuery)("4047814605").site.siteMetadata,A={title:o||d,description:n||p,image:(y=r||g,y?/^(?:[a-z]+:)?\/\//i.test(y)?y:new URL(y.replace(/^\//,""),E+"/").toString():y),url:new URL((s.replace(".html","")||"/").replace(/^\//,""),E+"/").toString().replace(/\/$/,""),twitterUsername:f};var y;return t&&!u||(t=A.url),a.createElement(a.Fragment,null,a.createElement("title",null,A.title),a.createElement("meta",{charSet:"utf-8"}),a.createElement("meta",{name:"viewport",content:"width=device-width, initial-scale=1"}),a.createElement("meta",{name:"description",content:A.description}),a.createElement("meta",{name:"image",content:A.image}),a.createElement("meta",{name:"author",content:"Layer5, Inc."}),u&&a.createElement(a.Fragment,null,a.createElement("meta",{name:"robots",content:"noindex, nofollow"}),a.createElement("meta",{name:"googlebot",content:"noindex, nofollow"})),a.createElement("meta",{property:"og:type",content:"website"}),a.createElement("meta",{property:"og:title",content:A.title}),a.createElement("meta",{property:"og:description",content:A.description}),a.createElement("meta",{property:"og:image",content:A.image}),a.createElement("meta",{property:"og:url",content:A.url}),a.createElement("meta",{name:"twitter:card",content:"summary_large_image"}),a.createElement("meta",{name:"twitter:creator",content:A.twitterUsername}),a.createElement("meta",{name:"twitter:title",content:A.title}),a.createElement("meta",{name:"twitter:description",content:A.description}),a.createElement("meta",{name:"twitter:image",content:A.image}),a.createElement("meta",{name:"twitter:url",content:A.url}),a.createElement("link",{rel:"shortcut icon",type:"image/x-icon",href:"data:image/webp;base64,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"}),a.createElement("link",{rel:"canonical",href:t}),c&&a.createElement("script",{type:"application/ld+json"},JSON.stringify(c)),m)};r.defaultProps={title:null,lang:"en",meta:[],description:"",image:null};var c=r},61262:function(e,t,n){"use strict";n.d(t,{p:function(){return m}});var a=n(96540),i=n(91580),l=n(66198),r=n(66054),c=n(78023),o=n(95646);const m=e=>{let{title:t,children:n}=e;return a.createElement(i.A,null,a.createElement("div",{className:"page-header-section"},a.createElement("h1",null,t)),a.createElement("div",{className:"page-container"},a.createElement(l.A,null),a.createElement("div",{className:"page-section"},a.createElement(r.mc,null,n," ",a.createElement(c.A,null)),a.createElement(o.A,null))))}},78023:function(e,t,n){"use strict";n.d(t,{A:function(){return m}});n(20410);var a=n(96540),i=n(64810),l=n(96044);var r=n(882).default.div.withConfig({displayName:"paginationstyle__TocPaginationWrapper",componentId:"sc-isbsjw-0"})(["display:flex;gap:1rem;justify-content:center;margin:3rem 2rem 4rem 2rem;@media screen and (max-width:540px){margin:0 0 2rem 0;flex-flow:row wrap;gap:0.3rem;}"]);const c=[{link:"/projects/sistent/getting-started/about",text:"About"},{link:"/projects/sistent/getting-started/installation",text:"Installation"},{link:"/projects/sistent/getting-started/usage",text:"Usage"},{link:"/projects/sistent/getting-started/tokens",text:"Tokens"},{link:"/projects/sistent/identity/color",text:"Colors"},{link:"/projects/sistent/identity/color/guidance",text:"Colors"},{link:"/projects/sistent/identity/color/code",text:"Colors"},{link:"/projects/sistent/identity/spacing",text:"Spacing"},{link:"/projects/sistent/identity/spacing/guidance",text:"Spacing"},{link:"/projects/sistent/identity/spacing/code",text:"Spacing"},{link:"/projects/sistent/identity/typography",text:"Typography"},{link:"/projects/sistent/identity/typography/guidance",text:"Typography"},{link:"/projects/sistent/identity/typography/code",text:"Typography"}],o={overview:1,guidance:2,code:3};var m=()=>{var e,t;const{0:n,1:m}=(0,a.useState)(0),s=(0,i.useStaticQuery)("805582494"),u=(0,a.useMemo)(()=>{const e=new Set;return s.allMdx.nodes.forEach(t=>{"overview"===t.fields.pageType&&!0===t.frontmatter.published&&e.add(t.frontmatter.component)}),e},[s.allMdx.nodes]),d=(0,a.useMemo)(()=>s.allMdx.nodes.map(e=>({componentSlug:e.frontmatter.component,text:e.frontmatter.name||e.frontmatter.component,link:e.fields.slug,pageType:e.fields.pageType})).filter(e=>u.has(e.componentSlug)).sort((e,t)=>e.componentSlug!==t.componentSlug?(e.componentSlug||"").localeCompare(t.componentSlug||""):(o[e.pageType]||99)-(o[t.pageType]||99)),[s.allMdx.nodes,u]),p=(0,a.useMemo)(()=>{const e=[...c,...d],t=new Set;return e.filter(e=>!t.has(e.link)&&(t.add(e.link),!0))},[d]);return(0,a.useEffect)(()=>{const e=window.location.pathname,t=e.endsWith("/")&&e.length>1?e.slice(0,-1):e,n=p.findIndex(e=>e.link===t);m(n)},[p]),a.createElement(r,null,n>0?a.createElement(l.default,{$secondary:!0,$url:null===(e=p[n-1])||void 0===e?void 0:e.link},"← Previous"):null,-1!==n&&n<p.length-1?a.createElement(l.default,{$primary:!0,$url:null===(t=p[n+1])||void 0===t?void 0:t.link},"Next →"):null)}},80749:function(e,t,n){"use strict";n.r(t),n.d(t,{Head:function(){return x},default:function(){return w}});var a=n(28453),i=n(96540);function l(e){const t=Object.assign({p:"p"},(0,a.R)(),e.components);return i.createElement(i.Fragment,null,i.createElement("h3",null,"Best Practices"),"\n",i.createElement("ul",null,i.createElement("li",null,i.createElement(t.p,null,i.createElement("strong",null,"Visual Representation:")," Choose clear, recognizable images that authentically represent the user or entity.")),i.createElement("li",null,i.createElement(t.p,null,i.createElement("strong",null,"Fallback Mechanisms:")," Implement robust fallback strategies:")),i.createElement("li",null,"Optimize image resolution for performance and clarity.")),"\n",i.createElement("h3",null,"Accessibility Considerations"),"\n",i.createElement("ul",null,i.createElement("li",null,i.createElement(t.p,null,"Mandatory ",i.createElement("code",null,"alt")," text for screen reader compatibility.")),i.createElement("li",null,"Ensure 4.5:1 color contrast ratio for initials and icons."),i.createElement("li",null,"Add meaningful aria labels for context.")),"\n",i.createElement("h3",null,"Performance Optimization"),"\n",i.createElement("ul",null,i.createElement("li",null,"Use image compression techniques."),i.createElement("li",null,"Implement lazy loading for avatar images."),i.createElement("li",null,"Cache avatar images to reduce network requests.")),"\n",i.createElement("h3",null,"Advanced Customization"),"\n",i.createElement("ul",null,i.createElement("li",null,"Theme-aware color generation for initial avatars."),i.createElement("li",null,"Status indicators (online/offline/away).")),"\n",i.createElement("h3",null,"Common Integration Patterns"),"\n",i.createElement("ul",null,i.createElement("li",null,"User profile headers"),i.createElement("li",null,"Team member lists"),i.createElement("li",null,"Comment and messaging interfaces"),i.createElement("li",null,"Collaboration platform user representations")))}var r=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,a.R)(),e.components);return t?i.createElement(t,e,i.createElement(l,e)):l(e)},c=n(64810),o=n(86462),m=n(36669),s=n(61262),u=n(96044),d=n(66054),p=n(79147),g=n(48995),E=n(25452),f=n(38141);const A=e=>e.split("-").map(e=>e.charAt(0).toUpperCase()+e.slice(1)).join(" "),y={SistentThemeProvider:g.SistentThemeProvider,ThemeWrapper:E.A,Button:g.Button,Col:d.fv,Row:d.fI,CodeBlock:p.Ay,FaArrowRight:m.Z},h=e=>{let{data:t,children:n,pageContext:l}=e;const{frontmatter:r}=t.mdx,m=(0,o.useLocation)(),{componentName:d,availablePages:p}=l,g="/projects/sistent/components/"+d,E=A(d);return i.createElement(s.p,{title:E},i.createElement("div",{className:"content"},i.createElement("div",{style:{marginBottom:"1rem"}},i.createElement("h1",null,E),r.description&&i.createElement("p",null,r.description)),i.createElement(a.x,{components:y},i.createElement("div",{className:"filterBtns"},p.includes("overview")&&i.createElement(u.default,{className:m.pathname===g?"active":"",onClick:()=>(0,c.navigate)(g),title:"Overview"}),p.includes("guidance")&&i.createElement(u.default,{className:m.pathname===g+"/guidance"?"active":"",onClick:()=>(0,c.navigate)(g+"/guidance"),title:"Guidance"}),p.includes("code")&&i.createElement(u.default,{className:m.pathname===g+"/code"?"active":"",onClick:()=>(0,c.navigate)(g+"/code"),title:"Code"})),i.createElement("div",{className:"main-content"},n))))},x=e=>{let{data:t,pageContext:n}=e;const{frontmatter:a}=t.mdx,{componentName:l}=n,r=A(l);return i.createElement(f.A,{title:a.title||r+" - Sistent Design System",description:a.description||r+" component guidance, usage, and code reference from Sistent, Layer5's open source design system for cloud native applications."})};function w(e){return i.createElement(h,e,i.createElement(r,e))}},95646:function(e,t,n){"use strict";var a=n(96540),i=n(64810);const l=n(882).default.div.withConfig({displayName:"intra-page__JoinCommunityWrapper",componentId:"sc-q3x19t-0"})(["width:18rem;@media screen and (max-width:750px){display:none;}@media screen and (min-width:751px) and (max-width:1279px){display:none;}.intra-page{position:sticky;top:17rem;right:0rem;margin-right:1rem;margin-top:17rem;padding-bottom:5rem;padding-right:2rem;align-items:left;justify-content:space-around;display:flex;flex-direction:column;overflow:hidden;.list{color:#000000;}.active{font-weight:5000;color:#000000;}ul{list-style:none;top:3rem;li{padding-bottom:0.5rem;padding-top:0.5rem;}}@media only screen and (min-width:1280px) and (max-width:1350px){padding-right:0rem;margin-right:0rem;}@media only screen and (max-width:950px){width:0;opacity:0;height:0;transition:none;visibility:hidden;}}

1.learn{width:10rem;}"]);t.A=function(){const{0:e,1:t}=(0,a.useState)([]);(0,a.useEffect)(()=>{const e=document.querySelectorAll(".main-content > a");console.log(e),e&&t(Array.from(e).map(e=>({id:e.id,link:"#"+e.id,text:e.id})))},[]);const{0:n,1:r}=(0,a.useState)(null);return(0,a.useEffect)(()=>{const e=window.location.pathname;r(e)},[]),a.createElement(l,null,a.createElement("div",{className:"intra-page"},a.createElement("ul",null,e.map(e=>a.createElement("li",{key:e.id,className:"list"},a.createElement(i.Link,{to:""+n+e.link,key:e.id,activeClassName:"active"},e.text))))))}}}]);