fix: profile css naming

taga3s · Aug 7, 2024 · 1b83cf0 · 1b83cf0
1 parent 8b51a0c
commit 1b83cf0
Show file tree

Hide file tree

Showing 8 changed files with 38 additions and 38 deletions.
diff --git a/app/components/profile/ProfileLinks.css.ts b/app/components/profile/ProfileLinks.css.ts
@@ -1,6 +1,6 @@
 import { css } from "hono/css";
 
-const LinkCard_Container = css`
+const linkCardContainer = css`
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
@@ -11,30 +11,30 @@ const LinkCard_Container = css`
   }
 `;
 
-const LinkCard = css`
+const linkCard = css`
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100px;
   border-radius: 8px;
 `;
 
-const GitHub = css`
-  ${LinkCard}
+const github = css`
+  ${linkCard}
   background: rgb(205,188,255);
   background: linear-gradient(90deg, rgba(205,188,255,0.4515931372549019) -27%, rgba(92,80,118,1) 0%, rgba(116,84,205,1) 0%, rgba(118,83,196,1) 0%, rgba(129,92,200,1) 0%, rgba(46,47,62,0.9137780112044818) 0%, rgba(198,195,209,0.8521533613445378) 100%, rgba(230,14,221,1) 100%, rgba(237,235,246,1) 100%, rgba(0,0,82,1) 100%, rgba(3,1,9,0.4515931372549019) 100%);
 `;
 
-const Qiita = css`
-  ${LinkCard}
+const qiita = css`
+  ${linkCard}
   background: rgb(205,188,255);
   background: linear-gradient(90deg, rgba(205,188,255,0.4515931372549019) -27%, rgba(92,80,118,1) 0%, rgba(116,84,205,1) 0%, rgba(118,83,196,1) 0%, rgba(92,200,121,1) 0%, rgba(25,230,34,0.4515931372549019) 100%, rgba(106,217,191,0.9249824929971989) 100%, rgba(198,195,209,0.8521533613445378) 100%, rgba(230,14,221,1) 100%, rgba(237,235,246,1) 100%, rgba(0,0,82,1) 100%);
 `;
 
-const Cosense = css`
-  ${LinkCard}
+const cosense = css`
+  ${linkCard}
   background: rgb(2,0,36);
 background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(208,108,7,1) 0%, rgba(194,156,24,1) 0%, rgba(187,180,32,1) 40%, rgba(0,212,255,1) 100%);
 `;
 
-export { LinkCard_Container, LinkCard, GitHub, Qiita, Cosense };
+export { linkCardContainer, linkCard, github, qiita, cosense };
diff --git a/app/components/profile/ProfileLinks.tsx b/app/components/profile/ProfileLinks.tsx
@@ -1,32 +1,32 @@
 import { CosenseIcon, GitHubIcon, QiitaIcon } from "../icons";
 import { Section } from "../layout/Section";
-import { Cosense, GitHub, LinkCard_Container, Qiita } from "./ProfileLinks.css";
+import { cosense, github, linkCardContainer, qiita } from "./ProfileLinks.css";
 
 const links = [
   {
     title: "GitHub",
     url: "https://github.com/taga3s",
-    style: GitHub,
+    style: github,
     icon: <GitHubIcon />,
   },
   {
     title: "Cosense",
     url: "https://scrapbox.io/t33s-dev/",
-    style: Cosense,
+    style: cosense,
     icon: <CosenseIcon />,
   },
   {
     title: "Qiita",
     url: "https://qiita.com/t33s_dev",
-    style: Qiita,
+    style: qiita,
     icon: <QiitaIcon />,
   },
 ];
 
 const ProfileLinks = () => {
   return (
     <Section title="Links">
-      <div class={LinkCard_Container}>
+      <div class={linkCardContainer}>
         {links.map((link) => (
           <a href={link.url} class={link.style} key={link.title}>
             <div>{link.icon}</div>

diff --git a/app/components/profile/ProfileMain.css.ts b/app/components/profile/ProfileMain.css.ts
@@ -1,18 +1,18 @@
 import { css } from "hono/css";
 
-const Main = css`
+const main = css`
   display: flex;
   justify-content: space-between;
   align-items: center;
 `;
 
-const Main_Box = css`
+const mainBox = css`
   display: flex;
   flex-direction: column;
   gap: 12px;
 `;
 
-const Main_Image = css`
+const mainImage = css`
   width: 100px;
   height: 100px;
   border-radius: 12px;
@@ -23,24 +23,24 @@ const Main_Image = css`
   }
 `;
 
-const Main_Name = css`
+const mainName = css`
   font-size: 28px;
   font-weight: bold;
 `;
 
-const Main_Belonging = css`
+const mainBelonging = css`
   display: flex;
   flex-direction: column;
   gap: 8px;
   font-size: 16px;
 `;
 
-const Introduction = css`
+const mainIntroduction = css`
   display: flex;
   flex-direction: column;
   gap: 16px;
   margin-top: 32px;
   font-size: 16px;
 `;
 
-export { Main, Main_Box, Main_Image, Main_Name, Main_Belonging, Introduction };
+export { main, mainBox, mainImage, mainName, mainBelonging, mainIntroduction };
diff --git a/app/components/profile/ProfileMain.tsx b/app/components/profile/ProfileMain.tsx
@@ -1,20 +1,20 @@
-import { Main, Main_Belonging, Main_Box, Main_Image, Main_Name, Introduction } from "./ProfileMain.css";
+import { main, mainBelonging, mainBox, mainImage, mainIntroduction, mainName } from "./ProfileMain.css";
 
 const ProfileMain = () => {
   return (
     <section>
-      <div class={Main}>
-        <div class={Main_Box}>
-          <span class={Main_Name}>Seiya Tagami / taga3s</span>
-          <ul class={Main_Belonging}>
+      <div class={main}>
+        <div class={mainBox}>
+          <span class={mainName}>Seiya Tagami / taga3s</span>
+          <ul class={mainBelonging}>
             <li>Web Developer (working as an intern)</li>
           </ul>
         </div>
         <div>
-          <img class={Main_Image} src="https://github.com/taga3s.png" alt="me" />
+          <img class={mainImage} src="https://github.com/taga3s.png" alt="me" />
         </div>
       </div>
-      <ul class={Introduction}>
+      <ul class={mainIntroduction}>
         <li>🛠️ 趣味やインターンでコードを書いています。</li>
         <li>🐳 Web、法律、ラーメンと...</li>
         <li>🤖 アニメ/漫画やゲームが好きです。</li>

diff --git a/app/components/profile/ProfilePhotos.css.ts b/app/components/profile/ProfilePhotos.css.ts
@@ -1,15 +1,15 @@
 import { css } from "hono/css";
 
-const Photo_Container = css`
+const photoList = css`
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
   margin-top: 16px;
 `;
 
-const Photo_Image = css`
+const photoImage = css`
   max-width: 100%;
   border-radius: 8px;
 `;
 
-export { Photo_Container, Photo_Image };
+export { photoList, photoImage };
diff --git a/app/components/profile/ProfilePhotos.tsx b/app/components/profile/ProfilePhotos.tsx
@@ -1,6 +1,6 @@
 import type { FC } from "hono/jsx";
 import type { Photo } from "../../api/photos";
-import { Photo_Container, Photo_Image } from "./ProfilePhotos.css";
+import { photoList, photoImage } from "./ProfilePhotos.css";
 import PhotoClickWrapper from "../../islands/PhotoClickWrapper";
 import { Section } from "../layout/Section";
 
@@ -11,11 +11,11 @@ type Props = {
 const ProfilePhotos: FC<Props> = (props) => {
   return (
     <Section title="Favorites">
-      <ul class={Photo_Container}>
+      <ul class={photoList}>
         {props.photos.map((image) => (
           <li key={image.title}>
             <PhotoClickWrapper imageUrl={image.url} imageAlt={image.title}>
-              <img src={image.url} alt={image.title} class={Photo_Image} />
+              <img src={image.url} alt={image.title} class={photoImage} />
             </PhotoClickWrapper>
           </li>
         ))}

diff --git a/app/components/profile/ProfilePresenter.css.ts b/app/components/profile/ProfilePresenter.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/profile/ProfilePresenter.tsx b/app/components/profile/ProfilePresenter.tsx
@@ -3,14 +3,14 @@ import { ProfileLinks } from "./ProfileLinks";
 import { ProfileMain } from "./ProfileMain";
 import type { Photo } from "../../api/photos/model";
 import { ProfilePhotos } from "./ProfilePhotos";
-import { Layout } from "./ProfilePresenter.css";
+import { presenterLayout } from "./ProfilePresenter.css";
 
 type Props = {
   photos: Photo[];
 };
 
 const ProfilePresenter: FC<Props> = (props) => (
-  <div class={Layout}>
+  <div class={presenterLayout}>
     <ProfileMain />
     <ProfileLinks />
     <ProfilePhotos photos={props.photos} />