From 664597cd0aec72b5cfa8eea5ad440b5d94f103d5 Mon Sep 17 00:00:00 2001
From: wanning <z5371162@unsw.edu.au>
Date: Sun, 27 Aug 2023 07:06:00 +1000
Subject: [PATCH] layouting

---
 src/components/SuggestCard.jsx |  4 ++--
 src/pages/SuggestPlant.jsx     | 26 ++++++++++++++------------
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/components/SuggestCard.jsx b/src/components/SuggestCard.jsx
index faf2222..e290169 100644
--- a/src/components/SuggestCard.jsx
+++ b/src/components/SuggestCard.jsx
@@ -3,7 +3,7 @@ import { motion } from 'framer-motion';
 
 const SuggestCard = ({ name, imageUrl }) => {
   return (
-    <div>
+    <div className='mx-1'>
       <p className='py-4'>{name}</p>
       <img
         className='object-cover hover:scale-110 transition duration-500 cursor-pointer py-5'
@@ -16,7 +16,7 @@ const SuggestCard = ({ name, imageUrl }) => {
           whileTap={{ scale: 0.9 }}
           className='btn btn-accent hover:shadow-lg'
         >
-          Add to my garden
+          Add to garden
         </motion.button>
       </Link>
     </div>
diff --git a/src/pages/SuggestPlant.jsx b/src/pages/SuggestPlant.jsx
index e6bebb8..95fb82b 100644
--- a/src/pages/SuggestPlant.jsx
+++ b/src/pages/SuggestPlant.jsx
@@ -181,18 +181,20 @@ const SuggestPlant = () => {
               <h3 className='font-bold text-lg'>
                 The best matches for you are
               </h3>
-              <SuggestCard
-                name={suggestion[0].name}
-                imageUrl='https://t4.ftcdn.net/jpg/02/32/98/31/360_F_232983161_9lmUyHKnWbLW0vQPvWCrp5R5DSpexhbx.jpg'
-              />
-              <SuggestCard
-                name={suggestion[1].name}
-                imageUrl='https://t4.ftcdn.net/jpg/02/32/98/31/360_F_232983161_9lmUyHKnWbLW0vQPvWCrp5R5DSpexhbx.jpg'
-              />
-              <SuggestCard
-                name={suggestion[2].name}
-                imageUrl='https://t4.ftcdn.net/jpg/02/32/98/31/360_F_232983161_9lmUyHKnWbLW0vQPvWCrp5R5DSpexhbx.jpg'
-              />
+              <div className='flex flex-row'>
+                <SuggestCard
+                  name={suggestion[0].name}
+                  imageUrl='https://t4.ftcdn.net/jpg/02/32/98/31/360_F_232983161_9lmUyHKnWbLW0vQPvWCrp5R5DSpexhbx.jpg'
+                />
+                <SuggestCard
+                  name={suggestion[1].name}
+                  imageUrl='https://t4.ftcdn.net/jpg/02/32/98/31/360_F_232983161_9lmUyHKnWbLW0vQPvWCrp5R5DSpexhbx.jpg'
+                />
+                <SuggestCard
+                  name={suggestion[2].name}
+                  imageUrl='https://t4.ftcdn.net/jpg/02/32/98/31/360_F_232983161_9lmUyHKnWbLW0vQPvWCrp5R5DSpexhbx.jpg'
+                />
+              </div>
             </>
           )}
         </form>