From 18616002adca1c29e67684437b30faa0c1c2acf2 Mon Sep 17 00:00:00 2001
From: unknown <datnguyen@kie.io>
Date: Wed, 25 Aug 2021 16:26:01 +0700
Subject: [PATCH] init: RecipeCard

---
 .../common/RecipeCard/RecipeCard.module.scss  | 21 +++++++++++++++++++
 .../common/RecipeCard/RecipeCard.tsx          | 18 ++++++++++++++++
 src/utils/types.utils.ts                      |  6 ++++++
 3 files changed, 45 insertions(+)
 create mode 100644 src/components/common/RecipeCard/RecipeCard.module.scss
 create mode 100644 src/components/common/RecipeCard/RecipeCard.tsx

diff --git a/src/components/common/RecipeCard/RecipeCard.module.scss b/src/components/common/RecipeCard/RecipeCard.module.scss
new file mode 100644
index 000000000..73ae43957
--- /dev/null
+++ b/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;
+    }
+}
\ No newline at end of file
diff --git a/src/components/common/RecipeCard/RecipeCard.tsx b/src/components/common/RecipeCard/RecipeCard.tsx
new file mode 100644
index 000000000..71e0c2b41
--- /dev/null
+++ b/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
diff --git a/src/utils/types.utils.ts b/src/utils/types.utils.ts
index c6af1ff12..6c7ed8401 100644
--- a/src/utils/types.utils.ts
+++ b/src/utils/types.utils.ts
@@ -12,4 +12,10 @@ export interface FeaturedProductProps {
     originPrice: string
     price: string
     imageSrc: string
+}
+
+export interface RecipeProps {
+    title: string
+    description:string
+    imageSrc: string
 }
\ No newline at end of file