From e4b40f7d526eecd2cebfc59be7a6d26f4194fe19 Mon Sep 17 00:00:00 2001
From: JulienBenoit7 <julien-benoit@hotmail.fr>
Date: Wed, 8 Jan 2025 15:14:36 +0100
Subject: [PATCH] calendar positioning adjustment

---
 frontend/src/components/Layout.tsx      | 43 ++++++++++-----------
 frontend/src/components/Navbar.tsx      | 30 +++++++++++++--
 frontend/src/components/ProductCard.tsx | 34 +++++++++--------
 frontend/src/pages/Home.tsx             | 51 ++++++++++++++++---------
 4 files changed, 99 insertions(+), 59 deletions(-)

diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index dfd9dd0..45bf089 100644
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -3,7 +3,7 @@ import { Outlet } from "react-router-dom";
 import Navbar from "./Navbar";
 import Footer from "./Footer";
 import { useWhoAmIQuery } from "../generated/graphql-types";
-import { Layout as AntLayout } from "antd"
+import { Layout as AntLayout } from "antd";
 import { Content } from "antd/es/layout/layout";
 
 export const UserContext = createContext({
@@ -22,32 +22,31 @@ function Layout() {
     return <p>Loading...</p>;
   }
   if (error) {
-    console.log("error", error);
     return <p>Error</p>;
   }
 
   if (data) {
     return (
-        <UserContext.Provider
-          value={{
-            isLoggedIn: data.whoAmI.isLoggedIn,
-            email: data.whoAmI.email ?? "",
-            role: data.whoAmI.role ?? "",
-            firstname: data.whoAmI.firstname ?? "",
-            lastname: data.whoAmI.lastname ?? "",
-            refetch: refetch,
-          }}
-        >
-          <AntLayout>
-            <Navbar />
-            <Content>
-              <Outlet />
-            </Content>
-            <div className="flex justify-center">
-              <Footer />
-            </div>
-          </AntLayout>
-        </UserContext.Provider>
+      <UserContext.Provider
+        value={{
+          isLoggedIn: data.whoAmI.isLoggedIn,
+          email: data.whoAmI.email ?? "",
+          role: data.whoAmI.role ?? "",
+          firstname: data.whoAmI.firstname ?? "",
+          lastname: data.whoAmI.lastname ?? "",
+          refetch: refetch,
+        }}
+      >
+        <AntLayout>
+          <Navbar />
+          <Content>
+            <Outlet />
+          </Content>
+          <div className="flex justify-center">
+            <Footer />
+          </div>
+        </AntLayout>
+      </UserContext.Provider>
     );
   }
 
diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
index c390f23..5b8f856 100644
--- a/frontend/src/components/Navbar.tsx
+++ b/frontend/src/components/Navbar.tsx
@@ -9,7 +9,7 @@ import {
   MenuOutlined,
   SearchOutlined,
 } from "@ant-design/icons";
-import { Input, Button, message, Drawer } from "antd";
+import { Input, Button, message, Drawer, DatePicker } from "antd";
 import { Link } from "react-router-dom";
 import { UserContext } from "../components/Layout";
 import { useLogoutLazyQuery } from "../generated/graphql-types";
@@ -26,6 +26,9 @@ function Navbar() {
   const userInfo = useContext(UserContext);
   const [visible, setVisible] = useState(false);
 
+  const [startDate, setStartDate] = useState<string | null>(null);
+  const [endDate, setEndDate] = useState<string | null>(null);
+
   const categories = [
     { name: "Randonnée", path: "/category/randonnee" },
     { name: "Natation", path: "/category/natation" },
@@ -40,6 +43,12 @@ function Navbar() {
     }
   };
 
+  const handleDateChange = () => {
+    if (startDate && endDate) {
+      navigate(`/search?start=${startDate}&end=${endDate}`);
+    }
+  };
+
   const showDrawer = () => setVisible(true);
   const onClose = () => setVisible(false);
 
@@ -159,8 +168,23 @@ function Navbar() {
               </Button>
             }
           />
-          <div className="w-full h-auto w-auto">
-            <RangePicker onSearch={onSearch} />
+          <div className="w-full h-auto">
+            <DatePicker
+              onChange={(_, dateString) => {
+                setStartDate((dateString as string) || null);
+                handleDateChange();
+              }}
+              placeholder="Date de début"
+              style={{ width: "100%", marginBottom: "0.5rem" }}
+            />
+            <DatePicker
+              onChange={(_, dateString) => {
+                setEndDate((dateString as string) || null);
+                handleDateChange();
+              }}
+              placeholder="Date de fin"
+              style={{ width: "100%" }}
+            />
           </div>
           {userInfo.isLoggedIn && (
             <p className="text-blue-900 font-medium text-lg">
diff --git a/frontend/src/components/ProductCard.tsx b/frontend/src/components/ProductCard.tsx
index e9e942f..8609c6b 100644
--- a/frontend/src/components/ProductCard.tsx
+++ b/frontend/src/components/ProductCard.tsx
@@ -1,12 +1,13 @@
-import { Card, Button } from "antd";
-import Meta from "antd/es/card/Meta";
+import { Card, Button, Typography } from "antd";
 import { Product } from "../interface/types";
 
+const { Text } = Typography;
+
 function ProductCard({ product }: { product: Product }) {
   return (
     <Card
       hoverable
-      className="w-72 rounded-lg shadow-md transition-shadow duration-300 hover:shadow-lg"
+      className="w-72 h-[480px] rounded-lg shadow-xl transition-shadow duration-300 hover:shadow-2xl"
       cover={
         <img
           alt={product.description}
@@ -15,23 +16,24 @@ function ProductCard({ product }: { product: Product }) {
         />
       }
     >
-      <div className="flex flex-col items-center text-center">
-        <Meta
-          title={<div className="text-xl font-bold">{product.name}</div>}
-          description={
-            <div className="text-sm text-gray-800">
-              <div>{product.description}</div>
-              <div className="mt-2 font-semibold text-gray-900">
-                {product.price} euros / jour
-              </div>
-            </div>
-          }
-        />
+      <div className="flex flex-col h-full p-4 space-y-4">
+        <div className="text-xl font-semibold text-gray-800">
+          {product.name}
+        </div>
+
+        <div className="text-sm text-gray-600 flex-1">
+          <Text className="line-clamp-3">{product.description}</Text>
+        </div>
+
+        <div className="font-semibold text-lg text-gray-900">
+          {product.price} euros / jour
+        </div>
+
         <Button
           type="primary"
           size="large"
           block
-          className="bg-blue-900 text-white transition-colors duration-300 hover:bg-orange-600 mt-4"
+          className="bg-blue-900 text-white hover:bg-orange-600 transition-colors duration-300"
         >
           En savoir plus
         </Button>
diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
index ee22f49..17b1756 100644
--- a/frontend/src/pages/Home.tsx
+++ b/frontend/src/pages/Home.tsx
@@ -8,44 +8,55 @@ const { Title, Text } = Typography;
 const HomePage = () => {
   const { data, loading, error } = useGetAllProductsQuery();
 
-  if (loading) return <p>Loading...</p>;
-  if (error) return <p>Error: {error.message}</p>;
+  if (loading) return <p className="text-center text-lg">Chargement...</p>;
+  if (error)
+    return (
+      <p className="text-center text-lg text-red-500">
+        Erreur: {error.message}
+      </p>
+    );
 
   const carouselProducts = Array.isArray(data?.getAllProducts)
     ? data.getAllProducts.slice(0, 5)
     : [];
 
   return (
-    <div className="flex flex-col items-center justify-center p-6 bg-[#FFF5ED]">
-      <h1 className="text-4xl font-bold mb-6 text-[#50A5B1]">
+    <div className="flex flex-col items-center justify-center p-6 bg-gradient-to-r from-[#FFF5ED] to-[#F6F6F6]">
+      <h1 className="text-4xl font-extrabold mb-6 text-[#50A5B1] tracking-tight text-center">
         Produits vedettes
       </h1>
 
-      <div className="w-full max-w-3xl mx-auto">
-        <Carousel autoplay effect="fade">
+      <div className="w-full max-w-4xl mx-auto">
+        <Carousel autoplay effect="fade" className="shadow-lg rounded-lg">
           {carouselProducts.map((product) => (
-            <div key={product.id} className="p-4">
-              <Link to={`product/${product.id}`}>
-                <Card hoverable>
+            <div key={product.id} className="p-6">
+              <Link to={`product/${product.id}`} className="block">
+                <Card
+                  hoverable
+                  className="shadow-lg hover:shadow-xl transition-shadow duration-300"
+                >
                   <Row gutter={16} align="middle">
                     <Col xs={24} md={12}>
                       <img
                         src={product.imgUrl}
                         alt={product.name}
-                        className="w-full h-60 object-cover rounded-lg"
+                        className="w-full h-60 object-cover rounded-lg transition-transform duration-500 transform hover:scale-105"
                       />
                     </Col>
                     <Col xs={24} md={12}>
                       <div className="p-4">
-                        <Title level={4} className="text-xl mb-2">
+                        <Title
+                          level={4}
+                          className="text-2xl text-[#50A5B1] font-semibold mb-3"
+                        >
                           {product.name}
                         </Title>
                         <Divider />
-                        <Text className="text-lg font-semibold block mb-2">
+                        <Text className="text-xl font-semibold block mb-2 text-[#3B3B3B]">
                           {product.price} €
                         </Text>
                         <Divider />
-                        <Text className="text-base mb-4">
+                        <Text className="text-base mb-4 text-gray-600">
                           {product.description}
                         </Text>
                         <Divider />
@@ -53,7 +64,7 @@ const HomePage = () => {
                           type="primary"
                           size="large"
                           block
-                          className="bg-blue-900 text-white transition-colors duration-300 hover:bg-orange-600 mt-4"
+                          className="bg-blue-900 text-white transition-colors duration-300 hover:bg-orange-600 rounded-md"
                         >
                           En savoir plus
                         </Button>
@@ -67,14 +78,18 @@ const HomePage = () => {
         </Carousel>
       </div>
 
-      <h1 className="text-4xl font-bold mt-10 mb-6 text-[#50A5B1]">
+      <h1 className="text-4xl font-extrabold mt-10 mb-6 text-[#50A5B1] tracking-tight text-center">
         Tous les produits
       </h1>
 
-      <div className="flex flex-wrap gap-6 justify-center mt-4">
+      <div className="flex flex-wrap gap-8 justify-center mt-6">
         {data?.getAllProducts.map((product) => (
-          <Link to={`product/${product.id}`} key={product.id}>
-            <div className="w-64 bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 mx-2">
+          <Link
+            to={`product/${product.id}`}
+            key={product.id}
+            className="transform hover:scale-105 transition-transform duration-300"
+          >
+            <div className="w-64 bg-white rounded-lg shadow-lg hover:shadow-2xl transition-shadow duration-300 mx-2">
               <ProductCard product={product} />
             </div>
           </Link>