docs: add Typography example

example/src/Example/demos/Breadcrumb.tsx

@@ -1,6 +1,6 @@
 import { StoryBook, useControls, useCreateStore } from '@lobehub/ui';
-import type { BreadcrumbProps } from 'antd';
-import { Breadcrumb } from 'antd';
+import type { BreadcrumbProps } from '@yuntijs/ui';
+import { Breadcrumb } from '@yuntijs/ui';
 import React from 'react';
 
 const items = [

example/src/Example/demos/Typography.tsx

@@ -0,0 +1,75 @@
+import { Divider, Typography } from '@yuntijs/ui';
+import React from 'react';
+
+const { Title, Paragraph, Text, Link, Time } = Typography;
+
+const blockContent = `AntV 是蚂蚁集团全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、不限可能的数据可视化最佳实践。得益于丰富的业务场景和用户需求挑战，AntV 经历多年积累与不断打磨，已支撑整个阿里集团内外 20000+ 业务系统，通过了日均千万级 UV 产品的严苛考验。
+我们正在基础图表，图分析，图编辑，地理空间可视化，智能可视化等各个可视化的领域耕耘，欢迎同路人一起前行。`;
+
+export default () => {
+  return (
+    <Typography>
+      <Title>Introduction</Title>
+
+      <Paragraph>
+        In the process of internal desktop applications development, many different design specs and
+        implementations would be involved, which might cause designers and developers difficulties
+        and duplication and reduce the efficiency of development.
+      </Paragraph>
+
+      <Paragraph>
+        After massive project practice and summaries, Ant Design, a design language for background
+        applications, is refined by Ant UED Team, which aims to{' '}
+        <Text strong>
+          uniform the user interface specs for internal background projects, lower the unnecessary
+          cost of design differences and implementation and liberate the resources of design and
+          front-end development
+        </Text>
+        .
+      </Paragraph>
+
+      <Title level={2}>Guidelines and Resources</Title>
+
+      <Paragraph>
+        We supply a series of design principles, practical patterns and high quality design
+        resources (<Text code>Sketch</Text> and <Text code>Axure</Text>), to help people create
+        their product prototypes beautifully and efficiently.
+      </Paragraph>
+
+      <Paragraph>
+        <ul>
+          <li>
+            <Link href="/docs/spec/proximity">Principles</Link>
+          </li>
+          <li>
+            <Link href="/docs/spec/overview">Patterns</Link>
+          </li>
+          <li>
+            <Link href="/docs/resources">Resource Download</Link>
+          </li>
+        </ul>
+      </Paragraph>
+
+      <Paragraph>
+        Press <Text keyboard>Esc</Text> to exit...
+      </Paragraph>
+
+      <Divider />
+
+      <Paragraph>
+        <Text code>Time</Text> component:
+        <ul>
+          <li>
+            <Time time="2024-06-30 11:11:11" />
+          </li>
+          <li>
+            <Time relativeTime={false} time="2024-06-30 11:11:11" />
+          </li>
+          <li>
+            <Time format="YYYY/MM/DD HH:mm" relativeTime={false} time="2024-06-30 11:11:11" />
+          </li>
+        </ul>
+      </Paragraph>
+    </Typography>
+  );
+};

example/src/Example/index.md

@@ -23,3 +23,7 @@ description: This is an doc example
 ## Form
 
 <code src="./demos/Form.tsx"></code>
+
+## Typography
+
+<code src="./demos/Typography.tsx"></code>