From ecc215fdc9b2c682cea427b798adda128182b94a Mon Sep 17 00:00:00 2001
From: Hideaki Takahashi <hi_takahashi@yumemi.co.jp>
Date: Sat, 9 Dec 2023 21:38:53 +0900
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20Badge=E3=82=B3=E3=83=B3?=
 =?UTF-8?q?=E3=83=9D=E3=83=BC=E3=83=8D=E3=83=B3=E3=83=88=E3=81=ABlabel?=
 =?UTF-8?q?=E3=83=97=E3=83=AD=E3=83=91=E3=83=86=E3=82=A3=E3=82=92=E8=BF=BD?=
 =?UTF-8?q?=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/Badge/index.stories.tsx |  8 ++++----
 src/components/base/Badge/index.tsx         | 19 ++++++++-----------
 src/components/base/Badge/styles.css.ts     | 20 +++++++-------------
 3 files changed, 19 insertions(+), 28 deletions(-)

diff --git a/src/components/base/Badge/index.stories.tsx b/src/components/base/Badge/index.stories.tsx
index bc795001..f3071c82 100644
--- a/src/components/base/Badge/index.stories.tsx
+++ b/src/components/base/Badge/index.stories.tsx
@@ -12,13 +12,13 @@ type Story = StoryObj<typeof BaseBadge>;
 export const Badge: Story = {
   render: () => (
     <dl>
-      <dt style={{ marginBottom: '8px' }}>color=&quot;expo&quot;</dt>
+      <dt style={{ marginBottom: '8px' }}>label=&quot;Expo&quot;</dt>
       <dd style={{ marginBottom: '24px' }}>
-        <BaseBadge color="expo">Expo</BaseBadge>
+        <BaseBadge label="Expo"></BaseBadge>
       </dd>
-      <dt style={{ marginBottom: '8px' }}>color=&quot;fastApi&quot;</dt>
+      <dt style={{ marginBottom: '8px' }}>label=&quot;FastApi&quot;</dt>
       <dd style={{ marginBottom: '24px' }}>
-        <BaseBadge color="fastApi">FastAPI</BaseBadge>
+        <BaseBadge label="FastApi"></BaseBadge>
       </dd>
     </dl>
   ),
diff --git a/src/components/base/Badge/index.tsx b/src/components/base/Badge/index.tsx
index 694bb535..f087d51e 100644
--- a/src/components/base/Badge/index.tsx
+++ b/src/components/base/Badge/index.tsx
@@ -1,24 +1,21 @@
-import { styles, type BadgeColor } from './styles.css';
+import { styles } from './styles.css';
 
-import type { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
+import type { Technology } from '@/styles/themes.css';
+import type { ComponentPropsWithoutRef, FC } from 'react';
 
 type BaseProps = {
   /**
-   * バッジのカラー
+   * バッジのラベル
    */
-  color: BadgeColor;
-  /**
-   * バッジのコンテンツ
-   */
-  children: ReactNode;
+  label: Technology;
 };
 
 type Props = BaseProps & Omit<ComponentPropsWithoutRef<'span'>, keyof BaseProps>;
 
-const Badge: FC<Props> = ({ color, children, ...props }) => {
+const Badge: FC<Props> = ({ label, ...props }) => {
   return (
-    <span {...props} className={styles({ color })}>
-      {children}
+    <span {...props} className={styles({ label })}>
+      {label}
     </span>
   );
 };
diff --git a/src/components/base/Badge/styles.css.ts b/src/components/base/Badge/styles.css.ts
index f7c42abe..087ef8a0 100644
--- a/src/components/base/Badge/styles.css.ts
+++ b/src/components/base/Badge/styles.css.ts
@@ -2,22 +2,16 @@ import { style } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
 
 import { sprinkles } from '@/styles/sprinkles.css';
-import { vars } from '@/styles/themes.css';
+import { vars, type Technology } from '@/styles/themes.css';
 
-const badgeColor = {
-  expo: '#000000',
-  fastApi: '#009485',
-} as const;
-export type BadgeColor = keyof typeof badgeColor;
-
-const color: { [Key in BadgeColor]: string } = {
-  expo: style({
+const label: { [Key in Technology]: string } = {
+  Expo: style({
     color: vars.colors.white,
-    backgroundColor: badgeColor.expo,
+    backgroundColor: vars.technologyColors.Expo,
   }),
-  fastApi: style({
+  FastApi: style({
     color: vars.colors.white,
-    backgroundColor: badgeColor.fastApi,
+    backgroundColor: vars.technologyColors.FastApi,
   }),
 };
 
@@ -41,7 +35,7 @@ const styles = recipe({
     },
   ]),
   variants: {
-    color,
+    label,
   },
 });