Merge pull request #11 from cloudmix-dev/feat/avatar-skeleton

Avatar.Skeleton component
cloudmix-dev · Dec 30, 2023 · cc0cefb · cc0cefb
2 parents 9c59fd4 + 194723f
commit cc0cefb
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 0 deletions.
diff --git a/.changeset/popular-pianos-kneel.md b/.changeset/popular-pianos-kneel.md
@@ -0,0 +1,5 @@
+---
+"@cloudmix-dev/react": patch
+---
+
+Add Skeleton for Avatar component
diff --git a/packages/react/src/components/avatar.tsx b/packages/react/src/components/avatar.tsx
@@ -74,4 +74,21 @@ Avatar.Group = function AvatarGroup({ children, className }: AvatarGroupProps) {
 // @ts-expect-error
 Avatar.Group.displayName = "Avatar.Group";
 
+export interface AvatarSkeletonProps
+  extends VariantProps<typeof avatarVariants> {
+  className?: string;
+}
+
+Avatar.Skeleton = function AvatarSkeleton({
+  className,
+  size,
+}: AvatarSkeletonProps) {
+  return (
+    <div className={cn("animate-pulse", avatarVariants({ size, className }))} />
+  );
+};
+
+// @ts-expect-error
+Avatar.Skeleton.displayName = "Avatar.Skeleton";
+
 export { Avatar };
diff --git a/www/storybook/src/stories/avatar.stories.tsx b/www/storybook/src/stories/avatar.stories.tsx
@@ -86,3 +86,12 @@ export const Group: AvatarGroupStory = {
     </Avatar.Group>
   ),
 };
+
+type SkeletonStory = StoryObj<typeof Avatar.Skeleton>;
+
+export const Skeleton: SkeletonStory = {
+  render: (props) => <Avatar.Skeleton {...props} />,
+  args: {
+    size: "default",
+  },
+};