init project

docs/data/joy/getting-started/templates/messages/components/AvatarWithStatus.tsx

@@ -0,0 +1,23 @@
+import Badge from '@mui/joy/Badge';
+import Avatar, { AvatarProps } from '@mui/joy/Avatar';
+
+type AvatarWithStatusProps = AvatarProps & {
+  online?: boolean;
+};
+
+export default function AvatarWithStatus(props: AvatarWithStatusProps) {
+  const { online = false, ...other } = props;
+  return (
+    <div>
+      <Badge
+        color={online ? 'success' : 'neutral'}
+        variant={online ? 'solid' : 'soft'}
+        size="sm"
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+        badgeInset="4px 4px"
+      >
+        <Avatar size="sm" {...other} />
+      </Badge>
+    </div>
+  );
+}