recipe updated

src/pages/recipe.tsx

@@ -2,7 +2,9 @@ import { Box, Text, SimpleGrid, Image } from '@chakra-ui/react'
 import { InstagramEmbed } from 'react-social-media-embed';
 import Header from '@/components/header';
 import { useEffect, useState } from 'react'
-
+import { colors } from '../colors';
+import { IoCaretBackOutline } from "react-icons/io5";
+import { useRouter } from '@tanstack/react-router';
 const igPosts = [
     {
         id: 1,
@@ -29,10 +31,17 @@ const igPosts = [
         url: "https://www.instagram.com/reel/DOYeOUfEUoP/"
     },
 
+    {
+        id: 5,
+        title: "獅球嘜",
+        subTitle: "網絡爆紅油漬蒜頭",
+        url: "https://www.instagram.com/p/DQlggHUD6Y7/"
+    }
+
 ];
 
 function Recipe() {
-
+    const router = useRouter();
     const [headerHeight, setHeaderHeight] = useState(80);
 
     useEffect(() => {
@@ -147,9 +156,25 @@ function Recipe() {
         >
             <Header showMenu={true} />
 
+            <Box
+                w="100px"
+                h="100px"
+                position="absolute"
+                display="flex"
+                justifyContent="center"
+                alignItems="center"
+                top={{ base: "180px", md: "180px", lg: "180px", xl: "180px" }}
+                left={{ base: "0vw", md: "2vw", lg: "2vw", xl: "2vw" }}
+                onClick={() => router.navigate({ to: '/' })}
+                cursor="pointer"
+                _hover={{ opacity: 0.8 }}
+            >
+                <IoCaretBackOutline color = {colors.topBarColor} size={50}/>
+            </Box>
+
             <Image
                 src="/images/new/recipe_title.webp"
-                w={{ base: '70vw', md: '50vw', lg: '30vw' }}
+                w={{ base: '50vw', md: '50vw', lg: '30vw' }}
                 mt={20}
                 mx="auto"
             />