♻️ enhan: link to recipe detail

:%s

src/components/common/RecipeCard/RecipeCard.tsx

@@ -1,19 +1,24 @@
 import Link from 'next/link'
 import React from 'react'
+import { ROUTE } from 'src/utils/constanst.utils'
 import { RecipeProps } from 'src/utils/types.utils'
 import s from './RecipeCard.module.scss'
-export interface RecipeCardProps extends RecipeProps {}
+export interface RecipeCardProps extends RecipeProps { }
 
-const RecipeCard = ({ imageSrc, title, description }: RecipeCardProps) => {
+const RecipeCard = ({ imageSrc, title, description, slug }: RecipeCardProps) => {
   return (
     <div className={s.recipeCardWarpper}>
-      <Link href="#">
+      <Link href={`${ROUTE.RECIPE_DETAIL}/${slug}`}>
+        <a>
           <div className={s.image}>
             <img src={imageSrc} alt="image recipe" />
           </div>
+        </a>
       </Link>
-      <Link href="#">
+      <Link href={`${ROUTE.RECIPE_DETAIL}/${slug}`}>
+        <a>
           <div className={s.title}>{title}</div>
+        </a>
       </Link>
       <div className={s.description}>{description}</div>
     </div>

src/utils/constanst.utils.ts

@@ -9,12 +9,18 @@ export const SOCIAL_LINKS = {
 
 export const ROUTE = {
     HOME: '/',
-    PRODUCTS: '/products',
-    PRODUCT_DETAIL: '/product',
     ABOUT: '/about',
     ACCOUNT: '/account',
+
+    PRODUCTS: '/products',
+    PRODUCT_DETAIL: '/product',
+    
+    BLOGS: '/blogs',
     BLOG_DETAIL: '/blog',
+
     RECIPES: '/recipes',
+    RECIPE_DETAIL: '/recipe',
+
     BUSSINESS: '/bussiness',
     CONTACT: '/contact',
     CHECKOUT: '/checkout',
@@ -22,7 +28,6 @@ export const ROUTE = {
     CUSTOMER_SERVICE: '/customer-service',
     TERM_CONDITION: '/term-condition',
     PRIVACY_POLICY: '/privacy-policy',
-    BLOGS: '/blogs',
     FORGOT_PASSWORD: '/forgot-password'
 }