From b0989039a8a6cf0421a04491b2c61f9c0fa58353 Mon Sep 17 00:00:00 2001
From: Taek Been Nam <taekbeen93@gmail.com>
Date: Wed, 12 Jun 2024 13:44:27 -0400
Subject: [PATCH] add documentation to avatar component

---
 components/atoms/avatar/avatar.stories.tsx | 3 +++
 components/atoms/avatar/avatar.tsx         | 6 +++---
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/components/atoms/avatar/avatar.stories.tsx b/components/atoms/avatar/avatar.stories.tsx
index 7fe256f..dfaa146 100644
--- 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
index 469947f..c227c02 100644
--- 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,7 +24,7 @@ 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>,
@@ -32,7 +32,7 @@ const Avatar = React.forwardRef<
 >(({ className, size, ...props }, ref) => (
   <AvatarPrimitive.Root
     ref={ref}
-    className={cn(avatarVariatnts({ size }), className)}
+    className={cn(avatarVariants({ size }), className)}
     {...props}
   />
 ));