| 1 | "use client"; |
| 2 | |
| 3 | import * as React from "react"; |
| 4 | import { cn } from "cn"; |
| 5 | import { Avatar as AvatarPrimitive } from "radix-ui"; |
| 6 | |
| 7 | function Avatar({ |
| 8 | className, |
| 9 | size = "default", |
| 10 | ...props |
| 11 | }: React.ComponentProps<typeof AvatarPrimitive.Root> & { |
| 12 | size?: "default" | "sm" | "lg"; |
| 13 | }) { |
| 14 | return ( |
| 15 | <AvatarPrimitive.Root |
| 16 | data-slot="avatar" |
| 17 | data-size={size} |
| 18 | className={cn( |
| 19 | "group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-[inherit] after:border-none after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten", |
| 20 | className, |
| 21 | )} |
| 22 | {...props} |
| 23 | /> |
| 24 | ); |
| 25 | } |
| 26 | |
| 27 | function AvatarImage({ |
| 28 | className, |
| 29 | ...props |
| 30 | }: React.ComponentProps<typeof AvatarPrimitive.Image>) { |
| 31 | return ( |
| 32 | <AvatarPrimitive.Image |
| 33 | data-slot="avatar-image" |
| 34 | className={cn( |
| 35 | "aspect-square size-full rounded-[inherit] object-cover", |
| 36 | className, |
| 37 | )} |
| 38 | {...props} |
| 39 | /> |
| 40 | ); |
| 41 | } |
| 42 | |
| 43 | function AvatarFallback({ |
| 44 | className, |
| 45 | ...props |
| 46 | }: React.ComponentProps<typeof AvatarPrimitive.Fallback>) { |
| 47 | return ( |
| 48 | <AvatarPrimitive.Fallback |
| 49 | data-slot="avatar-fallback" |
| 50 | className={cn( |
| 51 | "flex size-full items-center justify-center rounded-[inherit] bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs", |
| 52 | className, |
| 53 | )} |
| 54 | {...props} |
| 55 | /> |
| 56 | ); |
| 57 | } |
| 58 | |
| 59 | function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) { |
| 60 | return ( |
| 61 | <span |
| 62 | data-slot="avatar-badge" |
| 63 | className={cn( |
| 64 | "absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none", |
| 65 | "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden", |
| 66 | "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2", |
| 67 | "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2", |
| 68 | className, |
| 69 | )} |
| 70 | {...props} |
| 71 | /> |
| 72 | ); |
| 73 | } |
| 74 | |
| 75 | function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) { |
| 76 | return ( |
| 77 | <div |
| 78 | data-slot="avatar-group" |
| 79 | className={cn( |
| 80 | "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background", |
| 81 | className, |
| 82 | )} |
| 83 | {...props} |
| 84 | /> |
| 85 | ); |
| 86 | } |
| 87 | |
| 88 | function AvatarGroupCount({ |
| 89 | className, |
| 90 | ...props |
| 91 | }: React.ComponentProps<"div">) { |
| 92 | return ( |
| 93 | <div |
| 94 | data-slot="avatar-group-count" |
| 95 | className={cn( |
| 96 | "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3", |
| 97 | className, |
| 98 | )} |
| 99 | {...props} |
| 100 | /> |
| 101 | ); |
| 102 | } |
| 103 | |
| 104 | export { |
| 105 | Avatar, |
| 106 | AvatarImage, |
| 107 | AvatarFallback, |
| 108 | AvatarGroup, |
| 109 | AvatarGroupCount, |
| 110 | AvatarBadge, |
| 111 | }; |