📃 Badge, avatar & accordion docs

Author: ariflogs

config/components.ts

@@ -39,9 +39,9 @@ export const componentConfig = {
     </details>
 </div>`,
     },
-    "avatar-style-round": {
-      name: "avatar-style-round",
-      preview: lazy(() => import("@/preview/components/avatar-style-round")),
+    "avatar-style-circle": {
+      name: "avatar-style-circle",
+      preview: lazy(() => import("@/preview/components/avatar-style-circle")),
       codeHtml: `<div className="inline-block w-14 h-14 border-2 border-black rounded-full overflow-hidden">
     <img
         className="w-full h-full"

content/docs/components/avatar.mdx

@@ -0,0 +1,9 @@
+---
+title: Default Avatar
+description: Default rounded avatar that can show your users profile picture. ✨
+lastUpdated: 30 Sep, 2024
+---
+
+import {ComponentShowcase} from "@/components"
+
+<ComponentShowcase name="avatar-style-circle" />

content/docs/components/badge.mdx

@@ -0,0 +1,9 @@
+---
+title: Default Badge
+description: The component that looks like a button that's not clickable!
+lastUpdated: 30 Sep, 2024
+---
+
+import {ComponentShowcase} from "@/components"
+
+<ComponentShowcase name="badge-style-default" />

preview/components/avatar-style-round.tsx renamed to preview/components/avatar-style-circle.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-export default function AvatarStyleRounded() {
+export default function AvatarStyleCircle() {
   return (
     <div className="inline-block w-14 h-14 border-2 border-black rounded-full overflow-hidden">
       <img