chore: button page i18n key

fwx5618177 · Jan 12, 2025 · 6032a48 · 6032a48
1 parent ca30171
commit 6032a48
Show file tree

Hide file tree

Showing 6 changed files with 496 additions and 61 deletions.
diff --git a/packages/sample/src/components/ButtonSection/index.module.scss b/packages/sample/src/components/ButtonSection/index.module.scss
@@ -13,10 +13,29 @@
     transition: all var(--transition-normal);
     box-shadow: var(--shadow-sm);
     min-width: 0;
+    position: relative;
+    overflow: hidden;
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 4px;
+      background: linear-gradient(90deg, var(--primary-color) 0%, var(--secondary-color) 100%);
+      opacity: 0;
+      transition: opacity var(--transition-normal);
+    }
 
     &:hover {
       box-shadow: var(--shadow-lg);
       border-color: var(--primary-color);
+      transform: translateY(-2px);
+
+      &::before {
+        opacity: 1;
+      }
     }
 
     h3 {
@@ -25,6 +44,21 @@
       color: var(--text-primary);
       font-weight: 600;
       word-break: break-word;
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-2);
+
+      &::before {
+        content: "#";
+        color: var(--primary-color);
+        opacity: 0;
+        transition: opacity var(--transition-normal);
+        font-weight: 400;
+      }
+
+      &:hover::before {
+        opacity: 1;
+      }
     }
 
     .description {
@@ -33,6 +67,7 @@
       margin-bottom: var(--spacing-6);
       line-height: 1.6;
       word-wrap: break-word;
+      max-width: 80ch;
     }
 
     .demo {
@@ -47,6 +82,21 @@
       border: 1px solid var(--border-color);
       overflow-x: auto;
       -webkit-overflow-scrolling: touch;
+      position: relative;
+
+      &::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        border-radius: inherit;
+        pointer-events: none;
+        box-shadow: inset 0 0 0 1px rgba(var(--primary-rgb), 0.1);
+        transition: box-shadow var(--transition-normal);
+      }
+
+      &:hover::after {
+        box-shadow: inset 0 0 0 1px rgba(var(--primary-rgb), 0.2);
+      }
     }
 
     .codeWrapper {
@@ -55,11 +105,30 @@
       overflow: hidden;
       border: 1px solid var(--border-color);
       width: 100%;
+      position: relative;
+
+      &::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        border-radius: inherit;
+        pointer-events: none;
+        box-shadow: inset 0 0 0 1px rgba(var(--primary-rgb), 0.1);
+        transition: box-shadow var(--transition-normal);
+      }
+
+      &:hover::after {
+        box-shadow: inset 0 0 0 1px rgba(var(--primary-rgb), 0.2);
+      }
 
       pre {
         overflow-x: auto;
         -webkit-overflow-scrolling: touch;
         padding: var(--spacing-4);
+        margin: 0;
+        font-family: var(--font-mono);
+        font-size: var(--text-sm);
+        line-height: 1.6;
       }
     }
   }
@@ -71,17 +140,29 @@
     gap: var(--spacing-6);
 
     .example {
+      padding: var(--spacing-4);
+
       h3 {
         font-size: var(--text-lg);
       }
 
       .description {
         font-size: var(--text-sm);
+        margin-bottom: var(--spacing-4);
       }
 
       .demo {
+        padding: var(--spacing-4);
         min-width: 0;
         justify-content: flex-start;
+        margin-bottom: var(--spacing-4);
+      }
+
+      .codeWrapper {
+        pre {
+          padding: var(--spacing-3);
+          font-size: var(--text-xs);
+        }
       }
     }
   }
@@ -96,6 +177,12 @@
       .demo {
         padding: var(--spacing-3);
       }
+
+      .codeWrapper {
+        pre {
+          padding: var(--spacing-2);
+        }
+      }
     }
   }
 }
diff --git a/packages/sample/src/components/ButtonSection/index.tsx b/packages/sample/src/components/ButtonSection/index.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { Button } from "@minerva/lib-core";
+import { IoSearch, IoHeart, IoAdd, IoTrash, IoSave } from "react-icons/io5";
 import CodeBlock from "@layout/CodeBlock";
 import styles from "./index.module.scss";
 
@@ -19,7 +20,7 @@ function App() {
 }`;
 
   const variantsCode = `
-// 不同的按钮变体
+// Different button variants for different purposes
 <Button variant="primary">Primary</Button>
 <Button variant="secondary">Secondary</Button>
 <Button variant="success">Success</Button>
@@ -29,20 +30,20 @@ function App() {
 <Button variant="back">Back</Button>`;
 
   const sizesCode = `
-// 不同的按钮尺寸
+// Different button sizes
 <Button size="small">Small</Button>
 <Button size="medium">Medium</Button>
 <Button size="large">Large</Button>
 <Button size="xlarge">XLarge</Button>`;
 
   const shapesCode = `
-// 不同的按钮形状
+// Different button shapes
 <Button shape="square">Square</Button>
 <Button shape="rounded">Rounded</Button>
 <Button shape="circle">Circle</Button>`;
 
   const borderRadiusCode = `
-// 自定义按钮圆角
+// Custom button border radius
 <Button borderRadius="none">No Radius</Button>
 <Button borderRadius="small">Small Radius</Button>
 <Button borderRadius="medium">Medium Radius</Button>
@@ -51,11 +52,68 @@ function App() {
 <Button borderRadius={8}>Custom Radius (8px)</Button>`;
 
   const statesCode = `
-// 按钮的不同状态
+// Different button states
 <Button loading>Loading</Button>
 <Button disabled>Disabled</Button>
 <Button active>Active</Button>`;
 
+  const withIconsCode = `
+// Buttons with icons
+import { IoSearch, IoHeart, IoAdd, IoTrash, IoSave } from "react-icons/io5";
+
+<Button variant="primary">
+  <IoSearch /> Search
+</Button>
+<Button variant="secondary">
+  <IoHeart /> Like
+</Button>
+<Button variant="success">
+  <IoAdd /> Add
+</Button>
+<Button variant="error">
+  <IoTrash /> Delete
+</Button>
+<Button variant="primary">
+  <IoSave /> Save
+</Button>`;
+
+  const blockButtonCode = `
+// Full width button
+<Button style={{ width: "100%" }}>Block Button</Button>`;
+
+  const customStylesCode = `
+// Buttons with custom styles
+<Button
+  style={{
+    background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
+    color: "white",
+    padding: "0 30px",
+    boxShadow: "0 3px 5px 2px rgba(255, 105, 135, .3)",
+  }}
+>
+  Gradient
+</Button>
+
+<Button
+  style={{
+    border: "2px dashed #1890ff",
+    color: "#1890ff",
+    background: "transparent",
+  }}
+>
+  Dashed
+</Button>
+
+<Button
+  style={{
+    background: "#13c2c2",
+    color: "white",
+    borderRadius: "24px",
+  }}
+>
+  Custom
+</Button>`;
+
   return (
     <div className={styles.examples}>
       <div className={styles.example}>
@@ -153,6 +211,86 @@ function App() {
           <CodeBlock code={statesCode} language="tsx" />
         </div>
       </div>
+
+      <div className={styles.example}>
+        <h3>{t("components.button.examples.withIcons.title")}</h3>
+        <p className={styles.description}>
+          {t("components.button.examples.withIcons.description")}
+        </p>
+        <div className={styles.demo}>
+          <Button variant="primary">
+            <IoSearch /> Search
+          </Button>
+          <Button variant="secondary">
+            <IoHeart /> Like
+          </Button>
+          <Button variant="success">
+            <IoAdd /> Add
+          </Button>
+          <Button variant="error">
+            <IoTrash /> Delete
+          </Button>
+          <Button variant="primary">
+            <IoSave /> Save
+          </Button>
+        </div>
+        <div className={styles.codeWrapper}>
+          <CodeBlock code={withIconsCode} language="tsx" />
+        </div>
+      </div>
+
+      <div className={styles.example}>
+        <h3>{t("components.button.examples.block.title")}</h3>
+        <p className={styles.description}>
+          {t("components.button.examples.block.description")}
+        </p>
+        <div className={styles.demo}>
+          <Button style={{ width: "100%" }}>Block Button</Button>
+        </div>
+        <div className={styles.codeWrapper}>
+          <CodeBlock code={blockButtonCode} language="tsx" />
+        </div>
+      </div>
+
+      <div className={styles.example}>
+        <h3>{t("components.button.examples.customStyles.title")}</h3>
+        <p className={styles.description}>
+          {t("components.button.examples.customStyles.description")}
+        </p>
+        <div className={styles.demo}>
+          <Button
+            style={{
+              background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
+              color: "white",
+              padding: "0 30px",
+              boxShadow: "0 3px 5px 2px rgba(255, 105, 135, .3)",
+            }}
+          >
+            Gradient
+          </Button>
+          <Button
+            style={{
+              border: "2px dashed #1890ff",
+              color: "#1890ff",
+              background: "transparent",
+            }}
+          >
+            Dashed
+          </Button>
+          <Button
+            style={{
+              background: "#13c2c2",
+              color: "white",
+              borderRadius: "24px",
+            }}
+          >
+            Custom
+          </Button>
+        </div>
+        <div className={styles.codeWrapper}>
+          <CodeBlock code={customStylesCode} language="tsx" />
+        </div>
+      </div>
     </div>
   );
 };