feat: support Badge component

.changeset/clean-tigers-work.md

@@ -0,0 +1,6 @@
+---
+"@rspress/theme-default": patch
+"@rspress/docs": patch
+---
+
+feat: support Badge component

packages/document/docs/en/fragments/internal-components.mdx

@@ -184,7 +184,13 @@ The PrevNextPage component is used to display the previous and next pages of the
 import { PrevNextPage } from '@theme';
 
 function App() {
-  return <PrevNextPage type="prev" text="Previous Page" href="https://rspress.dev/" />;
+  return (
+    <PrevNextPage
+      type="prev"
+      text="Previous Page"
+      href="https://rspress.dev/"
+    />
+  );
 }
 ```
 
@@ -228,11 +234,10 @@ interface SourceCodeProps {
   // Used to set the link to the source code
   href: string;
   // Used to set source platform
-  platform?: 'github' | 'gitlab'
+  platform?: 'github' | 'gitlab';
 }
 ```
 
-
 ## Steps
 
 The Steps component is used to turn your content into a visual representation of steps.
@@ -262,9 +267,41 @@ import { Steps } from '@theme';
 <Steps>
   ### Step 1
 
-  Body for Step 1.
+Body for Step 1.
 
-  ### Step 2
+### Step 2
+
+> Body for Step 2.
 
-  > Body for Step 2.
 </Steps>
+
+## Badge
+
+The Badge component is used to display a badge. For example:
+
+```tsx title="index.mdx"
+import { Badge } from '@theme';
+
+function App() {
+  return <Badge text="info" type="info" />;
+}
+```
+
+The effect is as follows:
+
+import { Badge } from '@theme';
+
+<Badge text="info" type="info" />
+<Badge text="warning" type="warning" />
+<Badge text="danger" type="danger" />
+
+The types of props included are as follows:
+
+```ts
+interface BadgeProps {
+  // Used to set the text of the badge
+  text: string;
+  // Used to set the type of the badge
+  type?: 'info' | 'warning' | 'danger';
+}
+```

packages/document/docs/zh/fragments/internal-components.mdx

@@ -228,11 +228,10 @@ interface SourceCodeProps {
   // 用于设置源代码的链接
   href: string;
   // 用于设置源平台
-  platform?: 'github' | 'gitlab'
+  platform?: 'github' | 'gitlab';
 }
 ```
 
-
 ## Steps
 
 Steps 组件用于将编号列表转换为步骤的可视化表示形式。使用方法如下：
@@ -262,9 +261,41 @@ import { Steps } from '@theme';
 <Steps>
   ### 第 1 步
 
-  步骤 1 的正文
+步骤 1 的正文
+
+### 第 2 步
 
-  ### 第 2 步
+> 步骤 2 的正文
 
-  > 步骤 2 的正文
 </Steps>
+
+## Badge
+
+Badge 组件用于展示状态的标记。使用方法如下：
+
+```tsx title="index.mdx"
+import { Badge } from '@theme';
+
+function App() {
+  return <Badge text="info" type="info" />;
+}
+```
+
+效果如下：
+
+import { Badge } from '@theme';
+
+<Badge text="info" type="info" />
+<Badge text="warning" type="warning" />
+<Badge text="danger" type="danger" />
+
+其中包含的 props 类型如下：
+
+```ts
+interface BadgeProps {
+  // 用于设置 badge 的文本
+  text: string;
+  // 用于设置 badge 的类型
+  type: 'info' | 'warning' | 'danger';
+}
+```

packages/theme-default/src/components/Badge/index.module.scss

@@ -0,0 +1,18 @@
+.badge {
+  padding: 0 10px;
+  line-height: 22px;
+  font-size: 12px;
+
+  &.info {
+    color: #2e3440;
+    background-color: rgba(46, 52, 64, 0.16);
+  }
+  &.warning {
+    color: #ad850e;
+    background-color: rgba(255, 197, 23, 0.16);
+  }
+  &.danger {
+    color: #ab2131;
+    background-color: rgba(237, 60, 80, 0.16);
+  }
+}

packages/theme-default/src/components/Badge/index.tsx

@@ -0,0 +1,17 @@
+import styles from './index.module.scss';
+
+interface BadgeProps {
+  text: string;
+  type: 'info' | 'warning' | 'danger';
+}
+
+export function Badge(props: BadgeProps) {
+  const { text, type = 'info' } = props;
+  return (
+    <span
+      className={`inline-block rounded-full border border-solid border-transparent font-medium ${styles.badge} ${styles[type]}`}
+    >
+      {text}
+    </span>
+  );
+}

packages/theme-default/src/index.ts

@@ -10,6 +10,7 @@ export { Nav } from './components/Nav';
 export { Search, SearchPanel } from './components/Search';
 export { Tab, Tabs } from './components/Tabs';
 export { Button } from './components/Button';
+export { Badge } from './components/Badge';
 export { Link } from './components/Link';
 export { HomeFooter } from './components/HomeFooter';
 export { Toc } from './components/Toc';