docs: add activity,tooltip,skeleton

Author: Onlylonger

docs/components/activity/index.mdx

@@ -0,0 +1,17 @@
+# Activity
+
+当用户有缓存组件的场景，`Activity` 组件可以缓存相应的组件以及 `DOM` 节点
+
+## Playground
+
+<code src="./playground.tsx" />
+
+:::note
+切换到 Search List 后，输入框填写内容后，再切换体验效果
+:::
+
+## API
+
+| Property | Description | Type                    | Default Value |
+| -------- | ----------- | ----------------------- | ------------- |
+| mode     | 模式切换    | `"visible" \| "hidden"` | -             |

docs/components/activity/playground.tsx

@@ -0,0 +1,53 @@
+import { Activity, Button, Input } from '@shilong/react'
+import React from 'react'
+
+const Home = () => {
+  return 'Home'
+}
+
+const SearchList = () => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        gap: 10,
+      }}
+    >
+      <Input />
+      <Button>Search</Button>
+    </div>
+  )
+}
+
+function App() {
+  const [route, setRoute] = React.useState('home')
+
+  const handleNav = (path: string) => {
+    setRoute(path)
+  }
+
+  return (
+    <div>
+      <div style={{ display: 'flex', gap: 20 }}>
+        <Button variant="ghost" onClick={() => handleNav('home')}>
+          Home
+        </Button>
+        <Button variant="ghost" onClick={() => handleNav('search')}>
+          Search List
+        </Button>
+      </div>
+
+      <Activity mode={route === 'home' ? 'visible' : 'hidden'}>
+        <Home />
+      </Activity>
+
+      <Activity mode={route === 'search' ? 'visible' : 'hidden'}>
+        <SearchList />
+      </Activity>
+    </div>
+  )
+}
+
+export default App

docs/components/skeleton/index.mdx

@@ -0,0 +1,11 @@
+# Skeleton
+
+用于内容占位等待的场景
+
+## Playground
+
+<code src="./playground.tsx" />
+
+## API
+
+与 `div` 标签属性相同

docs/components/skeleton/playground.tsx

@@ -0,0 +1,14 @@
+import { Skeleton } from '@shilong/react'
+
+function App() {
+  return (
+    <div>
+      <Skeleton
+        style={{ width: 80, height: 80, borderRadius: '50%', margin: '0 auto' }}
+      />
+      <Skeleton style={{ width: '100%', height: 200 }} />
+    </div>
+  )
+}
+
+export default App

docs/components/tooltip/index.mdx

@@ -0,0 +1,11 @@
+# Tooltip
+
+用于 当既要保持 UI 简洁，同时又需要对不熟悉的人解释 的时候，会使用 `Tooltips` 组件进行内容提示。
+
+## Playground
+
+<code src="./playground.tsx" />
+
+## API
+
+继承自 [Popover](../popover/). 移除了 `floatingArrowProps` 和 `offsetHeight` 属性.

docs/components/tooltip/playground.tsx

@@ -0,0 +1,16 @@
+import { Button, Tooltip } from '@shilong/react'
+
+function App() {
+  return (
+    <Tooltip
+      trigger={<Button variant="outline">👋</Button>}
+      hover
+      click={false}
+      arrow
+    >
+      这是一个打招呼的表情
+    </Tooltip>
+  )
+}
+
+export default App

docs/index.mdx

@@ -4,9 +4,14 @@
 
 ## 1. 安装依赖
 
-```sh
-pnpm add @shilong/react
-```
+import { PackageManagerTabs } from '@theme'
+
+<PackageManagerTabs
+  command={{
+    pnpm: 'pnpm add @shilong/react',
+    npm: 'npm install @shilong/react',
+  }}
+/>
 
 ## 2. 加载主题样式
 
@@ -40,7 +45,7 @@ createRoot(document.querySelector('#app')!).render(
 
 import { Button } from '@shilong/react'
 
-## 3. 使用 <Button variant='link'><a href="/components/button">查看文档</a></Button>
+## 3. 使用 <Button variant='link'><a href="/react/components/button">查看文档</a></Button>
 
 ```tsx playground
 import { Button } from '@shilong/react'

rspress.config.ts

@@ -13,6 +13,13 @@ export default defineConfig({
   },
   icon: '/favicon.ico',
   themeConfig: {
+    socialLinks: [
+      {
+        icon: 'github',
+        mode: 'link',
+        content: 'https://github.com/Onlylonger/react',
+      },
+    ],
     nav: [
       {
         text: 'Quick Start',
@@ -40,10 +47,10 @@ export default defineConfig({
           text: 'Popover',
           link: '/components/popover',
         },
-        {
-          text: 'Input',
-          link: '/components/input',
-        },
+        // {
+        //   text: 'Input',
+        //   link: '/components/input',
+        // },
         {
           text: 'Tooltip',
           link: '/components/tooltip',