Heading要素をleft寄せできるように

visionary-japan · Mar 31, 2024 · ea774ed · ea774ed
1 parent d9f1576
commit ea774ed
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 10 deletions.
diff --git a/src/components/heading/H1.tsx b/src/components/heading/H1.tsx
@@ -7,13 +7,15 @@ const styles = stylex.create({
         fontSize: '4em',
         lineHeight: 1.5,
         margin: 0,
+    },
+    left: {
         width: '100%',
         textAlign: 'left',
     },
 });
 
-const Component: FC<Props> = ({ children, ...attrs }) => (
-    <h1 {...attrs} {...stylex.props(styles.base)}>
+const Component: FC<Props> = ({ isLeft, children, ...attrs }) => (
+    <h1 {...attrs} {...stylex.props(styles.base, isLeft && styles.left)}>
         {children}
     </h1>
 );

diff --git a/src/components/heading/H2.tsx b/src/components/heading/H2.tsx
@@ -7,13 +7,15 @@ const styles = stylex.create({
         fontSize: '2em',
         lineHeight: 1.5,
         margin: 0,
+    },
+    left: {
         width: '100%',
         textAlign: 'left',
     },
 });
 
-const Component: FC<Props> = ({ children, ...attrs }) => (
-    <h2 {...attrs} {...stylex.props(styles.base)}>
+const Component: FC<Props> = ({ isLeft, children, ...attrs }) => (
+    <h2 {...attrs} {...stylex.props(styles.base, isLeft && styles.left)}>
         {children}
     </h2>
 );

diff --git a/src/components/heading/H3.tsx b/src/components/heading/H3.tsx
@@ -7,13 +7,15 @@ const styles = stylex.create({
         fontSize: '1.5em',
         lineHeight: 1,
         margin: 0,
+    },
+    left: {
         width: '100%',
         textAlign: 'left',
     },
 });
 
-const Component: FC<Props> = ({ children, ...attrs }) => (
-    <h3 {...attrs} {...stylex.props(styles.base)}>
+const Component: FC<Props> = ({ isLeft, children, ...attrs }) => (
+    <h3 {...attrs} {...stylex.props(styles.base, isLeft && styles.left)}>
         {children}
     </h3>
 );

diff --git a/src/components/heading/index.d.ts b/src/components/heading/index.d.ts
@@ -1,3 +1,5 @@
 import type { HTMLAttributes } from 'react';
 
-export interface Props extends HTMLAttributes<HTMLHeadingElement> {}
+export interface Props extends HTMLAttributes<HTMLHeadingElement> {
+    isLeft?: boolean;
+}
diff --git a/src/components/link/LinkIndex.tsx b/src/components/link/LinkIndex.tsx
@@ -28,7 +28,7 @@ const Component: FC<Props> = props => {
         case '/dnd':
             return (
                 <>
-                    <H1>DnD Index</H1>
+                    <H1>DnD</H1>
                     <Dnd />
                 </>
             );

diff --git a/src/pages/Public.tsx b/src/pages/Public.tsx
@@ -15,12 +15,12 @@ const Component: FC = () => {
 
     return (
         <>
-            <H1>JS: window.configs</H1>
+            <H1 isLeft>JS: window.configs</H1>
             {windowConfigs &&
                 Object.keys(windowConfigs).map(key => (
                     <div key={key}>{windowConfigs?.[key]?.keyString}</div>
                 ))}
-            <H1>JSON: FETCH</H1>
+            <H1 isLeft>JSON: FETCH</H1>
             {json &&
                 Object.keys(json).map(key =>
                     json?.[key]?.map(val => (

diff --git a/src/pages/Query.tsx b/src/pages/Query.tsx
@@ -2,6 +2,7 @@ import * as stylex from '@stylexjs/stylex';
 import { type FC, memo } from 'react';
 import { ButtonVite } from '../components/button/ButtonVite';
 import { useQuery } from '../hooks/useQuery';
+import { H1 } from '../components/heading/H1';
 
 const styles = stylex.create({
     base: {
@@ -16,6 +17,7 @@ const Component: FC = () => {
 
     return (
         <>
+            <H1>Query</H1>
             <ul>
                 <li>str: &quot;{str}&quot;</li>
                 <li>num: {num}</li>