From 5a4dbfd9880e41a3d2c235b4756e636739b081e8 Mon Sep 17 00:00:00 2001
From: canisminor1990 <i@canisminor.cc>
Date: Mon, 23 Sep 2024 17:23:23 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20style:=20Update=20Card=20style?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/mdx/demos/cards.tsx | 12 +++++++++++-
 src/mdx/Card.tsx         | 16 +++++++++++++---
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/docs/mdx/demos/cards.tsx b/docs/mdx/demos/cards.tsx
index e73e4ff2..d6001951 100644
--- a/docs/mdx/demos/cards.tsx
+++ b/docs/mdx/demos/cards.tsx
@@ -9,18 +9,21 @@ 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>
@@ -28,11 +31,12 @@ export default () => (
         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
index 31a94295..c04a62ba 100644
--- 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>