🎨 styles: HomeRecipeTab shape

:%s

src/components/modules/home/HomeRecipe/HomeRecipe.module.scss

@@ -16,14 +16,5 @@
 			padding-top: 3.2rem; 
 			padding-bottom: 3.2rem; 
       @apply flex justify-start spacing-horizontal;
-      .tab{
-          all: unset;
-          @apply heading-3 font-heading cursor-pointer outline-none;
-          padding: 1.6rem;
-          &.active{
-            @apply text-background shape-common bg-primary;
-          }
-					
-      }
   }
 }

src/components/modules/home/HomeRecipe/HomeRecipe.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import {  HeadingCommon, ViewAllItem } from 'src/components/common'
 import { RecipeCardProps } from 'src/components/common/RecipeCard/RecipeCard'
 import RecipeCarousel from 'src/components/common/RecipeCarousel/RecipeCarousel'
@@ -7,6 +7,7 @@ import classNames from 'classnames';
 import image13 from "../../../../../public/assets/images/image13.png"
 import image14 from "../../../../../public/assets/images/image14.png"
 import image12 from "../../../../../public/assets/images/image12.png"
+import HomeRecipeTab from './HomeRecipeTab/HomeRecipeTab'
 
 interface HomeRecipeProps {
   data?: RecipeCardProps[]
@@ -44,7 +45,28 @@ const recipe:RecipeCardProps[] = [{
 }]
 
 
+const TABS = [
+  {
+    name: 'Noodle',
+    value: 'Noodle',
+  },
+  {
+    name: 'Curry',
+    value: 'Curry',
+  },
+  {
+    name: 'Special Recipes',
+    value: 'Special Recipes',
+  }
+]
+
 const HomeRecipe = ({ data =recipe, itemKey="home-recipe", title="Special Recipes" }: HomeRecipeProps) => {
+  const [activeTab, setActiveTab] = useState<string>(TABS[0].value)
+
+  const  onTabChanged = (value: string) => {
+    setActiveTab(value)
+  }
+  
   return (
     <div className={s.homeRecipeWarpper}>
       <div className={s.top}>
@@ -56,9 +78,14 @@ const HomeRecipe = ({ data =recipe, itemKey="home-recipe", title="Special Recipe
         </div>
       </div>
 			<div className={s.mid}>
-        <button className={classNames(s.tab,s.active)}>Noodle</button>
-        <button className={s.tab}>Curry</button>
-        <button className={s.tab}>Special Recipes</button>
+        {
+          TABS.map(item => <HomeRecipeTab
+            key={item.value}
+            activeValue={activeTab}
+            name={item.name}
+            value={item.value}
+            onClick={onTabChanged} />)
+        }
       </div>
       <div className={s.bot}>
         <RecipeCarousel data={data} itemKey={itemKey} />

src/components/modules/home/HomeRecipe/HomeRecipeTab/HomeRecipeTab.module.scss

@@ -0,0 +1,17 @@
+@import "../../../../../styles/utilities";
+
+.tab {
+    all: unset;
+    @apply heading-3 font-heading cursor-pointer outline-none;
+    padding: 1.6rem;
+    &:focus {
+        outline: none;
+        filter: brightness(1.05);
+    }
+    &:focus-visible {
+        outline: 2px solid var(--text-active);
+    }
+    &.active {
+        @apply text-background shape-common bg-primary;
+    }
+}

src/components/modules/home/HomeRecipe/HomeRecipeTab/HomeRecipeTab.tsx

@@ -0,0 +1,26 @@
+import classNames from 'classnames';
+import React from 'react';
+import s from './HomeRecipeTab.module.scss'
+
+interface Props {
+    activeValue: string
+    name: string
+    value: string
+    onClick: (value: string) => void
+}
+
+
+const HomeRecipeTab = ({ activeValue, name, value, onClick }: Props) => {
+    const handleClick = () => {
+        onClick(value)
+    }
+
+    return (
+        <button onClick={handleClick} className={classNames(s.tab, {
+            [s.active]: activeValue === value
+        })}>{name}</button>
+
+    );
+};
+
+export default HomeRecipeTab;