mirror of
https://github.com/hanzoai/calendar.git
synced 2026-10-30 14:46:43 +00:00
e7c219905f
Co-authored-by: Sean Brydon <[email protected]> Co-authored-by: Benny Joo <[email protected]>
104 lines
2.2 KiB
Plaintext
104 lines
2.2 KiB
Plaintext
---
|
|
title: Avatar
|
|
airtableId: reciflFrJo5cVgGrS
|
|
---
|
|
import { Avatar } from "@calcom/ui/components/avatar"
|
|
import { RenderComponentWithSnippet } from "@/app/components/render"
|
|
import { Row } from "@/app/components/row"
|
|
import { SizesExample } from "./avatar.sizes"
|
|
import { ImageExample } from "./avatar.image"
|
|
import { TooltipExample } from "./avatar.tooltip"
|
|
import { LinkExample } from "./avatar.link"
|
|
import { IndicatorExample } from "./avatar.indicator"
|
|
import { ShapeExample } from "./avatar.shape"
|
|
|
|
## Size Variations
|
|
|
|
Avatars come in different sizes to suit various use cases.
|
|
|
|
<SizesExample/>
|
|
|
|
## Shape Variations
|
|
|
|
Avatars can be displayed in either circular or square shapes.
|
|
|
|
<ShapeExample/>
|
|
|
|
## With and Without Image
|
|
|
|
Avatars can display either an image or a fallback placeholder.
|
|
|
|
<ImageExample/>
|
|
|
|
## With Tooltip
|
|
|
|
Avatars can show additional information on hover using tooltips.
|
|
|
|
<TooltipExample/>
|
|
|
|
## With Link
|
|
|
|
Avatars can be made clickable by providing an href.
|
|
|
|
<LinkExample/>
|
|
|
|
## With Indicator
|
|
|
|
Avatars can include status indicators or badges.
|
|
|
|
<IndicatorExample/>
|
|
|
|
## Usage Example
|
|
|
|
Here's a complete example showing how to use the Avatar component with all its props:
|
|
|
|
```tsx
|
|
import { Avatar } from "@calcom/ui/components/avatar";
|
|
|
|
function Example() {
|
|
return (
|
|
<div className="flex flex-col gap-4">
|
|
{/* Basic Avatar */}
|
|
<Avatar
|
|
alt="User Name"
|
|
title="User Name"
|
|
size="md"
|
|
shape="circle"
|
|
imageSrc="https://example.com/avatar.jpg"
|
|
/>
|
|
|
|
{/* Avatar with Link */}
|
|
<Avatar
|
|
alt="User Name"
|
|
title="User Name"
|
|
size="lg"
|
|
shape="square"
|
|
imageSrc="https://example.com/avatar.jpg"
|
|
href="/profile"
|
|
/>
|
|
|
|
{/* Avatar with Tooltip and Indicator */}
|
|
<Avatar
|
|
alt="User Name"
|
|
title="User Name"
|
|
size="md"
|
|
shape="circle"
|
|
imageSrc="https://example.com/avatar.jpg"
|
|
indicator={<div className="absolute bottom-0 right-0 h-3 w-3 rounded-full bg-green-500" />}
|
|
/>
|
|
|
|
{/* Avatar with Fallback */}
|
|
<Avatar
|
|
alt="User Name"
|
|
title="User Name"
|
|
size="md"
|
|
shape="circle"
|
|
fallback={<span>UN</span>}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
```
|
|
|
|
|