docs: add beta flag in nav and page header

packages/docs/src/components/docs/BetaImage.tsx

@@ -0,0 +1,15 @@
+import Image from 'next/image';
+
+const BetaImage = () => {
+  return (
+    <Image
+      src="https://img.shields.io/badge/-Beta%20Feature-blue"
+      alt="Beta Feature. Use at your own risk"
+      title="Beta Feature. Use at your own risk"
+      width={81}
+      height={20}
+    />
+  );
+};
+
+export default BetaImage;

packages/docs/src/components/docs/DocsLeftNavGroup.tsx

@@ -3,13 +3,21 @@ import Collapse from '@mui/material/Collapse';
 import List from '@mui/material/List';
 import ListItemButton from '@mui/material/ListItemButton';
 import ListItemText from '@mui/material/ListItemText';
-import { useTheme } from '@mui/material/styles';
+import { styled, useTheme } from '@mui/material/styles';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useState } from 'react';
 
+import BetaImage from './BetaImage';
+
 import type { DocsGroupLink } from '../../interface';
 
+const StyledListItemPrimary = styled('div')`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+
 export interface DocsLeftNavGroupProps {
   name: string;
   links: DocsGroupLink[];
@@ -54,7 +62,12 @@ const DocsLeftNavGroup = ({ name, links }: DocsLeftNavGroupProps) => {
                     color: selected ? theme.palette.primary.main : theme.palette.text.secondary,
                     fontWeight: selected ? 600 : 400,
                   }}
-                  primary={link.title}
+                  primary={
+                    <StyledListItemPrimary>
+                      {link.title}
+                      {link.beta ? <BetaImage /> : null}
+                    </StyledListItemPrimary>
+                  }
                 />
               </ListItemButton>
             );

packages/docs/src/components/docs/components/headers/Header1.tsx

@@ -14,7 +14,7 @@ const Header1 = ({ children }: Header1Props) => {
   const anchor = useAnchor(textContent);
 
   return (
-    <Typography variant="h1" id={anchor}>
+    <Typography variant="h1" id={anchor} sx={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
       {children}
     </Typography>
   );