2 lines
3.4 KiB
JavaScript
2 lines
3.4 KiB
JavaScript
import{j as s}from"./chunk-UIGDSWPH-BhuNDbxn.js";import{C as a}from"./ComponentCard-C2b5w2__.js";import{P as u}from"./main-af3pcbZa.js";const m={xsmall:"h-6 w-6 max-w-6",small:"h-8 w-8 max-w-8",medium:"h-10 w-10 max-w-10",large:"h-12 w-12 max-w-12",xlarge:"h-14 w-14 max-w-14",xxlarge:"h-16 w-16 max-w-16"},x={xsmall:"h-1.5 w-1.5 max-w-1.5",small:"h-2 w-2 max-w-2",medium:"h-2.5 w-2.5 max-w-2.5",large:"h-3 w-3 max-w-3",xlarge:"h-3.5 w-3.5 max-w-3.5",xxlarge:"h-4 w-4 max-w-4"},g={online:"bg-success-500",offline:"bg-error-400",busy:"bg-warning-500"},e=({src:l,alt:t="User Avatar",size:r="medium",status:i="none"})=>s.jsxs("div",{className:`relative rounded-full ${m[r]}`,children:[s.jsx("img",{src:l,alt:t,className:"object-cover rounded-full"}),i!=="none"&&s.jsx("span",{className:`absolute bottom-0 right-0 rounded-full border-[1.5px] border-white dark:border-gray-900 ${x[r]} ${g[i]||""}`})]});function o(){return s.jsxs(s.Fragment,{children:[s.jsx(u,{title:"React.js Avatars Dashboard | TailAdmin - React.js Admin Dashboard Template",description:"This is React.js Avatars Dashboard page for TailAdmin - React.js Tailwind CSS Admin Dashboard Template"}),s.jsxs("div",{className:"space-y-5 sm:space-y-6",children:[s.jsx(a,{title:"Default Avatar",children:s.jsxs("div",{className:"flex flex-col items-center justify-center gap-5 sm:flex-row",children:[s.jsx(e,{src:"/images/user/user-01.jpg",size:"xsmall"}),s.jsx(e,{src:"/images/user/user-01.jpg",size:"small"}),s.jsx(e,{src:"/images/user/user-01.jpg",size:"medium"}),s.jsx(e,{src:"/images/user/user-01.jpg",size:"large"}),s.jsx(e,{src:"/images/user/user-01.jpg",size:"xlarge"}),s.jsx(e,{src:"/images/user/user-01.jpg",size:"xxlarge"})]})}),s.jsx(a,{title:"Avatar with online indicator",children:s.jsxs("div",{className:"flex flex-col items-center justify-center gap-5 sm:flex-row",children:[s.jsx(e,{src:"/images/user/user-01.jpg",size:"xsmall",status:"online"}),s.jsx(e,{src:"/images/user/user-01.jpg",size:"small",status:"online"}),s.jsx(e,{src:"/images/user/user-01.jpg",size:"medium",status:"online"}),s.jsx(e,{src:"/images/user/user-01.jpg",size:"large",status:"online"}),s.jsx(e,{src:"/images/user/user-01.jpg",size:"xlarge",status:"online"}),s.jsx(e,{src:"/images/user/user-01.jpg",size:"xxlarge",status:"online"})]})}),s.jsx(a,{title:"Avatar with Offline indicator",children:s.jsxs("div",{className:"flex flex-col items-center justify-center gap-5 sm:flex-row",children:[s.jsx(e,{src:"/images/user/user-01.jpg",size:"xsmall",status:"offline"}),s.jsx(e,{src:"/images/user/user-01.jpg",size:"small",status:"offline"}),s.jsx(e,{src:"/images/user/user-01.jpg",size:"medium",status:"offline"}),s.jsx(e,{src:"/images/user/user-01.jpg",size:"large",status:"offline"}),s.jsx(e,{src:"/images/user/user-01.jpg",size:"xlarge",status:"offline"}),s.jsx(e,{src:"/images/user/user-01.jpg",size:"xxlarge",status:"offline"})]})})," ",s.jsx(a,{title:"Avatar with busy indicator",children:s.jsxs("div",{className:"flex flex-col items-center justify-center gap-5 sm:flex-row",children:[s.jsx(e,{src:"/images/user/user-01.jpg",size:"xsmall",status:"busy"}),s.jsx(e,{src:"/images/user/user-01.jpg",size:"small",status:"busy"}),s.jsx(e,{src:"/images/user/user-01.jpg",size:"medium",status:"busy"}),s.jsx(e,{src:"/images/user/user-01.jpg",size:"large",status:"busy"}),s.jsx(e,{src:"/images/user/user-01.jpg",size:"xlarge",status:"busy"}),s.jsx(e,{src:"/images/user/user-01.jpg",size:"xxlarge",status:"busy"})]})})]})]})}export{o as default};
|