docs: add ClassNameTable for some component docs.

- created ClassNameTable component for docs website.

apps/website/components/ClassNameTable.tsx

@@ -0,0 +1,38 @@
+import { useRouter } from 'next/router';
+import React from 'react';
+import i18n from '../util/i18next';
+
+interface Props {
+  className?: string;
+  component: string;
+}
+
+export const ClassNameTable = ({ className = '', component }: Props) => {
+  const { locale } = useRouter();
+  const t = (k: string) => i18n.t(k, { ns: 'classNameTable', lng: locale });
+
+  const classNames = i18n.t(`component.${component}`, { ns: 'classNameTable', lng: locale, returnObjects: true });
+
+  return (
+    <>
+      <div className={`${className} py-2`}>
+        <table className="table bw bordered">
+          <thead>
+            <tr>
+              <th>{t('header.className')}</th>
+              <th>{t('header.description')}</th>
+            </tr>
+          </thead>
+          <tbody>
+            {Object.entries(classNames).map(([name, description]) => (
+              <tr>
+                <th>{name}</th>
+                <td>{description}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </>
+  );
+};

apps/website/locales/en/classNameTable.json

@@ -0,0 +1,28 @@
+{
+  "header": {
+    "className": "Class Name",
+    "description": "Description"
+  },
+  "component": {
+    "accordion": {
+      "accordion-group": "Wrapper htmlFor accordion group",
+      "accordion": "Wrapper htmlFor the title and content",
+      "bordered": "Set Bordered Style",
+      "toggle": "Toggle htmlFor accordion",
+      "title": "Title section of the accordion",
+      "content": "Content section of the accordion",
+      "open": "The accordion will be opened by default"
+    },
+    "avatar": {
+      "avatar": "Wrapper htmlFor avatar img",
+      "square": "Set square shape(default: circle)",
+      "ring": "Set ring style",
+      "avatar-group": "Wrapper htmlFor avatar group",
+      "xs": "Set extra small size",
+      "sm": "Set small size",
+      "md": "Set medium size",
+      "lg": "Set large size",
+      "xl": "Set extra large size"
+    }
+  }
+}

apps/website/locales/zh/classNameTable.json

@@ -0,0 +1,28 @@
+{
+  "header": {
+    "className": "类名",
+    "description": "描述"
+  },
+  "component": {
+    "accordion": {
+      "accordion-group": "用于手风琴组的包装",
+      "accordion": "用于手风琴项目的包装",
+      "bordered": "设置带边框样式",
+      "toggle": "设置手风琴触发器",
+      "title": "手风琴项目标题",
+      "content": "手风琴项目隐藏的内容",
+      "open": "设置手风琴项目默认开启"
+    },
+    "avatar": {
+      "avatar": "用于头像 img 的包装",
+      "square": "设置方形（默认为圆形）",
+      "ring": "设置外环样式",
+      "avatar-group": "用于头像组的包装",
+      "xs": "设置超小尺寸",
+      "sm": "设置较小尺寸",
+      "md": "设置中等尺寸",
+      "lg": "设置较大尺寸",
+      "xl": "设置超大尺寸"
+    }
+  }
+}

apps/website/pages/docs/components/accordion.en.mdx

@@ -1,4 +1,5 @@
 import { CodeDemo } from '../../../components/demo/code';
+import { ClassNameTable } from '../../../components/ClassNameTable.tsx';
 
 # Accordion
 
@@ -119,3 +120,7 @@ import { CodeDemo } from '../../../components/demo/code';
     </div>
   </div>
 </CodeDemo>
+
+## Classes
+
+<ClassNameTable component="accordion" />

apps/website/pages/docs/components/accordion.zh.mdx

@@ -1,4 +1,5 @@
 import { CodeDemo } from '../../../components/demo/code';
+import { ClassNameTable } from '../../../components/ClassNameTable.tsx';
 
 # 手风琴
 
@@ -111,3 +112,7 @@ import { CodeDemo } from '../../../components/demo/code';
     </div>
   </div>
 </CodeDemo>
+
+## 类名表
+
+<ClassNameTable component="accordion" />

apps/website/pages/docs/components/avatar.en.mdx

@@ -1,3 +1,4 @@
+import { ClassNameTable } from '../../../components/ClassNameTable.tsx';
 import { CodeDemo } from '../../../components/demo/code';
 
 # Avatar
@@ -76,3 +77,7 @@ import { CodeDemo } from '../../../components/demo/code';
     </div>
   </div>
 </CodeDemo>
+
+## Classes
+
+<ClassNameTable component="avatar" />

apps/website/pages/docs/components/avatar.zh.mdx

@@ -1,3 +1,4 @@
+import { ClassNameTable } from '../../../components/ClassNameTable.tsx';
 import { CodeDemo } from '../../../components/demo/code';
 
 # 头像
@@ -76,3 +77,7 @@ import { CodeDemo } from '../../../components/demo/code';
     </div>
   </div>
 </CodeDemo>
+
+## 类名表
+
+<ClassNameTable component="avatar" />

apps/website/util/i18next.ts

@@ -3,7 +3,7 @@ import { initReactI18next } from 'react-i18next';
 
 export const SUPPORTED_LANGUAGES = ['en', 'zh'] as const;
 export type SUPPORTED_LANGUAGE = (typeof SUPPORTED_LANGUAGES)[number];
-export const NAMESPACES = ['common', 'home', 'demo'];
+export const NAMESPACES = ['common', 'home', 'demo', 'classNameTable'];
 
 const getResource = () => {
   const ret: Resource = {};
@@ -37,5 +37,6 @@ i18n
       transKeepBasicHtmlNodesFor: ['br', 'u', 'strong', 'i'],
       useSuspense: false,
     },
+    returnObjects: true,
   });
 export default i18n;