From 532d949b44db4e4bffa97fac2562ddc31cdf7e08 Mon Sep 17 00:00:00 2001
From: taga3s <bepozurapu274@gmail.com>
Date: Tue, 15 Oct 2024 20:46:40 +0900
Subject: [PATCH] feat: add certification section

---
 .../history/HistoryCertification.css.ts         | 15 +++++++++++++++
 app/components/history/HistoryCertification.tsx | 17 +++++++++++++++++
 app/components/history/HistoryPresenter.tsx     |  2 ++
 3 files changed, 34 insertions(+)
 create mode 100644 app/components/history/HistoryCertification.css.ts
 create mode 100644 app/components/history/HistoryCertification.tsx

diff --git a/app/components/history/HistoryCertification.css.ts b/app/components/history/HistoryCertification.css.ts
new file mode 100644
index 0000000..6702147
--- /dev/null
+++ b/app/components/history/HistoryCertification.css.ts
@@ -0,0 +1,15 @@
+import { css } from "hono/css";
+
+const certificationList = css`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-top: 32px;
+`;
+
+const certificationListItem = css`
+  display: flex;
+  gap: 16px;
+`;
+
+export { certificationList, certificationListItem };
diff --git a/app/components/history/HistoryCertification.tsx b/app/components/history/HistoryCertification.tsx
new file mode 100644
index 0000000..7b6845a
--- /dev/null
+++ b/app/components/history/HistoryCertification.tsx
@@ -0,0 +1,17 @@
+import { Section } from "../Section";
+import { certificationList, certificationListItem } from "./HistoryCertification.css";
+
+const HistoryCertification = () => {
+  return (
+    <Section title="Certification">
+      <ul class={certificationList}>
+        <li class={certificationListItem}>
+          <span>2024年10月</span>
+          <span>基本情報取得</span>
+        </li>
+      </ul>
+    </Section>
+  );
+};
+
+export { HistoryCertification };
diff --git a/app/components/history/HistoryPresenter.tsx b/app/components/history/HistoryPresenter.tsx
index 2fa4549..dd19d8c 100644
--- a/app/components/history/HistoryPresenter.tsx
+++ b/app/components/history/HistoryPresenter.tsx
@@ -3,6 +3,7 @@ import type { WorkExperience } from "../../api/workExperience";
 import { HistoryEducationalBackground } from "./HistoryEducationalBackground";
 import { presenterLayout } from "./HistoryPresenter.css";
 import { HistoryWorkExperience } from "./HistoryWorkExperience";
+import { HistoryCertification } from "./HistoryCertification";
 
 type Props = {
   workExperiences: WorkExperience[];
@@ -15,6 +16,7 @@ const HistoryPresenter: FC<Props> = (props) => {
     <div class={presenterLayout}>
       <HistoryWorkExperience workExperiences={workExperiences} />
       <HistoryEducationalBackground />
+      <HistoryCertification />
     </div>
   );
 };