feat: support Card and LinkCard components (#1512)

Co-authored-by: Timeless0911 <[email protected]>

.changeset/tender-hornets-obey.md

@@ -0,0 +1,6 @@
+---
+'@rspress/theme-default': minor
+'@rspress/docs': patch
+---
+
+feat: support Card and LinkCard components

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

@@ -82,6 +82,98 @@ interface BadgeProps {
 }
 ```
 
+## Card
+
+The Card component is used to display a card. For example:
+
+```tsx title="index.mdx"
+import { Card } from '@theme';
+
+function App() {
+  return <Card title="Card Title" content="Card Content" />;
+}
+```
+
+The effect is as follows:
+
+import { Card } from '@theme';
+
+<Card title="Card Title" content="Card Content" />
+
+The types of props included are as follows:
+
+```ts
+interface CardProps {
+  /**
+   * The title of the card.
+   */
+  title: React.ReactNode;
+  /**
+   * The content to display inside the card.
+   */
+  content?: React.ReactNode;
+  /**
+   * The icon of the card.
+   */
+  icon?: React.ReactNode;
+  /**
+   * The style of the card.
+   */
+  style?: React.CSSProperties;
+}
+```
+
+## LinkCard
+
+The LinkCard component is used to display a link card. For example:
+
+```tsx title="index.mdx"
+import { LinkCard } from '@theme';
+
+function App() {
+  return (
+    <LinkCard
+      href="https://example.com"
+      title="Link Card Title"
+      description="Link Card Description"
+    />
+  );
+}
+```
+
+The effect is as follows:
+
+import { LinkCard } from '@theme';
+
+<LinkCard
+  href="https://example.com"
+  title="Link Card Title"
+  description="Link Card Description"
+/>
+
+The types of props included are as follows:
+
+```ts
+interface LinkCardProps {
+  /**
+   * The URL of the link.
+   */
+  href: string;
+  /**
+   * The title of the link.
+   */
+  title: string;
+  /**
+   * The description of the link.
+   */
+  description?: React.ReactNode;
+  /**
+   * The style of the link card.
+   */
+  style?: React.CSSProperties;
+}
+```
+
 ## Helmet
 
 It is generally used to set custom head content in documents (based on [react-helmet-async](https://www.npmjs.com/package/react-helmet-async)). The usage is as follows:

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

@@ -82,6 +82,98 @@ interface BadgeProps {
 }
 ```
 
+## Card
+
+Card 组件用于展示卡片。使用方法如下：
+
+```tsx title="index.mdx"
+import { Card } from '@theme';
+
+function App() {
+  return <Card title="Card Title" content="Card Content" />;
+}
+```
+
+效果如下：
+
+import { Card } from '@theme';
+
+<Card title="Card Title" content="Card Content" />
+
+其中包含的 props 类型如下：
+
+```ts
+interface CardProps {
+  /**
+   * 卡片标题。
+   */
+  title: React.ReactNode;
+  /**
+   * 卡片内容。
+   */
+  content?: React.ReactNode;
+  /**
+   * 卡片图标。
+   */
+  icon?: React.ReactNode;
+  /**
+   * 卡片样式。
+   */
+  style?: React.CSSProperties;
+}
+```
+
+## LinkCard
+
+LinkCard 组件用于展示链接卡片。使用方法如下：
+
+```tsx title="index.mdx"
+import { LinkCard } from '@theme';
+
+function App() {
+  return (
+    <LinkCard
+      href="https://example.com"
+      title="Link Card Title"
+      description="Link Card Description"
+    />
+  );
+}
+```
+
+效果如下：
+
+import { LinkCard } from '@theme';
+
+<LinkCard
+  href="https://example.com"
+  title="Link Card Title"
+  description="Link Card Description"
+/>
+
+其中包含的 props 类型如下：
+
+```ts
+interface LinkCardProps {
+  /**
+   * 链接的 URL。
+   */
+  href: string;
+  /**
+   * 链接的标题。
+   */
+  title: string;
+  /**
+   * 链接的描述。
+   */
+  description?: React.ReactNode;
+  /**
+   * 链接卡片的样式。
+   */
+  style?: React.CSSProperties;
+}
+```
+
 ## Helmet
 
 一般用于在文档中设置自定义 head 内容（基于 [react-helmet-async](https://www.npmjs.com/package/react-helmet-async)）。使用方法如下：

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

@@ -0,0 +1,30 @@
+interface CardProps {
+  /**
+   * The title of the card.
+   */
+  title: React.ReactNode;
+  /**
+   * The content to display inside the card.
+   */
+  content?: React.ReactNode;
+  /**
+   * The icon of the card.
+   */
+  icon?: React.ReactNode;
+  /**
+   * The style of the card.
+   */
+  style?: React.CSSProperties;
+}
+
+export function Card({ content, title, icon, style }: CardProps) {
+  return (
+    <div className="border border-gray-400 rounded-lg p-6" style={style}>
+      <p className="flex items-center gap-2 mb-4">
+        {icon && <div>{icon}</div>}
+        {title && <span className="text-2xl font-bold">{title}</span>}
+      </p>
+      <div className="text-base overflow-auto">{content}</div>
+    </div>
+  );
+}

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

@@ -0,0 +1,5 @@
+.link::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+}

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

@@ -0,0 +1,43 @@
+import styles from './index.module.scss';
+import ArrowRight from '@theme-assets/arrow-right';
+
+interface LinkCardProps {
+  /**
+   * The URL of the link.
+   */
+  href: string;
+  /**
+   * The title of the link.
+   */
+  title: string;
+  /**
+   * The description of the link.
+   */
+  description?: React.ReactNode;
+  /**
+   * The style of the link card.
+   */
+  style?: React.CSSProperties;
+}
+
+export function LinkCard(props: LinkCardProps) {
+  const { href, title, description, style } = props;
+
+  return (
+    <div
+      className="relative border border-gray-400 rounded-lg p-6 flex justify-between items-start hover:border-gray-500 hover:bg-gray-100 transition-all duration-300"
+      style={style}
+    >
+      <div className="flex flex-col">
+        <a
+          href={href}
+          className={`flex items-center gap-2 mb-4 ${styles.link}`}
+        >
+          {title && <span className="text-2xl font-bold">{title}</span>}
+        </a>
+        <span className="text-base overflow-auto">{description}</span>
+      </div>
+      <ArrowRight />
+    </div>
+  );
+}

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

@@ -1,13 +1,15 @@
 export { Aside } from './Aside';
 export { Badge } from './Badge';
 export { Button } from './Button';
+export { Card } from './Card';
 export { DocFooter } from './DocFooter';
 export { EditLink } from './EditLink';
 export { HomeFeature } from './HomeFeature';
 export { HomeFooter } from './HomeFooter';
 export { HomeHero } from './HomeHero';
 export { LastUpdated } from './LastUpdated';
 export { Link } from './Link';
+export { LinkCard } from './LinkCard';
 export { Nav } from './Nav';
 export { Overview } from './Overview';
 export { PackageManagerTabs } from './PackageManagerTabs';