feat: ✨ add link docs and add grid/radio/link slot content.

Author: Lemonadeccc

apps/site/app/(main)/@catalog/grid/page.tsx

@@ -0,0 +1,7 @@
+import { Catalog } from '@/app/_components/catalog'
+
+import { catalogList } from '../../grid/markdown'
+
+export default function Page() {
+  return <Catalog items={catalogList} />
+}

apps/site/app/(main)/@catalog/link/page.tsx

@@ -0,0 +1,8 @@
+import { Catalog } from '@/app/_components/catalog'
+
+import { catalogList } from '../../link/markdown'
+
+export default function Page() {
+  return <Catalog items={catalogList} />
+}
+

apps/site/app/(main)/@catalog/radio/page.tsx

@@ -0,0 +1,8 @@
+import { Catalog } from '@/app/_components/catalog'
+
+import { catalogList } from '../../radio/markdown/read'
+
+export default function Page() {
+  return <Catalog items={catalogList} />
+}
+

apps/site/app/(main)/grid/markdown/catalog.ts

@@ -1,39 +1,39 @@
-// Auto-generated catalog from traditional-example.mdx
+// Auto-generated catalog from app/(main)/grid/markdown/grid-markdown.mdx
 export const catalogList = [
   {
-    level: 3,
-    text: '基本用法',
+    "level": 3,
+    "text": "基本用法"
   },
   {
-    level: 3,
-    text: '子元素从上到下排列',
+    "level": 3,
+    "text": "子元素从上到下排列"
   },
   {
-    level: 3,
-    text: '位置偏移',
+    "level": 3,
+    "text": "位置偏移"
   },
   {
-    level: 3,
-    text: '圣杯布局',
+    "level": 3,
+    "text": "圣杯布局"
   },
   {
-    level: 3,
-    text: 'Areas 关键字',
+    "level": 3,
+    "text": "Areas 关键字"
   },
   {
-    level: 3,
-    text: '水平对齐',
+    "level": 3,
+    "text": "水平对齐"
   },
   {
-    level: 3,
-    text: '垂直对齐',
+    "level": 3,
+    "text": "垂直对齐"
   },
   {
-    level: 3,
-    text: '响应式流动布局',
+    "level": 3,
+    "text": "响应式流动布局"
   },
   {
-    level: 3,
-    text: '响应式断点布局',
-  },
+    "level": 3,
+    "text": "响应式断点布局"
+  }
 ];

apps/site/app/(main)/grid/markdown/index.ts

@@ -1 +1,2 @@
+export * from "./catalog";
 export * from "./grid-markdown";

apps/site/app/(main)/link/markdown/catalog.ts

@@ -0,0 +1,23 @@
+// Auto-generated catalog from app/(main)/link/markdown/link-markdown.mdx
+export const catalogList = [
+  {
+    "level": 3,
+    "text": "基本用法"
+  },
+  {
+    "level": 3,
+    "text": "新标签页打开"
+  },
+  {
+    "level": 3,
+    "text": "带图标的链接"
+  },
+  {
+    "level": 3,
+    "text": "块级 / 卡片链接"
+  },
+  {
+    "level": 3,
+    "text": "Ref 使用"
+  }
+];

apps/site/app/(main)/link/markdown/index.ts

@@ -0,0 +1,2 @@
+export * from "./catalog";
+export * from "./link-markdown";

apps/site/app/(main)/link/markdown/link-markdown.mdx

@@ -0,0 +1,101 @@
+import {
+  ImageTypography,
+  AvatarM,
+  CodeBlock,
+  H1,
+  Divide,
+  H3Sub,
+  Code,
+} from "@/app/_components/typography";
+import {
+  BasicExample,
+  CardLinkExample,
+  DisabledExample,
+  IconLinkExample,
+  NewTabExample,
+  RefExample,
+} from "./read";
+
+<H1 subheading="超链接组件，基于 HTML <a> 封装并提供 disabled 等能力">Link</H1>
+
+{/* ### 基本用法 */}
+
+<H3Sub
+  sub={
+    <>
+      最简单的用法，直接传入 <Code>href</Code> 与样式即可。
+    </>
+  }
+>
+  {"基本用法"}
+</H3Sub>
+<BasicExample />
+
+<H3Sub
+  sub={
+    <>
+      通过 <Code>disabled</Code> 可以阻止默认跳转，同时不会触发{" "}
+      <Code>onClick</Code>
+      回调。
+    </>
+  }
+>
+  {"禁用状态"}
+</H3Sub>
+<DisabledExample />
+
+{/* ### 新标签页打开 */}
+
+<H3Sub
+  sub={
+    <>
+      通过设置 <Code>target</Code> 与 <Code>rel</Code>
+      ，可以在新标签页打开外部链接。
+    </>
+  }
+>
+  {"新标签页打开"}
+</H3Sub>
+<NewTabExample />
+
+{/* ### 带图标的链接 */}
+
+<H3Sub
+  sub={
+    <>
+      通过 <Code>inline-flex</Code> / <Code>gap</Code>{" "}
+      等样式把图标与文本放在一起。
+    </>
+  }
+>
+  {"带图标的链接"}
+</H3Sub>
+<IconLinkExample />
+
+{/* ### 块级 / 卡片链接 */}
+
+<H3Sub
+  sub={
+    <>
+      让 <Code>Link</Code> 作为块级元素（<Code>block</Code>），配合边框/hover
+      样式即可实现“整块可点”的卡片链接。
+    </>
+  }
+>
+  {"块级 / 卡片链接"}
+</H3Sub>
+<CardLinkExample />
+
+{/* ### Ref 使用 */}
+
+<H3Sub
+  sub={
+    <>
+      <Code>Link</Code> 支持 <Code>ref</Code>（<Code>forwardRef</Code>
+      ），便于聚焦等操作。
+    </>
+  }
+>
+  {"Ref 使用"}
+</H3Sub>
+<RefExample />

apps/site/app/(main)/link/markdown/link-markdown.tsx

@@ -0,0 +1,9 @@
+'use client';
+import React from 'react';
+
+import LinkMarkdownMDX from './link-markdown.mdx';
+
+export function LinkMarkdown() {
+  return <LinkMarkdownMDX />;
+}
+

apps/site/app/(main)/link/markdown/read/basic.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { CodePreview } from '@/app/_components/code-preview';
+
+const code = `
+function App() {
+  return (
+    <div className="space-x-4">
+      <Link href="https://ui.condevtools.com/" className="text-blue-400 hover:text-blue-300 underline">
+        condev ui
+      </Link>
+    </div>
+  );
+}
+`;
+
+export function BasicExample() {
+  return <CodePreview code={code} />;
+}
+