💄 style: Update Card style

lobehub · Sep 23, 2024 · 5a4dbfd · 5a4dbfd
1 parent 502e974
commit 5a4dbfd
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 4 deletions.
diff --git a/docs/mdx/demos/cards.tsx b/docs/mdx/demos/cards.tsx
@@ -9,30 +9,34 @@ export default () => (
       <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 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" />
+      <Card href="/mdx/callouts" icon={Warehouse} title="FileTree" />
     </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" />
+      <Card desc="Demo desction text" href="/mdx/callouts" icon={Warehouse} title="FileTree" />
     </Cards>
     <Divider orientation={'left'}>Tags</Divider>
     <Cards>
       <Card
         desc="Demo desction text"
         href="/mdx/callout"
         tag={'Components'}
-        tagColor={'cyan'}
+        tagColor={'gold'}
         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" />
+      <Card desc="Demo desction text" href="/mdx/callouts" tag={'Components'} title="FileTree" />
     </Cards>
     <Divider orientation={'left'}>Image Cover</Divider>
     <Cards>
@@ -54,6 +58,12 @@ export default () => (
         image="https://gw.alipayobjects.com/zos/kitchen/sLO%24gbrQtp/lobe-chat.webp"
         title="Steps"
       />
+      <Card
+        href="/mdx/callouts"
+        icon={Warehouse}
+        image="https://gw.alipayobjects.com/zos/kitchen/sLO%24gbrQtp/lobe-chat.webp"
+        title="FileTree"
+      />
     </Cards>
   </Typography>
 );
diff --git a/src/mdx/Card.tsx b/src/mdx/Card.tsx
@@ -76,7 +76,7 @@ export interface CardProps extends Omit<FlexboxProps, 'children'> {
 
 const Card: FC<CardProps> = ({
   tag,
-  tagColor = 'success',
+  tagColor = 'blue',
   icon,
   title,
   desc,
@@ -101,11 +101,21 @@ const Card: FC<CardProps> = ({
           />
         )}
         {tag && (
-          <Flexbox align={'flex-start'} className={styles.content} style={{ paddingBottom: 0 }}>
+          <Flexbox
+            align={'flex-start'}
+            className={styles.content}
+            style={{ paddingBottom: '0.2em', paddingTop: '1.8em' }}
+          >
             <Tag
               bordered={false}
               color={tagColor}
-              style={{ borderRadius: '1em', fontSize: '0.8em' }}
+              style={{
+                borderRadius: '1em',
+                fontSize: '0.8em',
+                fontWeight: 500,
+                paddingBlock: '0.1em',
+                paddingInline: '0.6em',
+              }}
             >
               {tag}
             </Tag>