1import{j as e,av as s,z as t,A as l,a0 as r,y as o,g as c,E as m}from"./index-D5cwoIWQ.js";import{C as a}from"./CardBox-BL5JltDR.js";import{C as i}from"./CodeModal-BXZHrcCY.js";import{B as n}from"./BreadcrumbComp-BhzoegPc.js";import"./Card-omHwXhIy.js";import"./toConsumableArray-CsnBb14t.js";import"./extends-CF3RwP-h.js";const x=()=>e.jsx("div",{children:e.jsxs(a,{children:[e.jsxs("div",{className:"flex items-center justify-between mb-2",children:[e.jsx("div",{children:e.jsx("h4",{className:"text-lg font-semibold",children:"Avatar With Text"})}),e.jsx(i,{children:` 2 import { Avatar } from "flowbite-react"; 3 4 <Avatar img={user2} rounded> 5 <div className="space-y-1 font-medium dark:text-white"> 6 <div className="text-ld">Jese Leos</div> 7 <div className="text-sm text-darklink">Joined in August 2014</div> 8 </div> 9 </Avatar> 10 `})]}),e.jsx(s,{img:t,rounded:!0,children:e.jsxs("div",{className:"space-y-1 font-medium dark:text-white",children:[e.jsx("div",{className:"text-ld",children:"Jese Leos"}),e.jsx("div",{className:"text-sm text-darklink",children:"Joined in August 2014"})]})})]})}),u=()=>e.jsx("div",{children:e.jsxs(a,{children:[e.jsxs("div",{className:"flex items-center justify-between mb-2",children:[e.jsx("h4",{className:"text-lg font-semibold",children:"Border Avatar"}),e.jsx(i,{children:` 11 import { Avatar } from "flowbite-react"; 12 13 <div className="flex flex-wrap gap-2"> 14 <Avatar img={user2} rounded bordered /> 15 <Avatar img={user3} bordered /> 16 </div> 17 `})]}),e.jsxs("div",{className:"flex flex-wrap gap-2",children:[e.jsx(s,{img:t,rounded:!0,bordered:!0}),e.jsx(s,{img:l,bordered:!0}
17)]})]})}),g=()=>e.jsx("div",{children:e.jsx(i,{children:` 18 import { Avatar } from "flowbite-react"; 19 20 <div className="flex flex-col gap-5"> 21 <div className="flex flex-wrap gap-2"> 22 <Avatar 23 img="/src/assets/images/profile/user-5.jpg" 24 rounded 25 bordered 26 color="gray" 27 /> 28 <Avatar 29 img="/src/assets/images/profile/user-5.jpg" 30 rounded 31 bordered 32 color="light" 33 /> 34 <Avatar 35 img="/src/assets/images/profile/user-5.jpg" 36 rounded 37 bordered 38 color="purple" 39 /> 40 <Avatar 41 img="/src/assets/images/profile/user-5.jpg" 42 rounded 43 bordered 44 color="success" 45 /> 46 <Avatar 47 img="/src/assets/images/profile/user-5.jpg" 48 rounded 49 bordered 50 color="pink" 51 /> 52 </div> 53 <div className="flex flex-wrap gap-2 pb-14"> 54 <Avatar img="/src/assets/images/profile/user-5.jpg" bordered color="gray" /> 55 <Avatar img="/src/assets/images/profile/user-5.jpg" bordered color="light" /> 56 <Avatar 57 img="/src/assets/images/profile/user-5.jpg" 58 bordered 59 color="purple" 60 /> 61 <Avatar 62 img="/src/assets/images/profile/user-5.jpg" 63 bordered 64 color="success" 65 /> 66 <Avatar img="/src/assets/images/profile/user-5.jpg" bordered color="pink" /> 67 </div> 68 </div> 69 `})}),p=()=>e.jsx("div",{children:e.jsxs(a,{children:[e.jsxs("div",{className:"flex items-center justify-between mb-2",children:[e.jsx("h4",{className:"text-lg font-semibold",children:"Colors"}),e.jsx(g,{})]}),e.jsxs("div",{className:"flex flex-col gap-5",children:[e.jsxs("div",{className:"flex flex-wrap gap-2",children:[e.jsx(s,{img:r,rounded:!0,bordered:!0,color:"gray"}),e.jsx(s,{img:r,rounded:!0,bordered:!0,color:"light"}),e.jsx(s,{img:r,rounded:!0,bordered:!0,color:"purple"}),e.jsx(s,{img:r,rounded:!0,bordered:!0,color:"success"}),e.jsx(s,{img:r,rounded:!0,bordered:!0,color:"pink"})]}),e.jsxs("div",{className:"flex flex-wrap gap-2",children:[e.jsx(s,{img:r,bordered:!0,color:"gray"}),e.jsx(s,{img:r,bordered:!0,color:"light"}),e.jsx(s,{img:r,bordered:!0,color:"purple"}),e.jsx(s,{img:r,bordered:!0,color:"success"}),e.jsx(s,{img:r,bordered:!0,color:"pink"})]})]})]})}),j=()=>e.jsx("div",{children:e.jsxs(a,{children:[e.jsxs("div",{className:"flex items-center justify-between mb-2",children:[e.jsx("h4",{className:"text-lg font-semibold",children:"Default Avatar"}),e.jsx(i,{children:` 70 import { Avatar } from "flowbite-react"; 71 72 <div className="flex flex-wrap gap-2"> 73 <Avatar img={user2} rounded /> 74 <Avatar img={user3} /> 75 </div> 76 `})]}),e.jsxs("div",{className:"flex flex-wrap gap-2",children:[e.jsx(s,{img:t,rounded:!0}),e.jsx(s,{img:l})]})]})}),v=()=>e.jsx("div",{children:e.jsxs(a,{children:[e.jsxs("div",{className:"flex items-center justify-between mb-2",children:[e.jsx("div",{children:e.jsx("h4",{className:"text-lg font-semibold",children:"Dot indicator"})}),e.jsx(i,{children:` 77 import { Avatar } from "flowbite-react"; 78 79 <div className="flex flex-wrap gap-2"> 80 <Avatar img="/src/assets/images/profile/user-2.jpg" status="online" /> 81 <Avatar 82 img={user3} 83 rounded 84 status="busy" 85 statusPosition="top-right" 86 /> 87 <Avatar 88 img={user4} 89 status="offline" 90 statusPosition="bottom-left" 91 /> 92 <Avatar 93 img={user5} 94 rounded 95 status="away" 96 statusPosition="bottom-right" 97 /> 98 </div> 99 `})]}),e.jsxs("div",{className:"flex flex-wrap gap-2",children:[e.jsx(s,{img:"/src/assets/images/profile/user-2.jpg",status:"online"}),e.jsx(s,{img:l,rounded:!0,status:"busy",statusPosition:"top-right"}),e.jsx(s,{img:o,status:"offline",statusPosition:"bottom-left"}),e.jsx(s,{img:r,rounded:!0,status:"away",statusPosition:"bottom-right"})]})]})}),f=()=>e.jsx("div",{children:e.jsxs(a,{children:[e.jsxs("div",{className:"flex items-center justify-between mb-2",children:[e.jsx("h4",{className:"text-lg font-semibold",children:"Override Image"}),e.jsx(i,{children:` 100 import { Avatar } from "flowbite-react"; 101 102 <div className="flex flex-wrap gap-2"> 103 <Avatar 104 img={(props) => ( 105 <Image 106 alt="" 107 height="48" 108 referrerPolicy="no-referrer" 109 src={user1} 110 width="48" 111 {...props} 112 /> 113 )} 114 /> 115 <Avatar 116 img={(props) => ( 117 <picture> 118 <source 119 media="(min-width: 900px)" 120 srcSet="/images/profile/user-2.jpg" 121 /> 122 <source 123 media="(min-width: 480px)" 124 srcSet="/images/profile/user-1.jpg" 125 /> 126 <Image 127 alt="" 128 height="48" 129 src={user2} 130 width="48" 131 {...props} 132 /> 133 </picture> 134 )} 135 /> 136 </div> 137 `})]}),e.jsxs("div",{className:"flex flex-wrap gap-2",children:[e.jsx(s,{img:d=>e.jsx("img",{alt:"",height:"48",referrerPolicy:"no-referrer",src:t,width:"48",...d})}),e.jsx(s,{img:d=>e.jsxs("picture",{children:[e.jsx("source",{media:"(min-width: 900px)",srcSet:t}),e.jsx("source",{media:"(min-width: 480px)",srcSet:c}),e.jsx("img",{alt:"",height:"48",src:c,width:"48",...d})]})})]})]})}),h=()=>e.jsx("div",{children:e.jsxs(a,{children:[e.jsxs("div",{className:"flex items-center justify-between mb-2",children:[e.jsx("h4",{className:"text-lg font-semibold",children:"Placeholder Initials"}),e.jsx(i,{children:` 138 import { Avatar } from "flowbite-react"; 139 140 <div className="flex flex-wrap gap-2"> 141 <Avatar placeholderInitials="RR" /> 142 <Avatar placeholderInitials="RR" rounded /> 143 </div> 144 `})]}),e.jsxs("div",{className:"flex flex-wrap gap-2",children:[e.jsx(s,{placeholderInitials:"RR"}),e.jsx(s,{placeholderInitials:"RR",rounded:!0})]})]})}),A=()=>e.jsx("div",{children:e.jsxs(a,{children:[e.jsxs("div",{className:"flex items-center justify-between mb-2",children:[e.jsx("h4",{className:"text-lg font-semibold",children:"Placeholder Avatar"}),e.jsx(i,{children:` 145 import { Avatar } from "flowbite-react"; 146 147 <div className="flex flex-wrap gap-2"> 148 <Avatar /> 149 <Avatar rounded /> 150 </div> 151 `})]}),e.jsxs("div",{className:"flex flex-wrap gap-2",children:[e.jsx(s,{}),e.jsx(s,{rounded:!0})]})]})}),b=()=>e.jsx("div",{children:e.jsx(i,{children:` 152 import { Avatar } from "flowbite-react"; 153 154 <div className="flex flex-wrap items-center gap-2"> 155 <Avatar img="/src/assets/images/profile/user-5.jpg" size="xs" /> 156 <Avatar img="/src/assets/images/profile/user-5.jpg" size="sm" /> 157 <Avatar img="/src/assets/images/profile/user-5.jpg" size="md" /> 158 <Avatar img="/src/assets/images/profile/user-5.jpg" size="lg" /> 159 </div> 160 `})}),N=()=>e.jsx("div",{children:e.jsxs(a,{children:[e.jsxs("div",{className:"flex items-center justify-between mb-2",children:[e.jsx("h4",{className:"text-lg font-semibold",children:"Avatar Sizes"}),e.jsx(b,{})]}),e.jsxs("div",{className:"flex flex-wrap items-center gap-2",children:[e.jsx(s,{img:r,size:"xs"}),e.jsx(s,{img:r,size:"sm"}),e.jsx(s,{img:r,size:"md"}),e.jsx(s,{img:r,size:"lg"})]})]})}),w=()=>e.jsx("div",{children:e.jsx(i,{children:` 161 import { Avatar } from "flowbite-react"; 162 163 <div className="flex flex-col flex-wrap gap-5"> 164 <Avatar.Group> 165 <Avatar img="/src/assets/images/profile/user-2.jpg" rounded stacked /> 166 <Avatar img="/src/assets/images/profile/user-3.jpg" rounded stacked /> 167 <Avatar img="/src/assets/images/profile/user-4.jpg" rounded stacked /> 168 <Avatar img="/src/assets/images/profile/user-5.jpg" rounded stacked /> 169 <Avatar img="/src/assets/images/profile/user-6.jpg" rounded stacked /> 170 </Avatar.Group> 171 <Avatar.Group> 172 <Avatar img="/src/assets/images/profile/user-2.jpg" rounded stacked /> 173 <Avatar img="/src/assets/images/profile/user-3.jpg" rounded stacked /> 174 <Avatar img="/src/assets/images/profile/user-4.jpg" rounded stacked /> 175 <Avatar img="/src/assets/images/profile/user-5.jpg" rounded stacked /> 176 <Avatar.Counter total={99} href="#" /> 177 </Avatar.Group> 178 </div> 179 `})}),k=()=>e.jsx("div",{children:e.jsxs(a,{children:[e.jsxs("div",{className:"flex items-center justify-between mb-2",children:[e.jsx("h4",{className:"text-lg font-semibold",children:"Stacked layout"}),e.jsx(w,{})]}),e.jsxs("div",{className:"flex flex-col flex-wrap gap-5",children:[e.jsxs(s.Group,{children:[e.jsx(s,{img:t,rounded:!0,stacked:!0}),e.jsx(s,{img:l,rounded:!0,stacked:!0}),e.jsx(s,{img:o,rounded:!0,stacked:!0}),e.jsx(s,{img:r,rounded:!0,stacked:!0}),e.jsx(s,{img:m,rounded:!0,stacked:!0})]}),e.jsxs(s.Group,{children:[e.jsx(s,{img:t,rounded:!0,stacked:!0}),e.jsx(s,{img:l,rounded:!0,stacked:!0}),e.jsx(s,{img:o,rounded:!0,stacked:!0}),e.jsx(s,{img:r,rounded:!0,stacked:!0}),e.jsx(s.Counter,{total:99,href:"#"})]})]})]})}),y=[{to:"/",title:"Home"},{title:"Avatar"}],G=()=>e.jsxs(e.Fragment,{children:[e.jsx(n,{title:"Avatar",items:y}),e.jsxs("div",{className:"grid grid-cols-12 gap-30",children:[e.jsx("div",{className:"lg:col-span-3 md:col-span-6 col-span-12",children:e.jsx(j,{})}),e.jsx("div",{className:"lg:col-span-3 md:col-span-6 col-span-12",children:e.jsx(u,{})}),e.jsx("div",{className:"lg:col-span-3 md:col-span-6 col-span-12",children:e.jsx(A,{})}),e.jsx("div",{className:"lg:col-span-3 md:col-span-6 col-span-12",children:e.jsx(h,{})}),e.jsx("div",{className:"lg:col-span-4 col-span-12",children:e.jsx(v,{})}),e.jsx("div",{className:"lg:col-span-4 col-span-12",children:e.jsx(f,{})}),e.jsx("div",{className:"lg:col-span-4 col-span-12",children:e.jsx(x,{})}),e.jsx("div",{className:"lg:col-span-4 col-span-12",children:e.jsx(p,{})}),e.jsx("div",{className:"lg:col-span-4 col-span-12",children:e.jsx(k,{})}),e.jsx("div",{className:"lg:col-span-4 col-span-12",children:e.jsx(N,{})})]})]});
179export{G as default};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.