feat: add history page

app/api/workExperience/fetch.ts

@@ -0,0 +1,25 @@
+import type { Context } from "hono";
+import apiClient from "../apiClient";
+
+type Response = {
+  contents: {
+    id: string;
+    span: string;
+    company: string;
+    description: string;
+    techStack: string;
+    order: number;
+  }[];
+  totalCount: number;
+  offset: number;
+  limit: number;
+};
+
+const fetchWorkExperience = async (c: Context) => {
+  const res = await apiClient.GET<Response>(c, "/work-experience");
+  return res.contents.map((content) => {
+    return { ...content };
+  });
+};
+
+export { fetchWorkExperience };

app/api/workExperience/index.ts

@@ -0,0 +1,2 @@
+export * from "./fetch";
+export * from "./model";

app/api/workExperience/model.ts

@@ -0,0 +1,9 @@
+type WorkExperience = {
+  span: string;
+  company: string;
+  description: string;
+  techStack: string;
+  order: number;
+};
+
+export type { WorkExperience };

app/components/history/HistoryEducationalBackground.css.ts

@@ -0,0 +1,15 @@
+import { css } from "hono/css";
+
+const list = css`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-top: 32px;
+`;
+
+const listItem = css`
+  display: flex;
+  gap: 16px;
+`;
+
+export { list, listItem };

app/components/history/HistoryEducationalBackground.tsx

@@ -0,0 +1,17 @@
+import { Section } from "../layout/Section";
+import { list, listItem } from "./HistoryEducationalBackground.css";
+
+const HistoryEducationalBackground = () => {
+  return (
+    <Section title="Educational background">
+      <ul class={list}>
+        <li class={listItem}>
+          <span>2022年4月 - 現在</span>
+          <span>早稲田大学法学部在学中</span>
+        </li>
+      </ul>
+    </Section>
+  );
+};
+
+export { HistoryEducationalBackground };

app/components/history/HistoryPresenter.css.ts

@@ -0,0 +1,9 @@
+import { css } from "hono/css";
+
+const layout = css`
+  display: flex;
+  flex-direction: column;
+  gap: 48px;
+`;
+
+export { layout };

app/components/history/HistoryPresenter.tsx

@@ -0,0 +1,22 @@
+import type { FC } from "hono/jsx";
+import type { WorkExperience } from "../../api/workExperience";
+import { HistoryEducationalBackground } from "./HistoryEducationalBackground";
+import { layout } from "./HistoryPresenter.css";
+import { HistoryWorkExperience } from "./HistoryWorkExperience";
+
+type Props = {
+  workExperience: WorkExperience[];
+};
+
+const HistoryPresenter: FC<Props> = (props) => {
+  const { workExperience } = props;
+
+  return (
+    <div class={layout}>
+      <HistoryWorkExperience workExperience={workExperience} />
+      <HistoryEducationalBackground />
+    </div>
+  );
+};
+
+export { HistoryPresenter };

app/components/history/HistoryWorkExperience.css.ts

@@ -0,0 +1,17 @@
+import { css } from "hono/css";
+
+const list = css`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-top: 32px;
+`;
+
+const description = css`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 8px;
+`;
+
+export { list, description };

app/components/history/HistoryWorkExperience.tsx

@@ -0,0 +1,37 @@
+import type { FC } from "hono/jsx";
+import type { WorkExperience } from "../../api/workExperience";
+import { Section } from "../layout/Section";
+import { list } from "./HistoryEducationalBackground.css";
+import { description } from "./HistoryWorkExperience.css";
+
+type Props = {
+  workExperience: WorkExperience[];
+};
+
+const HistoryWorkExperience: FC<Props> = (props) => {
+  const { workExperience } = props;
+
+  return (
+    <Section title="Work experience">
+      <ul class={list}>
+        {workExperience
+          .toSorted((a, b) => a.order - b.order)
+          .map((item) => (
+            <li key={item.company}>
+              <details>
+                <summary>
+                  {item.span}: {item.company}
+                </summary>
+                <p class={description}>
+                  <span>{item.description}</span>
+                  <span>使用技術: {item.techStack}</span>
+                </p>
+              </details>
+            </li>
+          ))}
+      </ul>
+    </Section>
+  );
+};
+
+export { HistoryWorkExperience };

app/routes/history.tsx

@@ -1,5 +1,8 @@
 import { createRoute } from "honox/factory";
+import { HistoryPresenter } from "../components/history/HistoryPresenter";
+import { fetchWorkExperience } from "../api/workExperience";
 
 export default createRoute(async (c) => {
-  return c.render(<div>history</div>)
+  const workExperience = await fetchWorkExperience(c);
+  return c.render(<HistoryPresenter workExperience={workExperience} />);
 });