feat(nextjs): add component avatar (#27)

close #20

README.md

@@ -52,7 +52,7 @@ _Layout_
 _Display_
 
 - [ ] Card
-- [ ] Avatar
+- [x] Avatar
 - [ ] Accordion
 - [x] Alert
 - [x] Alert Dialog

lib/react/package.json

@@ -23,6 +23,7 @@
     "@desing-system/theme": "workspace:*",
     "@radix-ui/react-alert-dialog": "1.0.5",
     "@radix-ui/react-aspect-ratio": "1.0.3",
+    "@radix-ui/react-avatar": "1.0.4",
     "@radix-ui/react-slot": "1.0.2",
     "class-variance-authority": "0.7.0",
     "clsx": "2.1.0",

lib/react/src/components/avatar.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react'
+import * as AvatarPrimitive from '@radix-ui/react-avatar'
+
+import { cn } from '../lib/cn'
+
+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 size-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',
+      className,
+    )}
+    {...props}
+  />
+))
+
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }

lib/react/src/index.ts

@@ -9,3 +9,4 @@ export * from './components/carousel'
 export * from './components/alert-dialog'
 export * from './components/badge'
 export * from './components/aspect-ratio'
+export * from './components/avatar'

test/with-nextjs/app/page.tsx

@@ -1,5 +1,5 @@
 import Image from 'next/image'
-import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, Badge, Button } from '@design-system/react'
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarFallback, AvatarImage, Badge, Button } from '@design-system/react'
 
 export default function Home() {
   return (
@@ -21,6 +21,12 @@ export default function Home() {
         <Badge variant="success">
           Examples UI
         </Badge>
+        <Avatar>
+          <AvatarImage src="https://raw.githubusercontent.com/castrogarciajs/castrogarciajs/master/public/sebastian.jpg" />
+          <AvatarFallback>
+            JS
+          </AvatarFallback>
+        </Avatar>
         <AlertDialog>
           <AlertDialogTrigger>Open</AlertDialogTrigger>
           <AlertDialogContent>