fix: history and common css naming

taga3s · Aug 7, 2024 · 59951c0 · 59951c0
1 parent 1b83cf0
commit 59951c0
Show file tree

Hide file tree

Showing 14 changed files with 40 additions and 47 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 → app/components/Section.css.ts b/app/components/layout/Section.css.ts → 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 → app/components/Section.tsx b/app/components/layout/Section.tsx → 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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[];