feat: add component avatar

apps/nt-headless-ui/components/ui/avatar/avatar.stories.tsx

@@ -0,0 +1,85 @@
+import { Meta, StoryObj } from '@storybook/react'
+import React from 'react'
+
+import { Avatar, AvatarFallback, AvatarImage } from './avatar'
+
+const URL_IMAGE =
+    'https://gratisography.com/wp-content/uploads/2024/11/gratisography-augmented-reality-800x525.jpg'
+
+const meta: Meta = {
+    title: 'Components/Avatar',
+    component: Avatar,
+    subcomponents: { AvatarImage, AvatarFallback },
+    parameters: {
+        docs: {
+            description: {
+                component:
+                    'A flexible Avatar component using Radix UI.',
+            },
+        },
+    },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Avatar>
+
+export const Default: Story = {
+    render: (args) => (
+        <Avatar {...args}>
+            <AvatarImage src={URL_IMAGE} alt="User Avatar" />
+            <AvatarFallback>
+                <div className="bg-slate-500" />
+            </AvatarFallback>
+        </Avatar>
+    ),
+    args: {
+        className: '',
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Default Avatar with an image and fallback text.',
+            },
+        },
+    },
+}
+
+export const WithFallbackOnly: Story = {
+    render: (args) => (
+        <Avatar {...args}>
+            <AvatarFallback>
+                <div className="bg-slate-500" />
+            </AvatarFallback>
+        </Avatar>
+    ),
+    args: {
+        className: '',
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Avatar displaying only fallback text.',
+            },
+        },
+    },
+}
+
+export const CustomSize: Story = {
+    render: (args) => (
+        <Avatar {...args}>
+            <AvatarImage src={URL_IMAGE} alt="User Avatar" />
+            <AvatarFallback>loading..</AvatarFallback>
+        </Avatar>
+    ),
+    args: {
+        className: 'h-16 w-16',
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Avatar with a custom size.',
+            },
+        },
+    },
+}

apps/nt-headless-ui/components/ui/avatar/avatar.tsx

@@ -0,0 +1,47 @@
+import { cn } from '@/lib/utils'
+import * as AvatarPrimitive from '@radix-ui/react-avatar'
+import * as React from 'react'
+
+const Avatar = React.forwardRef<
+    React.ElementRef<typeof AvatarPrimitive.Root>,
+    React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+    <AvatarPrimitive.Root
+        ref={ref}
+        className={cn(
+            'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full',
+            className,
+        )}
+        {...props}
+    />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+    React.ElementRef<typeof AvatarPrimitive.Image>,
+    React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+    <AvatarPrimitive.Image
+        ref={ref}
+        className={cn('aspect-square h-full w-full', className)}
+        {...props}
+    />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+    React.ElementRef<typeof AvatarPrimitive.Fallback>,
+    React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+    <AvatarPrimitive.Fallback
+        ref={ref}
+        className={cn(
+            'flex h-full w-full items-center justify-center rounded-full bg-muted border',
+            className,
+        )}
+        {...props}
+    />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }

apps/nt-headless-ui/package.json

@@ -26,6 +26,7 @@
     },
     "devDependencies": {
         "@chromatic-com/storybook": "^3",
+        "@radix-ui/react-avatar": "^1.1.2",
         "@storybook/addon-actions": "^8.4.7",
         "@storybook/addon-essentials": "^8.4.7",
         "@storybook/addon-interactions": "^8.4.7",