From 67c590c46f3a29795308098e9c6d0fa1da53e805 Mon Sep 17 00:00:00 2001
From: Fushihara <1039534+fushihara@users.noreply.github.com>
Date: Sat, 28 Sep 2024 18:33:11 +0900
Subject: =?UTF-8?q?=E3=83=86=E3=83=BC=E3=83=96=E3=83=AB=E4=BD=9C=E6=88=90?=
 =?UTF-8?q?=E3=81=AE=E5=87=A6=E7=90=86=E3=82=92=E5=88=87=E3=82=8A=E5=87=BA?=
 =?UTF-8?q?=E3=81=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/_components/tableElements.tsx | 44 +++++++++++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 src/app/_components/tableElements.tsx

(limited to 'src/app/_components/tableElements.tsx')

diff --git a/src/app/_components/tableElements.tsx b/src/app/_components/tableElements.tsx
new file mode 100644
index 0000000..1051048
--- /dev/null
+++ b/src/app/_components/tableElements.tsx
@@ -0,0 +1,44 @@
+type MainOption = {
+  header: {
+    label: string,
+  }[]
+};
+export function TableElement(mainOption: MainOption, bodyList: { element: JSX.Element }[][]) {
+  if (mainOption.header.length <= 0) {
+    throw new Error(`カラムの数は1以上にして下さい`);
+  }
+  const headerElementList: JSX.Element[] = [];
+  for (const h of mainOption.header) {
+    const index = mainOption.header.indexOf(h);
+    headerElementList.push(
+      <th scope="col" className="px-6 py-4 text-left" key={`th-${index}`}>{h.label}</th>
+    );
+  }
+  const bodyElementList: JSX.Element[] = [];
+  let trIndex = 0;
+  for (const body of bodyList) {
+    const tdElementList: JSX.Element[] = [];
+    for (let i = 0; i < mainOption.header.length; i++) {
+      const tdBody: { element: JSX.Element } = body[i];
+      tdElementList.push(<td className="px-1 py-1" key={`td-${i}`}>{tdBody.element}</td>);
+    }
+    bodyElementList.push(
+      <tr className="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100 text-sm text-gray-900 font-light" key={`tr-${trIndex}`}>
+        {tdElementList}
+      </tr>
+    );
+    trIndex += 1;
+  }
+  return (
+    <table className="w-full">
+      <thead className="bg-white border-b sticky top-0 text-md font-medium text-gray-900">
+        <tr>
+          {headerElementList}
+        </tr>
+      </thead>
+      <tbody className="">
+        {bodyElementList}
+      </tbody>
+    </table>
+  );
+}
-- 
cgit v1.2.3