refac: add <Section />

app/components/Header.css.ts

@@ -4,11 +4,11 @@ const Layout = css`
   padding: 32px 20px;
   display: flex;
   justify-content: end;
-`
+`;
 
 const Links = css`
   display: flex;
   gap: 24px;
-`
+`;
 
 export { Layout, Links };

app/components/Header.tsx

@@ -16,6 +16,6 @@ const Header = () => {
       </ul>
     </header>
   );
-}
+};
 
 export { Header };

app/components/profile/common.css.ts → app/components/layout/Section.css.ts

@@ -1,8 +1,6 @@
 import { css } from "hono/css";
 
-const Layout = css`
-  margin-top: 48px;
-`;
+const Layout = css``;
 
 const Header = css`
   font-size: 24px;

app/components/layout/Section.tsx

@@ -0,0 +1,20 @@
+import type { FC, JSX } from "hono/jsx";
+import { Header, Layout } from "./Section.css";
+
+type Props = {
+  title: string;
+  children: JSX.HTMLAttributes;
+};
+
+const Section: FC<Props> = (props) => {
+  const { title, children } = props;
+
+  return (
+    <section class={Layout}>
+      <h2 class={Header}>{title}</h2>
+      {children}
+    </section>
+  );
+};
+
+export { Section };

app/components/profile/ProfileLinks.tsx

@@ -1,5 +1,5 @@
 import { CosenseIcon, GitHubIcon, QiitaIcon } from "../icons";
-import { Layout, Header } from "./common.css";
+import { Section } from "../layout/Section";
 import { Cosense, GitHub, LinkCard_Container, Qiita } from "./ProfileLinks.css";
 
 const links = [
@@ -25,16 +25,15 @@ const links = [
 
 const ProfileLinks = () => {
   return (
-    <section class={Layout}>
-      <h2 class={Header}>Links</h2>
+    <Section title="Links">
       <div class={LinkCard_Container}>
         {links.map((link) => (
           <a href={link.url} class={link.style} key={link.title}>
             <div>{link.icon}</div>
           </a>
         ))}
       </div>
-    </section>
+    </Section>
   );
 };
 

app/components/profile/ProfileMain.tsx

@@ -7,7 +7,6 @@ const ProfileMain = () => {
         <div class={Main_Box}>
           <span class={Main_Name}>Seiya Tagami / taga3s</span>
           <ul class={Main_Belonging}>
-            <li>早稲田大学法学部3年</li>
             <li>Web Developer (Long-term internship)</li>
           </ul>
         </div>

app/components/profile/ProfilePhotos.tsx

@@ -1,17 +1,16 @@
 import type { FC } from "hono/jsx";
 import type { Photo } from "../../api/photos";
-import { Header, Layout } from "./common.css";
 import { Photo_Container, Photo_Image } from "./ProfilePhotos.css";
 import PhotoClickWrapper from "../../islands/PhotoClickWrapper";
+import { Section } from "../layout/Section";
 
 type Props = {
   photos: Photo[];
 };
 
 const ProfilePhotos: FC<Props> = (props) => {
   return (
-    <section class={Layout}>
-      <h2 class={Header}>Favorites</h2>
+    <Section title="Favorites">
       <ul class={Photo_Container}>
         {props.photos.map((image) => (
           <li key={image.title}>
@@ -21,7 +20,7 @@ const ProfilePhotos: FC<Props> = (props) => {
           </li>
         ))}
       </ul>
-    </section>
+    </Section>
   );
 };
 

app/components/profile/ProfilePresenter.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/profile/ProfilePresenter.tsx

@@ -3,17 +3,18 @@ import { ProfileLinks } from "./ProfileLinks";
 import { ProfileMain } from "./ProfileMain";
 import type { Photo } from "../../api/photos/model";
 import { ProfilePhotos } from "./ProfilePhotos";
+import { Layout } from "./ProfilePresenter.css";
 
 type Props = {
   photos: Photo[];
 };
 
 const ProfilePresenter: FC<Props> = (props) => (
-  <>
+  <div class={Layout}>
     <ProfileMain />
     <ProfileLinks />
     <ProfilePhotos photos={props.photos} />
-  </>
+  </div>
 );
 
 export { ProfilePresenter };

app/routes/works.tsx

@@ -1,5 +1,5 @@
 import { createRoute } from "honox/factory";
 
 export default createRoute(async (c) => {
-  return c.render(<div>随時掲載...</div>)
+  return c.render(<div>随時掲載...</div>);
 });