💄 style: Add new card style

lobehub · Sep 23, 2024 · 38778e6 · 38778e6
1 parent 896b821
commit 38778e6
Show file tree

Hide file tree

Showing 22 changed files with 248 additions and 24 deletions.
diff --git a/.dumirc.ts b/.dumirc.ts
@@ -37,12 +37,11 @@ const themeConfig = {
   name: 'UI',
   nav: [
     { link: '/components/action-icon', title: 'Components' },
+    { link: '/brand/lobehub', title: 'Brand' },
     { link: '/mdx/callout', title: 'Mdx' },
+    { link: 'https://icons.lobehub.com', mode: 'override', title: 'Icons' },
+    { link: 'https://charts.lobehub.com', mode: 'override', title: 'Charts' },
     { link: '/colors', title: 'Colors' },
-    { link: 'http://icons.lobehub.com', mode: 'override', title: 'Icons' },
-    { link: 'https://ant.design/components/overview', mode: 'override', title: 'Antd Components' },
-    { link: 'https://lucide.dev/icons', mode: 'override', title: 'Lucide Icons' },
-    { link: 'https://ant-design.github.io/antd-style', mode: 'override', title: 'CSSinJS' },
     { link: '/changelog', title: 'Changelog' },
   ],
   socialLinks: {
@@ -54,6 +53,7 @@ const themeConfig = {
 
 export default defineConfig({
   alias: {
+    '@lobehub/ui/brand': resolve(__dirname, './src/brand'),
     '@lobehub/ui/mdx': resolve(__dirname, './src/mdx'),
   },
   apiParser: isProduction ? {} : false,

diff --git a/docs/brand/Lobechat-text.md b/docs/brand/Lobechat-text.md
@@ -0,0 +1,17 @@
+---
+nav: Brand
+group: Components
+title: LobeChatText
+apiHeader:
+  pkg: '@lobehub/ui/brand'
+  docUrl: 'https://github.com/lobehub/lobe-ui/tree/master/docs/brand/lobechat-text.md'
+  sourceUrl: 'https://github.com/lobehub/lobe-ui/tree/master/src/brand/components/LobeChatText.tsx'
+---
+
+## Example
+
+```tsx
+import { LobeChatText } from '@lobehub/ui/brand';
+
+export default () => <LobeChatText size={64} />;
+```
diff --git a/docs/brand/lobechat.md b/docs/brand/lobechat.md
@@ -0,0 +1,28 @@
+---
+nav: Brand
+group: Combine
+title: LobeChat
+apiHeader:
+  pkg: '@lobehub/ui/brand'
+  docUrl: 'https://github.com/lobehub/lobe-ui/tree/master/docs/brand/lobechat.md'
+  sourceUrl: 'https://github.com/lobehub/lobe-ui/tree/master/src/brand/LobeChat.tsx'
+---
+
+## Example
+
+```tsx
+import { LobeChat } from '@lobehub/ui/brand';
+import { Flexbox } from 'react-layout-kit';
+
+export default () => (
+  <Flexbox gap={16} align={'flex-start'}>
+    <LobeChat size={64} />
+    <LobeChat size={64} type={'mono'} />
+    <LobeChat size={64} type={'flat'} />
+    <LobeChat size={64} type={'text'} />
+    <LobeChat size={64} type={'combine'} />
+    <LobeChat size={64} extra={'Discover'} />
+    <LobeChat size={64} type={'combine'} extra={'Discover'} />
+  </Flexbox>
+);
+```
diff --git a/docs/brand/lobehub-text.md b/docs/brand/lobehub-text.md
@@ -0,0 +1,17 @@
+---
+nav: Brand
+group: Components
+title: LobeHubText
+apiHeader:
+  pkg: '@lobehub/ui/brand'
+  docUrl: 'https://github.com/lobehub/lobe-ui/tree/master/docs/brand/lobehub-text.md'
+  sourceUrl: 'https://github.com/lobehub/lobe-ui/tree/master/src/brand/components/LobeHubText.tsx'
+---
+
+## Example
+
+```tsx
+import { LobeHubText } from '@lobehub/ui/brand';
+
+export default () => <LobeHubText size={64} />;
+```
diff --git a/docs/brand/lobehub.md b/docs/brand/lobehub.md
@@ -0,0 +1,28 @@
+---
+nav: Brand
+group: Combine
+title: LobeHub
+apiHeader:
+  pkg: '@lobehub/ui/brand'
+  docUrl: 'https://github.com/lobehub/lobe-ui/tree/master/docs/brand/lobehub.md'
+  sourceUrl: 'https://github.com/lobehub/lobe-ui/tree/master/src/brand/LobeHub.tsx'
+---
+
+## Example
+
+```tsx
+import { LobeHub } from '@lobehub/ui/brand';
+import { Flexbox } from 'react-layout-kit';
+
+export default () => (
+  <Flexbox gap={16} align={'flex-start'}>
+    <LobeHub size={64} />
+    <LobeHub size={64} type={'mono'} />
+    <LobeHub size={64} type={'flat'} />
+    <LobeHub size={64} type={'text'} />
+    <LobeHub size={64} type={'combine'} />
+    <LobeHub size={64} extra={'Discover'} />
+    <LobeHub size={64} type={'combine'} extra={'Discover'} />
+  </Flexbox>
+);
+```
diff --git a/docs/brand/logo-3d.md b/docs/brand/logo-3d.md
@@ -0,0 +1,17 @@
+---
+nav: Brand
+group: Components
+title: Logo3d
+apiHeader:
+  pkg: '@lobehub/ui/brand'
+  docUrl: 'https://github.com/lobehub/lobe-ui/tree/master/docs/brand/logo-3d.md'
+  sourceUrl: 'https://github.com/lobehub/lobe-ui/tree/master/src/brand/components/Logo3d.tsx'
+---
+
+## Example
+
+```tsx
+import { Logo3d } from '@lobehub/ui/brand';
+
+export default () => <Logo3d size={64} />;
+```
diff --git a/docs/brand/logo-flat.md b/docs/brand/logo-flat.md
@@ -0,0 +1,17 @@
+---
+nav: Brand
+group: Components
+title: LogoFlat
+apiHeader:
+  pkg: '@lobehub/ui/brand'
+  docUrl: 'https://github.com/lobehub/lobe-ui/tree/master/docs/brand/logo-flat.md'
+  sourceUrl: 'https://github.com/lobehub/lobe-ui/tree/master/src/brand/components/LogoFlat.tsx'
+---
+
+## Example
+
+```tsx
+import { LogoFlat } from '@lobehub/ui/brand';
+
+export default () => <LogoFlat size={64} />;
+```
diff --git a/docs/brand/logo-mono.md b/docs/brand/logo-mono.md
@@ -0,0 +1,17 @@
+---
+nav: Brand
+group: Components
+title: LogoMono
+apiHeader:
+  pkg: '@lobehub/ui/brand'
+  docUrl: 'https://github.com/lobehub/lobe-ui/tree/master/docs/brand/logo-mono.md'
+  sourceUrl: 'https://github.com/lobehub/lobe-ui/tree/master/src/brand/components/LogoMono.tsx'
+---
+
+## Example
+
+```tsx
+import { LogoMono } from '@lobehub/ui/brand';
+
+export default () => <LogoMono size={64} />;
+```
diff --git a/docs/mdx/Callout/index.md → docs/mdx/callout.md b/docs/mdx/Callout/index.md → docs/mdx/callout.md
@@ -4,14 +4,14 @@ group: Built-ins
 title: Callout
 apiHeader:
   pkg: '@lobehub/ui/mdx'
-  docUrl: 'https://github.com/lobehub/lobe-ui/tree/master/docs/mdx/Callout/index.md'
+  docUrl: 'https://github.com/lobehub/lobe-ui/tree/master/docs/mdx/callout.md'
   sourceUrl: 'https://github.com/lobehub/lobe-ui/tree/master/src/mdx/Callout/index.tsx'
 ---
 
 ## Example
 
-<code src="./demos/index.tsx" ></code>
+<code src="./demos/callout.tsx" ></code>
 
 ## Usage
 
-<code src="./demos/story.tsx" nopadding></code>
+<code src="./demos/callout-story.tsx" nopadding></code>
diff --git a/docs/mdx/Cards/index.md → docs/mdx/cards.md b/docs/mdx/Cards/index.md → docs/mdx/cards.md
@@ -4,10 +4,14 @@ group: Built-ins
 title: Cards
 apiHeader:
   pkg: '@lobehub/ui/mdx'
-  docUrl: 'https://github.com/lobehub/lobe-ui/tree/master/docs/mdx/Cards/index.md'
+  docUrl: 'https://github.com/lobehub/lobe-ui/tree/master/docs/mdx/cards.md'
   sourceUrl: 'https://github.com/lobehub/lobe-ui/tree/master/src/mdx/Cards/index.tsx'
 ---
 
 ## Example
 
-<code src="./demos/index.tsx" ></code>
+<code src="./demos/cards.tsx" ></code>
+
+## Rows
+
+<code src="./demos/cards-rows.tsx" ></code>
diff --git a/docs/mdx/Callout/demos/story.tsx → docs/mdx/demos/callout-story.tsx b/docs/mdx/Callout/demos/story.tsx → docs/mdx/demos/callout-story.tsx
diff --git a/docs/mdx/Callout/demos/index.tsx → docs/mdx/demos/callout.tsx b/docs/mdx/Callout/demos/index.tsx → docs/mdx/demos/callout.tsx
diff --git a/docs/mdx/demos/cards-rows.tsx b/docs/mdx/demos/cards-rows.tsx
@@ -0,0 +1,35 @@
+import { Typography } from '@lobehub/ui';
+import { Card, Cards } from '@lobehub/ui/mdx';
+import { Divider } from 'antd';
+
+export default () => (
+  <Typography>
+    <Cards maxItemWidth={100} rows={4}>
+      <Card href="/mdx/callout" title="Callout" />
+      <Card href="/mdx/callout" title="Tabs" />
+      <Card href="/mdx/callouts" title="Steps" />
+      <Card href="/mdx/callouts" title="FileTree" />
+    </Cards>
+    <Divider />
+    <Cards maxItemWidth={200} rows={3}>
+      <Card href="/mdx/callout" title="Callout" />
+      <Card href="/mdx/callout" title="Tabs" />
+      <Card href="/mdx/callouts" title="Steps" />
+      <Card href="/mdx/callouts" title="FileTree" />
+    </Cards>
+    <Divider />
+    <Cards rows={2}>
+      <Card href="/mdx/callout" title="Callout" />
+      <Card href="/mdx/callout" title="Tabs" />
+      <Card href="/mdx/callouts" title="Steps" />
+      <Card href="/mdx/callouts" title="FileTree" />
+    </Cards>
+    <Divider />
+    <Cards rows={1}>
+      <Card href="/mdx/callout" title="Callout" />
+      <Card href="/mdx/callout" title="Tabs" />
+      <Card href="/mdx/callouts" title="Steps" />
+      <Card href="/mdx/callouts" title="FileTree" />
+    </Cards>
+  </Typography>
+);
diff --git a/docs/mdx/Cards/demos/index.tsx → docs/mdx/demos/cards.tsx b/docs/mdx/Cards/demos/index.tsx → docs/mdx/demos/cards.tsx
@@ -1,19 +1,40 @@
 import { Typography } from '@lobehub/ui';
 import { Card, Cards } from '@lobehub/ui/mdx';
+import { Divider } from 'antd';
 import { Warehouse } from 'lucide-react';
 
 export default () => (
   <Typography>
+    <Cards>
+      <Card href="/mdx/callout" title="Callout" />
+      <Card href="/mdx/callout" title="Tabs" />
+      <Card href="/mdx/callouts" title="Steps" />
+    </Cards>
+    <Divider orientation={'left'}>Icon & Title</Divider>
     <Cards>
       <Card href="/mdx/callout" icon={Warehouse} title="Callout" />
       <Card href="/mdx/callout" icon={Warehouse} title="Tabs" />
       <Card href="/mdx/callouts" icon={Warehouse} title="Steps" />
     </Cards>
+    <Divider orientation={'left'}>Icon & Desc & Title</Divider>
     <Cards>
       <Card desc="Demo desction text" href="/mdx/callout" icon={Warehouse} title="Callout" />
       <Card desc="Demo desction text" href="/mdx/callout" icon={Warehouse} title="Tabs" />
       <Card desc="Demo desction text" href="/mdx/callouts" icon={Warehouse} title="Steps" />
     </Cards>
+    <Divider orientation={'left'}>Tags</Divider>
+    <Cards>
+      <Card
+        desc="Demo desction text"
+        href="/mdx/callout"
+        tag={'Components'}
+        tagColor={'cyan'}
+        title="Callout"
+      />
+      <Card desc="Demo desction text" href="/mdx/callout" tag={'Components'} title="Tabs" />
+      <Card desc="Demo desction text" href="/mdx/callouts" tag={'Components'} title="Steps" />
+    </Cards>
+    <Divider orientation={'left'}>Image Cover</Divider>
     <Cards>
       <Card
         href="/mdx/callout"

diff --git a/docs/mdx/FileTree/demos/index.tsx → docs/mdx/demos/file-tree.tsx b/docs/mdx/FileTree/demos/index.tsx → docs/mdx/demos/file-tree.tsx
diff --git a/docs/mdx/Steps/demos/index.tsx → docs/mdx/demos/steps.tsx b/docs/mdx/Steps/demos/index.tsx → docs/mdx/demos/steps.tsx
diff --git a/docs/mdx/Tabs/demos/index.tsx → docs/mdx/demos/tabs.tsx b/docs/mdx/Tabs/demos/index.tsx → docs/mdx/demos/tabs.tsx
diff --git a/docs/mdx/FileTree/index.md → docs/mdx/file-tree.md b/docs/mdx/FileTree/index.md → docs/mdx/file-tree.md
@@ -4,10 +4,10 @@ group: Built-ins
 title: FileTree
 apiHeader:
   pkg: '@lobehub/ui/mdx'
-  docUrl: 'https://github.com/lobehub/lobe-ui/tree/master/docs/mdx/FileTree/index.md'
+  docUrl: 'https://github.com/lobehub/lobe-ui/tree/master/docs/mdx/file-tree.md'
   sourceUrl: 'https://github.com/lobehub/lobe-ui/tree/master/src/mdx/FileTree/index.tsx'
 ---
 
 ## Example
 
-<code src="./demos/index.tsx" ></code>
+<code src="./demos/file-tree.tsx" ></code>
diff --git a/docs/mdx/index.md → docs/mdx/mdx-components.md b/docs/mdx/index.md → docs/mdx/mdx-components.md
@@ -5,7 +5,7 @@ title: mdxComponents
 atomId: mdxComponents
 apiHeader:
   pkg: '@lobehub/ui/mdx'
-  docUrl: 'https://github.com/lobehub/lobe-ui/tree/master/docs/mdx/index.md'
+  docUrl: 'https://github.com/lobehub/lobe-ui/tree/master/docs/mdx/mdx-components.md'
   sourceUrl: 'https://github.com/lobehub/lobe-ui/tree/master/src/mdx/mdxComponents.ts'
 ---
 

diff --git a/docs/mdx/Steps/index.md → docs/mdx/steps.md b/docs/mdx/Steps/index.md → docs/mdx/steps.md
@@ -4,10 +4,10 @@ group: Built-ins
 title: Steps
 apiHeader:
   pkg: '@lobehub/ui/mdx'
-  docUrl: 'https://github.com/lobehub/lobe-ui/tree/master/docs/mdx/Steps/index.md'
+  docUrl: 'https://github.com/lobehub/lobe-ui/tree/master/docs/mdx/steps.md'
   sourceUrl: 'https://github.com/lobehub/lobe-ui/tree/master/src/mdx/Steps/index.tsx'
 ---
 
 ## Example
 
-<code src="./demos/index.tsx" ></code>
+<code src="./demos/steps.tsx" ></code>
diff --git a/docs/mdx/Tabs/index.md → docs/mdx/tabs.md b/docs/mdx/Tabs/index.md → docs/mdx/tabs.md
@@ -5,10 +5,10 @@ title: Tabs
 atomId: 'Tabs, Tab'
 apiHeader:
   pkg: '@lobehub/ui/mdx'
-  docUrl: 'https://github.com/lobehub/lobe-ui/tree/master/docs/mdx/Tabs/index.md'
+  docUrl: 'https://github.com/lobehub/lobe-ui/tree/master/docs/mdx/tabs.md'
   sourceUrl: 'https://github.com/lobehub/lobe-ui/tree/master/src/mdx/Tabs/index.tsx'
 ---
 
 ## Example
 
-<code src="./demos/index.tsx" ></code>
+<code src="./demos/tabs.tsx" ></code>