added links in docs

Author: ariflogs

app/(docs)/docs/[[...slug]]/page.tsx

@@ -5,6 +5,7 @@ import { format } from "date-fns";
 import MDX from "@/components/MDX";
 import { Text } from "@/packages/ui";
 import { Metadata } from "next";
+import { MoveRightIcon, MoveUpRightIcon } from "lucide-react";
 
 interface IProps {
   params: { slug: string[] };
@@ -45,9 +46,31 @@ export default function page({ params }: IProps) {
 
   return (
     <div className="space-y-12 py-8">
-      <div className="border-b border-black pb-4">
+      <div className="border-b border-black pb-6">
         <Text as="h2">{doc.title}</Text>
         <p className="text-lg text-muted">{doc.description}</p>
+        {doc.links && (
+          <div className="flex space-x-4 text-sm mt-4">
+            {doc.links?.api_reference && (
+              <a
+                className="flex items-center bg-gray-200 px-1.5 py-.5"
+                href={doc.links.api_reference}
+                target="_blank"
+              >
+                API Reference <MoveUpRightIcon className="h-3 w-3 ml-1" />
+              </a>
+            )}
+            {doc.links && doc.links?.source && (
+              <a
+                className="flex items-center bg-gray-200 px-1.5 py-.5"
+                href={doc.links.source}
+                target="_blank"
+              >
+                Source <MoveUpRightIcon className="h-3 w-3 ml-1" />
+              </a>
+            )}
+          </div>
+        )}
       </div>
       <div>
         <MDX code={doc.body.code} />

content/docs/components/accordion.mdx

@@ -2,6 +2,9 @@
 title: Accordion
 description: This collapsible component let's your users read only the content they care about. 😌
 lastUpdated: 19 Oct, 2024
+links:
+  api_reference: https://www.radix-ui.com/primitives/docs/components/accordion#api-reference
+  source: https://github.com/Logging-Stuff/RetroUI/blob/main/packages/ui/Accordions/Accordion.tsx
 ---
 
 <ComponentShowcase name="accordion-style-default" />

content/docs/components/button.mdx

@@ -1,7 +1,9 @@
 ---
 title: Button
 description: This bold button makes sure your users click on it and perform the actions you want! 🚀
-lastUpdated: 13 Oct, 2024
+lastUpdated: 04 Nov, 2024
+links:
+  source: https://github.com/Logging-Stuff/RetroUI/blob/main/packages/ui/Buttons/Button.tsx
 ---
 
 <ComponentShowcase name="button-style-default" />

content/docs/components/dialog.mdx

@@ -1,7 +1,10 @@
 ---
 title: Dialog
 description: An impactful dialog that ensures your important messages and actions get the attention they deserve! 💬✨
-lastUpdated: 26 Oct, 2024
+lastUpdated: 04 Nov, 2024
+links:
+  api_reference: https://www.radix-ui.com/primitives/docs/components/dialog#api-reference
+  source: https://github.com/Logging-Stuff/RetroUI/blob/main/packages/ui/Dialog/Dialog.tsx
 ---
 
 <ComponentShowcase name="dialog-style-default" />

contentlayer.config.ts

@@ -1,13 +1,27 @@
 import path from "path";
 import fs from "fs";
-import { defineDocumentType, makeSource } from "contentlayer/source-files";
+import {
+  defineDocumentType,
+  defineNestedType,
+  makeSource,
+} from "contentlayer/source-files";
 import { visit } from "unist-util-visit";
 import rehypePrettyCode from "rehype-pretty-code";
 import rehypeSlug from "rehype-slug";
 import { u } from "unist-builder";
 import { UnistNode } from "./types/unist";
 import { componentConfig } from "./config";
 
+const Links = defineNestedType(() => {
+  return {
+    name: "Links",
+    fields: {
+      source: { type: "string", required: false },
+      api_reference: { type: "string", required: false },
+    },
+  };
+});
+
 export const Doc = defineDocumentType(() => ({
   name: "Doc",
   filePathPattern: `docs/**/*.mdx`,
@@ -16,6 +30,11 @@ export const Doc = defineDocumentType(() => ({
     title: { type: "string", required: true },
     description: { type: "string", required: true },
     lastUpdated: { type: "date", required: true },
+    links: {
+      type: "nested",
+      of: Links,
+      required: false,
+    },
   },
   computedFields: {
     url: {

packages/ui/Badges/Badge.tsx

@@ -5,7 +5,7 @@ import React, { HTMLAttributes } from "react";
 const badgeVariants = cva("font-semibold ", {
   variants: {
     variant: {
-      default: "bg-gray-300 text-gray-700",
+      default: "bg-gray-200 text-gray-700",
       outline: "outline outline-2 outline-black text-black",
       solid: "bg-black text-white",
       surface: "outline outline-2 bg-primary-300 text-black",