added translation function to component component (#2708)

* feat: added some Chinese translations

* feat: added translation function to component component

src/docs/src/components/Component.svelte

@@ -2,6 +2,7 @@
   import { onMount } from "svelte"
   import Translate from "$components/Translate.svelte"
   import { htmlToJsx, linkProcess } from "$lib/actions"
+  import { t } from "$lib/i18n"
   let Prism
   onMount(async () => {
     Prism = (await import("./Prism.svelte")).default
@@ -50,12 +51,12 @@
   {#if title}
     <div class="pb-2 text-sm font-bold">
       <a class="opacity-20 hover:opacity-60" href={`#${titleStr}`}>#</a>
-      <span class="component-preview-title">{title}</span>
+      <span class="component-preview-title">{$t(title)}</span>
     </div>
   {/if}
   {#if desc}
     <div class="pb-2 text-xs opacity-70">
-      {desc}
+      {$t(desc)}
     </div>
   {/if}
   <div class="grid">

src/docs/src/translation/zh_hans.json

@@ -469,5 +469,25 @@
   "Use daisyUI from CDN": "使用 daisyUI CDN",
   "How to use daisyUI from a CDN?": "如何使用 daisyUI CDN？",
   "etc.": "等等。",
-  "": ""
+  "Buttons with brand colors": "按钮类型和颜色",
+  "Active buttons": "活动按钮",
+  "Buttons with state colors": "不同的状态对应的按钮颜色",
+  "Outline buttons": "边框按钮",
+  "Outline buttons with state colors": "不同的状态对应的边框按钮颜色",
+  "Button sizes": "按钮尺寸",
+  "Responsive button": "响应式按钮",
+  "This button will have different sizes on different browser viewpoints": "这个按钮在不同的浏览器视图中会有不同的大小。",
+  "Wide button": "宽按钮",
+  "Glass button": "玻璃效果",
+  "Buttons with different HTML tags": "Button可以用不同的HTML标签实现",
+  "You can use `btn` class on <button>, <input>, <a>, etc...": "你可以在<button>，<input>，<a>等元素上使用“btn”类...",
+  "Disabled buttons": "禁用状态",
+  "Square button": "矩形圆角按钮",
+  "Circle button": "圆形按钮",
+  "Icon at start": "图标按钮（图标在前）",
+  "Icon at end": "图标按钮（图标在后）",
+  "Button block": "Block 按钮",
+  "Button with loading spinner": "加载状态按钮",
+  "Button with loading spinner and text": "加载状态并带有文案按钮",
+  "Button without click animation": "没有点击动画的按钮"
 }