AvatarGroup Docs (#716)

docs/app/docs/components/avatar-group/docs/avatarGroup_anatomy.tsx

@@ -0,0 +1,12 @@
+import AvatarGroup from "@radui/ui/AvatarGroup";
+
+export default ()=>{
+    return (
+        <AvatarGroup.Root> 
+            <AvatarGroup.AvatarRoot>
+                <AvatarGroup.AvatarImage />
+                <AvatarGroup.AvatarFallback />
+            </AvatarGroup.AvatarRoot>
+        </AvatarGroup.Root>
+    )
+}

docs/app/docs/components/avatar-group/docs/codeUsage.js

@@ -0,0 +1,27 @@
+import { getSourceCodeFromPath } from '@/utils/parseSourceCode';
+const COMPONENT_FOLDER = 'avatar-group';
+const example_1_SourceCode = await getSourceCodeFromPath(`docs/app/docs/components/${COMPONENT_FOLDER}/docs/example_1.tsx`);
+// console.log(example_1_SourceCode);
+
+
+const scss_SourceCode = await getSourceCodeFromPath(`styles/themes/components/${COMPONENT_FOLDER}.scss`);
+const anatomy_SourceCode = await getSourceCodeFromPath(`docs/app/docs/components/${COMPONENT_FOLDER}/docs/avatarGroup_anatomy.tsx`);
+
+export const code = {
+    javascript: {
+        code: example_1_SourceCode
+    },
+    scss: {
+        code: scss_SourceCode
+    }
+};
+
+export const anatomy = {
+    code: anatomy_SourceCode
+}
+
+
+
+
+
+export default code;

docs/app/docs/components/avatar-group/docs/example_1.tsx

@@ -0,0 +1,15 @@
+import AvatarGroup from "@radui/ui/AvatarGroup";
+
+let avatars = [
+  { src: 'https://i.pravatar.cc/64', fallback: 'RU', alt: 'Avatar 1' },
+  { src: 'https://i.pravatar.cc/65', fallback: 'PK', alt: 'Avatar 2' },
+  { src: 'https://i.pravatar.cc/66', fallback: 'RS', alt: 'Avatar 3' },
+]     
+
+const AvatarGroupExample = () => ( 
+  <div>
+    <AvatarGroup avatars={avatars} />
+  </div>
+)
+
+export default AvatarGroupExample;

docs/app/docs/components/avatar-group/page.js

@@ -0,0 +1,42 @@
+const PAGE_NAME = 'AVATAR_GROUP_DOCS'
+import Documentation from "@/components/layout/Documentation/Documentation"
+import SEO from "../../docsIndex"
+export const metadata = SEO.getMetadata(PAGE_NAME)
+import {code, anatomy} from "./docs/codeUsage"
+import AvatarGroupExample from "./docs/example_1"
+
+const AvatarGroupDocs = () => {
+    const columns = [
+        {name: 'Prop', key: 'prop'},
+        {name: 'Type', key: 'type'},
+        {name: 'Default', key: 'default'},
+        {name: 'Values', key: 'values'},
+        {name: 'Description', key: 'description'},
+
+    ];
+
+    const data = [
+        {prop: 'size', type: 'string', default: 'md',values: 'sm | md | lg', description: 'Used to set desired size'},
+
+    ];
+    return <div>
+        <Documentation currentPage={PAGE_NAME} title={`AvatarGroup`}
+            description='AvatarGroup are used to toggle the visibility of content. They are used in the sidebar, and in the chat.'
+        >
+            {/* Component Hero */}
+            <Documentation.ComponentHero codeUsage={code}>
+                   <AvatarGroupExample/>
+            </Documentation.ComponentHero>
+            {/* Component Anatomy */}
+            <Documentation.Anatomy code={anatomy.code}/>
+
+            {/* <div className="max-w-screen-md mt-16">
+                <Documentation.Table columns={columns} data={data} />
+            </div> */}
+
+
+        </Documentation>
+    </div>
+}
+
+export default AvatarGroupDocs;

docs/components/navigation/Navigation.js

@@ -43,9 +43,15 @@ const sections = [
                 title: "Avatar",
                 path: "/docs/components/avatar"
             },
+            {
+                title: "AvatarGroup",
+                path: "/docs/components/avatar-group",
+                is_new:true
+            },
             {
                 title: "AspectRatio",
-                path: "/docs/components/aspect-ratio"
+                path: "/docs/components/aspect-ratio",
+                is_new:true
             },
             {
                 title: "Badge",
@@ -107,7 +113,8 @@ const sections = [
             },
             {
                 title: "Strong",
-                path: "/docs/components/strong"
+                path: "/docs/components/strong",
+                is_new:true
             },
             // {
             //     title:"Checkbox",
@@ -165,7 +172,8 @@ const sections = [
             },
             {
                 title: "VisuallyHidden",
-                path: "/docs/components/visually-hidden"
+                path: "/docs/components/visually-hidden",
+                is_new:true
             }
         ]
     },