add documentation to avatar component

tnamdevnote · Jun 12, 2024 · b098903 · b098903
1 parent 0b8a973
commit b098903
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/components/atoms/avatar/avatar.stories.tsx b/components/atoms/avatar/avatar.stories.tsx
@@ -1,6 +1,9 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { Avatar, AvatarImage, AvatarFallback } from "./avatar";
 
+/**
+ * Avatar component is used to represent a user, and display the profile picture, initials or fallback icon.
+ */
 const meta: Meta<typeof Avatar> = {
   title: "Atoms/Avatar",
   component: Avatar,

diff --git a/components/atoms/avatar/avatar.tsx b/components/atoms/avatar/avatar.tsx
@@ -6,7 +6,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 
 import { cn } from "@/lib/utils";
 
-const avatarVariatnts = cva(
+const avatarVariants = cva(
   "relative flex shrink-0 overflow-hidden rounded-full",
   {
     variants: {
@@ -24,15 +24,15 @@ const avatarVariatnts = cva(
 
 export interface AvatarProps
   extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,
-    VariantProps<typeof avatarVariatnts> {}
+    VariantProps<typeof avatarVariants> {}
 
 const Avatar = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Root>,
   AvatarProps
 >(({ className, size, ...props }, ref) => (
   <AvatarPrimitive.Root
     ref={ref}
-    className={cn(avatarVariatnts({ size }), className)}
+    className={cn(avatarVariants({ size }), className)}
     {...props}
   />
 ));