community-rule/docs/assets/Avatar.stories-BXBDwngC.js

import{j as s}from"./jsx-runtime-C_nHp4yK.js";import{A as a}from"./Avatar-C4Vb3oYl.js";import"./iframe-D_aMTKb2.js";import"./preload-helper-DIZFD4sK.js";const d={title:"Components/Avatar",component:a,parameters:{layout:"centered",docs:{description:{component:"A simple avatar component that displays user profile images with multiple size variants. Supports custom images and alt text for accessibility."}}},argTypes:{src:{control:{type:"text"},description:"The source URL of the avatar image"},alt:{control:{type:"text"},description:"Alt text for accessibility"},size:{control:{type:"select"},options:["small","medium","large","xlarge"],description:"The size of the avatar"},className:{control:{type:"text"},description:"Additional CSS classes"}},tags:["autodocs"]},r={args:{src:"/assets/Avatar_1.png",alt:"User Avatar",size:"medium"}},t={args:{src:"/assets/Avatar_1.png",alt:"User Avatar"},render:e=>s.jsx("div",{className:"space-y-4",children:s.jsxs("div",{className:"space-x-4",children:[s.jsx(a,{...e,size:"small"}),s.jsx(a,{...e,size:"medium"}),s.jsx(a,{...e,size:"large"}),s.jsx(a,{...e,size:"xlarge"})]})}),parameters:{docs:{description:{story:"Different size variants available for the avatar component."}}}},i={args:{size:"large"},render:e=>s.jsx("div",{className:"space-y-4",children:s.jsxs("div",{className:"space-x-4",children:[s.jsx(a,{...e,src:"assets/Avatar_1.png",alt:"User 1"}),s.jsx(a,{...e,src:"assets/Avatar_2.png",alt:"User 2"}),s.jsx(a,{...e,src:"assets/Avatar_3.png",alt:"User 3"})]})}),parameters:{docs:{description:{story:"Different avatar images available in the project."}}}},n={args:{},render:()=>s.jsxs("div",{className:"space-y-6",children:[s.jsxs("div",{children:[s.jsx("h3",{className:"text-white font-semibold mb-3",children:"Small Size"}),s.jsxs("div",{className:"space-x-4",children:[s.jsx(a,{size:"small",src:"assets/Avatar_1.png",alt:"User 1"}),s.jsx(a,{size:"small",src:"assets/Avatar_2.png",alt:"User 2"}),s.jsx(a,{size:"small",src:"assets/Avatar_3.png",alt:"User 3"})]})]}),s.jsxs("div",{children:[s.jsx("h3",{className:"text-white font-semibold mb-3",children:"Medium Size"}),s.jsxs("div",{className:"space-x-4",children:[s.jsx(a,{size:"medium",src:"assets/Avatar_1.png",alt:"User 1"}),s.jsx(a,{size:"medium",src:"assets/Avatar_2.png",alt:"User 2"}),s.jsx(a,{size:"medium",src:"assets/Avatar_3.png",alt:"User 3"})]})]}),s.jsxs("div",{children:[s.jsx("h3",{className:"text-white font-semibold mb-3",children:"Large Size"}),s.jsxs("div",{className:"space-x-4",children:[s.jsx(a,{size:"large",src:"assets/Avatar_1.png",alt:"User 1"}),s.jsx(a,{size:"large",src:"assets/Avatar_2.png",alt:"User 2"}),s.jsx(a,{size:"large",src:"assets/Avatar_3.png",alt:"User 3"})]})]}),s.jsxs("div",{children:[s.jsx("h3",{className:"text-white font-semibold mb-3",children:"XLarge Size"}),s.jsxs("div",{className:"space-x-4",children:[s.jsx(a,{size:"xlarge",src:"assets/Avatar_1.png",alt:"User 1"}),s.jsx(a,{size:"xlarge",src:"assets/Avatar_2.png",alt:"User 2"}),s.jsx(a,{size:"xlarge",src:"assets/Avatar_3.png",alt:"User 3"})]})]})]}),parameters:{docs:{description:{story:"Complete overview of all avatar sizes with different user images."}}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
  args: {
    src: "/assets/Avatar_1.png",
    alt: "User Avatar",
    size: "medium"
  }
}`,...r.parameters?.docs?.source}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
  args: {
    src: "/assets/Avatar_1.png",
    alt: "User Avatar"
  },
  render: args => <div className="space-y-4">
      <div className="space-x-4">
        <Avatar {...args} size="small" />
        <Avatar {...args} size="medium" />
        <Avatar {...args} size="large" />
        <Avatar {...args} size="xlarge" />
      </div>
    </div>,
  parameters: {
    docs: {
      description: {
        story: "Different size variants available for the avatar component."
      }
    }
  }
}`,...t.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
  args: {
    size: "large"
  },
  render: args => <div className="space-y-4">
      <div className="space-x-4">
        <Avatar {...args} src="assets/Avatar_1.png" alt="User 1" />
        <Avatar {...args} src="assets/Avatar_2.png" alt="User 2" />
        <Avatar {...args} src="assets/Avatar_3.png" alt="User 3" />
      </div>
    </div>,
  parameters: {
    docs: {
      description: {
        story: "Different avatar images available in the project."
      }
    }
  }
}`,...i.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
  args: {},
  render: () => <div className="space-y-6">
      <div>
        <h3 className="text-white font-semibold mb-3">Small Size</h3>
        <div className="space-x-4">
                  <Avatar size="small" src="assets/Avatar_1.png" alt="User 1" />
        <Avatar size="small" src="assets/Avatar_2.png" alt="User 2" />
        <Avatar size="small" src="assets/Avatar_3.png" alt="User 3" />
        </div>
      </div>

      <div>
        <h3 className="text-white font-semibold mb-3">Medium Size</h3>
        <div className="space-x-4">
                  <Avatar size="medium" src="assets/Avatar_1.png" alt="User 1" />
        <Avatar size="medium" src="assets/Avatar_2.png" alt="User 2" />
        <Avatar size="medium" src="assets/Avatar_3.png" alt="User 3" />
        </div>
      </div>

      <div>
        <h3 className="text-white font-semibold mb-3">Large Size</h3>
        <div className="space-x-4">
                  <Avatar size="large" src="assets/Avatar_1.png" alt="User 1" />
        <Avatar size="large" src="assets/Avatar_2.png" alt="User 2" />
        <Avatar size="large" src="assets/Avatar_3.png" alt="User 3" />
        </div>
      </div>

      <div>
        <h3 className="text-white font-semibold mb-3">XLarge Size</h3>
        <div className="space-x-4">
                  <Avatar size="xlarge" src="assets/Avatar_1.png" alt="User 1" />
        <Avatar size="xlarge" src="assets/Avatar_2.png" alt="User 2" />
        <Avatar size="xlarge" src="assets/Avatar_3.png" alt="User 3" />
        </div>
      </div>
    </div>,
  parameters: {
    docs: {
      description: {
        story: "Complete overview of all avatar sizes with different user images."
      }
    }
  }
}`,...n.parameters?.docs?.source}}};const v=["Default","Sizes","DifferentAvatars","AllSizesWithDifferentAvatars"];export{n as AllSizesWithDifferentAvatars,r as Default,i as DifferentAvatars,t as Sizes,v as __namedExportsOrder,d as default};