fix: add Tag to Docs, align colours [MDS-727] (#2465)

* fix: add Pagination to Docs, align colours [MDS-724]

* fix: add Pagination to Docs, align colours [MDS-724]

* fix: add Table to Docs, align colours [MDS-725]

* fix: add Tabs to Docs, align colours [MDS-726]

* fix: add Tag to Docs, align colours [MDS-727]

docs/app/components/server/tag/page.tsx

@@ -1,24 +1,22 @@
-import { Default } from "@/app/components/server/tag/examples/Default";
-import { getExamples } from "@/app/utils/getExamples";
-import { MDX } from "@/components/MDX";
+import { Default } from '@/app/components/server/tag/examples/Default';
+import ExampleSection from '@/app/components/shared/ExampleSection';
+import QuickNav from '@/app/components/shared/QuickNav';
+import { getExamples } from '@/app/utils/getExamples';
+import { MDX } from '@/components/MDX';
 
-export default async function Home() {
+export default async function Tag() {
   const { server } = await getExamples();
-
+  const examplesList = Object.keys(server.tag.examples);
   return (
-    <div className="flex flex-col gap-4 text-moon-14">
-      <h1>Tag</h1>
-
+    <div className="w-full max-w-7xl flex flex-col gap-4 text-moon-14">
+      <h1 className="font-medium text-moon-32">Tag</h1>
       <MDX markdown={server.tag.description} />
-
-      <div className="space-y-2">
-        <h2>Default</h2>
-        <div className={'flex flex-wrap items-center justify-around p-4 gap-2 w-full bg-goku rounded-moon-s-sm'}>
-          <Default />
-        </div>
-        <pre className="bg-goku rounded-moon-s-sm p-4">{server.tag.examples.Default}</pre>
-      </div>
+      <QuickNav items={examplesList} />
+      <ExampleSection
+        title="Default"
+        component={<Default />}
+        code={server.tag.examples.Default}
+      />
     </div>
-  )
+  );
 }
-

workspaces/base/src/tag/Tag.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import mergeClassnames from '../mergeClassnames/mergeClassnames';
+import type TagProps from './private/types/TagProps';
 import getFontSize from './private/utils/getFontSize';
 import getIconSize from './private/utils/getIconSize';
 import getSize from './private/utils/getSize';
-import type TagProps from './private/types/TagProps';
+import mergeClassnames from '../mergeClassnames/mergeClassnames';
 
 const Tag = ({
   children,
@@ -17,7 +17,7 @@ const Tag = ({
 }: TagProps) => (
   <div
     className={mergeClassnames(
-      'flex items-center rounded-moon-i-xs gap-1 select-none text-gohan bg-bulma',
+      'flex items-center rounded-moon-i-xs gap-1 select-none text-goku bg-bulma',
       getSize({ size, iconRight, iconLeft }),
       getFontSize({ isUppercase, size }),
       color,