"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),e=require("../index-DEZRGktf.js"),i=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const s=require("../1-CArqgiQa.js"),t=()=>a.jsxs(a.Fragment,{children:[a.jsx(e.HeroCard,{title:"Avatar",description:`A versatile avatar component for displaying user profile images with
          multiple sizes and shapes.`,icon:a.jsx("div",{className:"w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-emerald-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg",children:a.jsx(i.CircleUser,{className:"w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg"})})}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Default Avatar"}),a.jsx(e.Avatar,{image:s.avatar1Img,alt:"User avatar"})]}),a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Without Border"}),a.jsx(e.Avatar,{image:s.avatar1Img,alt:"User avatar",border:!1})]})]})})})}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Variants",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsxs("div",{className:"space-y-6",children:[a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Sizes"}),a.jsxs("div",{className:"flex items-center gap-4",children:[a.jsx(e.Avatar,{image:s.avatar1Img,alt:"XS",size:"xs"}),a.jsx(e.Avatar,{image:s.avatar1Img,alt:"SM",size:"sm"}),a.jsx(e.Avatar,{image:s.avatar1Img,alt:"MD",size:"md"}),a.jsx(e.Avatar,{image:s.avatar1Img,alt:"LG",size:"lg"}),a.jsx(e.Avatar,{image:s.avatar1Img,alt:"XL",size:"xl"})]})]}),a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Shapes"}),a.jsxs("div",{className:"flex items-center gap-4",children:[a.jsx(e.Avatar,{image:s.avatar1Img,alt:"Circle",shape:"circle"}),a.jsx(e.Avatar,{image:s.avatar1Img,alt:"Rounded",shape:"rounded"})]})]})]})})})}),a.jsx(e.PropPlayground,{componentName:"Avatar",defaultValues:{size:"md",shape:"circle",border:!0,image:"https://randomuser.me/api/portraits/men/1.jpg",alt:"Avatar"},children:r=>a.jsx(e.Avatar,{...r})}),a.jsx(e.AutoPropsTable,{componentName:"Avatar"}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsx(e.CodeBlock,{language:"tsx",code:`import { Avatar } from '@e-burgos/tucu-ui';

// Basic usage
<Avatar image="/path/to/image.jpg" alt="User name" />

// Different sizes
<Avatar image={image} alt="User" size="xs" />
<Avatar image={image} alt="User" size="sm" />
<Avatar image={image} alt="User" size="md" />
<Avatar image={image} alt="User" size="lg" />
<Avatar image={image} alt="User" size="xl" />

// Different shapes
<Avatar image={image} alt="User" shape="circle" />
<Avatar image={image} alt="User" shape="rounded" />

// Without border
<Avatar image={image} alt="User" border={false} />`})})})})]});exports.default=t;
