From 4e469918a45c43bb70a51591f0cfd398813b854e Mon Sep 17 00:00:00 2001
From: keitakn <keita.koga.work@gmail.com>
Date: Sat, 24 Aug 2024 02:27:46 +0900
Subject: [PATCH] =?UTF-8?q?:art:=20#303=20style=20=E3=82=92=E7=9B=B4?=
 =?UTF-8?q?=E6=8E=A5=E6=B8=A1=E3=81=99=E3=81=AE=E3=81=AF=20Tailwind=20CSS?=
 =?UTF-8?q?=20=E3=81=AE=E3=82=AF=E3=83=A9=E3=82=B9=E3=81=A8=E7=AB=B6?=
 =?UTF-8?q?=E5=90=88=E3=81=99=E3=82=8B=E3=81=AE=E3=81=A7=E3=82=AF=E3=83=A9?=
 =?UTF-8?q?=E3=82=B9=E5=90=8D=E3=82=92=E5=8F=97=E3=81=91=E5=8F=96=E3=82=8B?=
 =?UTF-8?q?Style=E3=81=AB=E5=A4=89=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/_components/IconButton.stories.tsx | 14 ++++++++------
 src/app/_components/IconButton.tsx         |  9 ++++-----
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/app/_components/IconButton.stories.tsx b/src/app/_components/IconButton.stories.tsx
index 93260cb..7e06a9a 100644
--- a/src/app/_components/IconButton.stories.tsx
+++ b/src/app/_components/IconButton.stories.tsx
@@ -9,6 +9,8 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+const responsiveWidthClass = 'w-[220px] sm:w-[240px]';
+
 export const Default: Story = {
   args: {
     type: 'button',
@@ -38,7 +40,7 @@ export const WithRepeatIcon: Story = {
     type: 'button',
     displayText: 'ランダムコピー',
     showRepeatIcon: true,
-    style: { width: '240px' },
+    className: responsiveWidthClass,
   },
 };
 
@@ -48,7 +50,7 @@ export const WithRepeatIconPressed: Story = {
     displayText: 'ランダムコピー',
     showRepeatIcon: true,
     isPressed: true,
-    style: { width: '240px' },
+    className: responsiveWidthClass,
   },
 };
 
@@ -57,7 +59,7 @@ export const WithRandomIcon: Story = {
     type: 'button',
     displayText: 'ねこリフレッシュ',
     showRandomIcon: true,
-    style: { width: '240px' },
+    className: responsiveWidthClass,
   },
 };
 
@@ -67,7 +69,7 @@ export const WithRandomIconPressed: Story = {
     displayText: 'ねこリフレッシュ',
     showRandomIcon: true,
     isPressed: true,
-    style: { width: '240px' },
+    className: responsiveWidthClass,
   },
 };
 
@@ -76,7 +78,7 @@ export const WithCatIcon: Story = {
     type: 'button',
     displayText: 'ねこ新着順',
     showCatIcon: true,
-    style: { width: '240px' },
+    className: responsiveWidthClass,
   },
 };
 
@@ -86,6 +88,6 @@ export const WithCatIconPressed: Story = {
     displayText: 'ねこ新着順',
     showCatIcon: true,
     isPressed: true,
-    style: { width: '240px' },
+    className: responsiveWidthClass,
   },
 };
diff --git a/src/app/_components/IconButton.tsx b/src/app/_components/IconButton.tsx
index 738ff67..7769417 100644
--- a/src/app/_components/IconButton.tsx
+++ b/src/app/_components/IconButton.tsx
@@ -1,4 +1,4 @@
-import type { ComponentProps, CSSProperties, JSX } from 'react';
+import type { ComponentProps, JSX } from 'react';
 import { Button, Text } from 'react-aria-components';
 
 const GithubIcon = () => {
@@ -76,7 +76,7 @@ type Props = ComponentProps<'button'> & {
   showRandomIcon?: boolean;
   showCatIcon?: boolean;
   isPressed?: boolean;
-  style?: CSSProperties;
+  className?: string;
 };
 
 export const IconButton = ({
@@ -87,7 +87,7 @@ export const IconButton = ({
   showRandomIcon,
   showCatIcon,
   isPressed,
-  style,
+  className,
 }: Props): JSX.Element => {
   const baseClasses =
     'inline-flex items-center justify-center gap-2 rounded-lg px-7 py-1.5 text-black transition-colors duration-200';
@@ -99,10 +99,9 @@ export const IconButton = ({
   return (
     <Button
       type={type}
-      className={`${baseClasses} ${stateClasses} ${focusClasses}`}
+      className={`${baseClasses} ${stateClasses} ${focusClasses} ${className ?? ''}`}
       isDisabled={isPressed}
       aria-pressed={isPressed}
-      style={style}
     >
       {showGithubIcon != null && <GithubIcon />}
       {showRepeatIcon != null && <RepeatIcon />}