From 59951c0c7a9c7aed230d276aeaa362d4c12f8d53 Mon Sep 17 00:00:00 2001
From: taga3s <bepozurapu274@gmail.com>
Date: Wed, 7 Aug 2024 10:12:06 +0900
Subject: [PATCH] fix: history and common css naming

---
 app/components/Footer.css.ts                     |  6 +++---
 app/components/Footer.tsx                        |  6 +++---
 app/components/Header.css.ts                     |  6 +++---
 app/components/Header.tsx                        | 16 ++++++----------
 app/components/{layout => }/Section.css.ts       |  6 ++----
 app/components/{layout => }/Section.tsx          |  6 +++---
 .../history/HistoryEducationalBackground.css.ts  |  6 +++---
 .../history/HistoryEducationalBackground.tsx     |  8 ++++----
 app/components/history/HistoryPresenter.css.ts   |  4 ++--
 app/components/history/HistoryPresenter.tsx      |  4 ++--
 .../history/HistoryWorkExperience.css.ts         |  6 +++---
 app/components/history/HistoryWorkExperience.tsx |  9 ++++-----
 app/components/profile/ProfileLinks.tsx          |  2 +-
 app/components/profile/ProfilePhotos.tsx         |  2 +-
 14 files changed, 40 insertions(+), 47 deletions(-)
 rename app/components/{layout => }/Section.css.ts (52%)
 rename app/components/{layout => }/Section.tsx (69%)

diff --git a/app/components/Footer.css.ts b/app/components/Footer.css.ts
index 416dc85..4abed2f 100644
--- a/app/components/Footer.css.ts
+++ b/app/components/Footer.css.ts
@@ -1,11 +1,11 @@
 import { css } from "hono/css";
 
-const Layout = css`
+const footerLayout = css`
   margin-top: 80px;
 `;
 
-const Content = css`
+const footerContent = css`
   padding: 20px 0;
 `;
 
-export { Layout, Content };
+export { footerLayout, footerContent };
diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx
index 310aa60..828415a 100644
--- a/app/components/Footer.tsx
+++ b/app/components/Footer.tsx
@@ -1,9 +1,9 @@
-import { Content, Layout } from "./Footer.css";
+import { footerContent, footerLayout } from "./Footer.css";
 
 const Footer = () => {
   return (
-    <footer class={Layout}>
-      <div class={Content}>
+    <footer class={footerLayout}>
+      <div class={footerContent}>
         <small>&copy; 2024 taga3s</small>
       </div>
     </footer>
diff --git a/app/components/Header.css.ts b/app/components/Header.css.ts
index 20b79b8..d9f3222 100644
--- a/app/components/Header.css.ts
+++ b/app/components/Header.css.ts
@@ -1,14 +1,14 @@
 import { css } from "hono/css";
 
-const Layout = css`
+const headerContent = css`
   padding: 32px 20px;
   display: flex;
   justify-content: end;
 `;
 
-const Links = css`
+const headerNav = css`
   display: flex;
   gap: 24px;
 `;
 
-export { Layout, Links };
+export { headerContent, headerNav };
diff --git a/app/components/Header.tsx b/app/components/Header.tsx
index 8e892c4..6fc6ee4 100644
--- a/app/components/Header.tsx
+++ b/app/components/Header.tsx
@@ -1,19 +1,15 @@
-import { Layout, Links } from "./Header.css";
+import { headerContent, headerNav } from "./Header.css";
 
 const Header = () => {
   return (
-    <header class={Layout}>
-      <ul class={Links}>
-        <li>
+    <header>
+      <div class={headerContent}>
+        <nav class={headerNav}>
           <a href="/">about me</a>
-        </li>
-        <li>
           <a href="/history">history</a>
-        </li>
-        <li>
           <a href="/works">works</a>
-        </li>
-      </ul>
+        </nav>
+      </div>
     </header>
   );
 };
diff --git a/app/components/layout/Section.css.ts b/app/components/Section.css.ts
similarity index 52%
rename from app/components/layout/Section.css.ts
rename to app/components/Section.css.ts
index 08ad1f6..159b765 100644
--- a/app/components/layout/Section.css.ts
+++ b/app/components/Section.css.ts
@@ -1,10 +1,8 @@
 import { css } from "hono/css";
 
-const Layout = css``;
-
-const Header = css`
+const sectionHeader = css`
   font-size: 24px;
   font-weight: bold;
 `;
 
-export { Layout, Header };
+export { sectionHeader };
diff --git a/app/components/layout/Section.tsx b/app/components/Section.tsx
similarity index 69%
rename from app/components/layout/Section.tsx
rename to app/components/Section.tsx
index a2c588f..69d7033 100644
--- a/app/components/layout/Section.tsx
+++ b/app/components/Section.tsx
@@ -1,5 +1,5 @@
 import type { FC, JSX } from "hono/jsx";
-import { Header, Layout } from "./Section.css";
+import { sectionHeader } from "./Section.css";
 
 type Props = {
   title: string;
@@ -10,8 +10,8 @@ const Section: FC<Props> = (props) => {
   const { title, children } = props;
 
   return (
-    <section class={Layout}>
-      <h2 class={Header}>{title}</h2>
+    <section>
+      <h2 class={sectionHeader}>{title}</h2>
       {children}
     </section>
   );
diff --git a/app/components/history/HistoryEducationalBackground.css.ts b/app/components/history/HistoryEducationalBackground.css.ts
index 1a9da9a..94feaa4 100644
--- a/app/components/history/HistoryEducationalBackground.css.ts
+++ b/app/components/history/HistoryEducationalBackground.css.ts
@@ -1,15 +1,15 @@
 import { css } from "hono/css";
 
-const list = css`
+const educationalBackgroundList = css`
   display: flex;
   flex-direction: column;
   gap: 16px;
   margin-top: 32px;
 `;
 
-const listItem = css`
+const educationalBackgroundListItem = css`
   display: flex;
   gap: 16px;
 `;
 
-export { list, listItem };
+export { educationalBackgroundList, educationalBackgroundListItem };
diff --git a/app/components/history/HistoryEducationalBackground.tsx b/app/components/history/HistoryEducationalBackground.tsx
index db43fdf..9f9314b 100644
--- a/app/components/history/HistoryEducationalBackground.tsx
+++ b/app/components/history/HistoryEducationalBackground.tsx
@@ -1,11 +1,11 @@
-import { Section } from "../layout/Section";
-import { list, listItem } from "./HistoryEducationalBackground.css";
+import { Section } from "../Section";
+import { educationalBackgroundList, educationalBackgroundListItem } from "./HistoryEducationalBackground.css";
 
 const HistoryEducationalBackground = () => {
   return (
     <Section title="Educational background">
-      <ul class={list}>
-        <li class={listItem}>
+      <ul class={educationalBackgroundList}>
+        <li class={educationalBackgroundListItem}>
           <span>2022年4月 - 現在</span>
           <span>早稲田大学法学部在学中</span>
         </li>
diff --git a/app/components/history/HistoryPresenter.css.ts b/app/components/history/HistoryPresenter.css.ts
index e588253..3c4082b 100644
--- a/app/components/history/HistoryPresenter.css.ts
+++ b/app/components/history/HistoryPresenter.css.ts
@@ -1,9 +1,9 @@
 import { css } from "hono/css";
 
-const layout = css`
+const presenterLayout = css`
   display: flex;
   flex-direction: column;
   gap: 48px;
 `;
 
-export { layout };
+export { presenterLayout };
diff --git a/app/components/history/HistoryPresenter.tsx b/app/components/history/HistoryPresenter.tsx
index 338d1b7..e587c3d 100644
--- a/app/components/history/HistoryPresenter.tsx
+++ b/app/components/history/HistoryPresenter.tsx
@@ -1,7 +1,7 @@
 import type { FC } from "hono/jsx";
 import type { WorkExperience } from "../../api/workExperience";
 import { HistoryEducationalBackground } from "./HistoryEducationalBackground";
-import { layout } from "./HistoryPresenter.css";
+import { presenterLayout } from "./HistoryPresenter.css";
 import { HistoryWorkExperience } from "./HistoryWorkExperience";
 
 type Props = {
@@ -12,7 +12,7 @@ const HistoryPresenter: FC<Props> = (props) => {
   const { workExperience } = props;
 
   return (
-    <div class={layout}>
+    <div class={presenterLayout}>
       <HistoryWorkExperience workExperience={workExperience} />
       <HistoryEducationalBackground />
     </div>
diff --git a/app/components/history/HistoryWorkExperience.css.ts b/app/components/history/HistoryWorkExperience.css.ts
index bd291ab..d5181e1 100644
--- a/app/components/history/HistoryWorkExperience.css.ts
+++ b/app/components/history/HistoryWorkExperience.css.ts
@@ -1,17 +1,17 @@
 import { css } from "hono/css";
 
-const list = css`
+const workExperienceList = css`
   display: flex;
   flex-direction: column;
   gap: 16px;
   margin-top: 32px;
 `;
 
-const description = css`
+const workExperienceDescription = css`
   display: flex;
   flex-direction: column;
   gap: 8px;
   padding: 8px;
 `;
 
-export { list, description };
+export { workExperienceList, workExperienceDescription };
diff --git a/app/components/history/HistoryWorkExperience.tsx b/app/components/history/HistoryWorkExperience.tsx
index 66a026f..16fc76c 100644
--- a/app/components/history/HistoryWorkExperience.tsx
+++ b/app/components/history/HistoryWorkExperience.tsx
@@ -1,8 +1,7 @@
 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";
+import { Section } from "../Section";
+import { workExperienceDescription, workExperienceList } from "./HistoryWorkExperience.css";
 
 type Props = {
   workExperience: WorkExperience[];
@@ -13,7 +12,7 @@ const HistoryWorkExperience: FC<Props> = (props) => {
 
   return (
     <Section title="Work experience">
-      <ul class={list}>
+      <ul class={workExperienceList}>
         {workExperience
           .toSorted((a, b) => a.order - b.order)
           .map((item) => (
@@ -22,7 +21,7 @@ const HistoryWorkExperience: FC<Props> = (props) => {
                 <summary>
                   {item.span}: {item.company}
                 </summary>
-                <p class={description}>
+                <p class={workExperienceDescription}>
                   <span>{item.description}</span>
                   <span>使用技術: {item.techStack}</span>
                 </p>
diff --git a/app/components/profile/ProfileLinks.tsx b/app/components/profile/ProfileLinks.tsx
index 9b20fc2..cefb0fc 100644
--- a/app/components/profile/ProfileLinks.tsx
+++ b/app/components/profile/ProfileLinks.tsx
@@ -1,5 +1,5 @@
 import { CosenseIcon, GitHubIcon, QiitaIcon } from "../icons";
-import { Section } from "../layout/Section";
+import { Section } from "../Section";
 import { cosense, github, linkCardContainer, qiita } from "./ProfileLinks.css";
 
 const links = [
diff --git a/app/components/profile/ProfilePhotos.tsx b/app/components/profile/ProfilePhotos.tsx
index 5c09b0a..2507eeb 100644
--- a/app/components/profile/ProfilePhotos.tsx
+++ b/app/components/profile/ProfilePhotos.tsx
@@ -2,7 +2,7 @@ import type { FC } from "hono/jsx";
 import type { Photo } from "../../api/photos";
 import { photoList, photoImage } from "./ProfilePhotos.css";
 import PhotoClickWrapper from "../../islands/PhotoClickWrapper";
-import { Section } from "../layout/Section";
+import { Section } from "../Section";
 
 type Props = {
   photos: Photo[];