コールアウト表をジェネレーターのページに表示するように

DekoKiyo · Sep 16, 2024 · e63c406 · e63c406
1 parent d42aa9d
commit e63c406
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 24 deletions.
diff --git a/web/src/pages/Callouts.tsx b/web/src/pages/Callouts.tsx
@@ -11,30 +11,7 @@ export const Callouts = () => {
     <div className="mainContent">
       <h1>{t('callouts.title')}</h1>
       <p>{<Trans i18nKey="callouts.intro" values={{ count: CalloutsData.length }} />}</p>
-      <table>
-        <thead>
-          <tr>
-            <th>{t('callouts.callout-name')}</th>
-            <th>{t('callouts.added-version')}</th>
-            <th>{t('callouts.updated-version')}</th>
-          </tr>
-        </thead>
-        <tbody>
-          {CalloutsData.map((callout) => {
-            return createElement(
-              'tr',
-              { key: callout.name },
-              createElement(
-                'td',
-                { align: 'center' },
-                <Link to={callout.link}>{t(callout.name)}</Link>
-              ),
-              createElement('td', { align: 'center' }, callout.addedVersion),
-              createElement('td', { align: 'center' }, callout.updatedVersion)
-            );
-          })}
-        </tbody>
-      </table>
+      {CalloutsTable()}
     </div>
   );
 };
@@ -96,3 +73,40 @@ export const CalloutsBase = (prop: CalloutProps) => {
     </div>
   );
 };
+
+export const CalloutsTable = () => {
+  const { t } = useTranslation();
+
+  return (
+    <table>
+      <thead>
+        <tr>
+          <th>{t('callouts.callout-name')}</th>
+          <th>{t('callouts.added-version')}</th>
+          <th>{t('callouts.updated-version')}</th>
+          <th>{t('callouts.generator-page')}</th>
+        </tr>
+      </thead>
+      <tbody>
+        {CalloutsData.map((callout) => {
+          return createElement(
+            'tr',
+            { key: callout.name },
+            createElement(
+              'td',
+              { align: 'center' },
+              <Link to={callout.link}>{t(callout.name)}</Link>
+            ),
+            createElement('td', { align: 'center' }, callout.addedVersion),
+            createElement('td', { align: 'center' }, callout.updatedVersion),
+            createElement(
+              'td',
+              { align: 'center' },
+              <Link to={'/generators' + callout.link}>{t(callout.name)}</Link>
+            )
+          );
+        })}
+      </tbody>
+    </table>
+  );
+};
diff --git a/web/src/pages/Generators.tsx b/web/src/pages/Generators.tsx
@@ -1,12 +1,14 @@
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
+import { CalloutsTable } from './Callouts';
 
 const Generators = () => {
   const { t } = useTranslation();
 
   return (
     <div className="mainContent">
       <h1>{t('generators.title')}</h1>
+      <h2>{t('generators.objects')}</h2>
       <table>
         <tbody>
           <tr>
@@ -25,6 +27,8 @@ const Generators = () => {
           </tr>
         </tbody>
       </table>
+      <h2>{t('generators.callouts')}</h2>
+      {CalloutsTable()}
     </div>
   );
 };