init: RecipeCard

src/components/common/RecipeCard/RecipeCard.module.scss

@@ -0,0 +1,21 @@
+.recipeCardWarpper{
+    width: 39.2rem;
+    height: 34rem;
+    .image{
+        width: 100%;
+        height: 22rem;
+        border-radius: 2.4rem;
+    }
+    .title{
+        font-size: 2rem;
+        line-height: 2.8rem;
+        letter-spacing: -0.01em;
+        color: var(--text-active);
+    }
+    .description{
+        @apply overflow-hidden over overflow-ellipsis 
+        display: -webkit-box;
+        -webkit-line-clamp: 3; /* number of lines to show */
+        -webkit-box-orient: vertical;
+    }
+}

src/components/common/RecipeCard/RecipeCard.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { RecipeProps } from 'src/utils/types.utils'
+import s from './RecipeCard.module.scss'
+interface RecipeCardProps extends RecipeProps {}
+
+const RecipeCard = ({ imageSrc, title, description }: RecipeCardProps) => {
+  return (
+    <div className={s.recipeCardWarpper}>
+      <div className={s.image}>
+        <img src={imageSrc} alt="image recipe" />
+      </div>
+      <div className={s.title}>{title}</div>
+      <div className={s.description}>{description}</div>
+    </div>
+  )
+}
+
+export default RecipeCard

src/utils/types.utils.ts

@@ -13,3 +13,9 @@ export interface FeaturedProductProps {
     price: string
     imageSrc: string
 }
+
+export interface RecipeProps {
+    title: string
+    description:string
+    imageSrc: string
+}