From 2e0cae3f605137cfd6eae7def1a657f3d534b1af Mon Sep 17 00:00:00 2001
From: Vladimir Skrjabin <skrjabingrail@gmail.com>
Date: Fri, 27 Oct 2023 16:51:05 +0300
Subject: [PATCH] mobile styles added

---
 src/components/information/CarInformation.jsx | 240 +++++++++---------
 1 file changed, 119 insertions(+), 121 deletions(-)

diff --git a/src/components/information/CarInformation.jsx b/src/components/information/CarInformation.jsx
index 7a1ebaf..5d29a5c 100644
--- a/src/components/information/CarInformation.jsx
+++ b/src/components/information/CarInformation.jsx
@@ -80,133 +80,131 @@ function CarInformation({ car }) {
     setIsSlotAvailable(false);
   }, [fromSlot, toSlot]);
 
-
-
   return (
     <div className="mt-16">
-    <div className="grid justify-items-center mt-6">
-    <img
-      src={car?.image}
-      className="mx-auto w-5/6 md:w-2/3 lg:w-5/6 object-cover rounded mb-6"
-    />
-    <h1 className="text-3xl font-bold mb-2">{car.brand}</h1>
-    <h1 className="text-2xl text-slate-800 font-medium">{car.name}</h1>
-  
-  
-    {/* Buttons group */}
-
-    <div className="mt-8 flex flex-col items-center gap-5 md:flex-row">
-      <RangePicker
-        showTime={{ format: "HH:mm" }}
-        format="YYYY-MM-DD HH:mm"
-        style={{ width: "300px", height: "50px" }}
-        onChange={(value) => {
-          setFromSlot(value[0].toDate());
-          setToSlot(value[1].toDate());
-        }}
-        disabledDate={(current) => {
-          return current && current < moment().endOf("day");
-        }}
-      />
-
-      <Button
-        variant="gradient"
-        size="md"
-        disabled={!fromSlot || !toSlot}
-        onClick={checkAvailability}
-        className="px-6 py-4"
-      >
-        Check Availability
-      </Button>
-    </div>
-
-    <div className="mt-12 flex flex-row items-center">
-      <Button
-        style={{ marginRight: '15px' }}
-        size="md"
-        variant="outlined"
-        onClick={() => {
-          router.back();
-        }}
-      >
-        Go Back
-      </Button>
-
-      <StripeCheckout
-        stripeKey="pk_test_51MikCLIYIDFW18nrUFirIoc6zkHDn6gkXK6ldBc7pf2tOAL51C9UCRaweV0EyCulz1XnzGTDhJ6Lh9HmgKDUu4Rf00RvLHIuZI"
-        token={bookNow}
-        currency="EUR"
-        key={process.env.stripe_publishable_key}
-        amount={
-          moment(toSlot).diff(moment(fromSlot), "hours") * car?.price * 100
-        }
-        shippingAddress
-      >
-        <Button
-          size="md"
-          variant="gradient"
-          disabled={!fromSlot || !toSlot || !isSlotAvailable}
-        >
-          Book now
-        </Button>
-      </StripeCheckout>
-    </div>
-
-    {fromSlot && toSlot && (
-      <div className="mt-6 flex flex-col items-center gap-2">
-        <h1 className="text-base font-semibold text-slate-800">
-          Total Hours: {moment(toSlot).diff(moment(fromSlot), "hours")}
+      <div className="grid justify-items-center mt-6">
+        <img
+          src={car?.image}
+          className="mx-auto w-5/6 md:w-2/3 lg:w-5/6 object-cover rounded mb-6"
+        />
+        <h1 className="sm:text-2xl md:text-3xl font-bold mb-2">{car.brand}</h1>
+        <h1 className="sm:text-xl md:text-2xl text-slate-800 font-medium">
+          {car.name}
         </h1>
 
-        <h1 className="text-base font-semibold text-slate-800">
-          Total Amount:{" "}
-          {moment(toSlot).diff(moment(fromSlot), "hours") * car?.price} €
-        </h1>
+        {/* Buttons group */}
+
+        <div className="mt-8 flex flex-col items-center gap-5 md:flex-row">
+          <RangePicker
+            showTime={{ format: "HH:mm" }}
+            format="YYYY-MM-DD HH:mm"
+            style={{ width: "300px", height: "50px" }}
+            onChange={(value) => {
+              setFromSlot(value[0].toDate());
+              setToSlot(value[1].toDate());
+            }}
+            disabledDate={(current) => {
+              return current && current < moment().endOf("day");
+            }}
+          />
+
+          <Button
+            variant="gradient"
+            size="md"
+            disabled={!fromSlot || !toSlot}
+            onClick={checkAvailability}
+            className="px-6 py-4"
+          >
+            Check Availability
+          </Button>
+        </div>
+
+        <div className="mt-12 flex flex-row items-center">
+          <Button
+            style={{ marginRight: "15px" }}
+            size="md"
+            variant="outlined"
+            onClick={() => {
+              router.back();
+            }}
+          >
+            Go Back
+          </Button>
+
+          <StripeCheckout
+            stripeKey="pk_test_51MikCLIYIDFW18nrUFirIoc6zkHDn6gkXK6ldBc7pf2tOAL51C9UCRaweV0EyCulz1XnzGTDhJ6Lh9HmgKDUu4Rf00RvLHIuZI"
+            token={bookNow}
+            currency="EUR"
+            key={process.env.stripe_publishable_key}
+            amount={
+              moment(toSlot).diff(moment(fromSlot), "hours") * car?.price * 100
+            }
+            shippingAddress
+          >
+            <Button
+              size="md"
+              variant="gradient"
+              disabled={!fromSlot || !toSlot || !isSlotAvailable}
+            >
+              Book now
+            </Button>
+          </StripeCheckout>
+        </div>
+
+        {fromSlot && toSlot && (
+          <div className="mt-6 flex flex-col items-center gap-2">
+            <h1 className="text-base font-semibold text-slate-800">
+              Total Hours: {moment(toSlot).diff(moment(fromSlot), "hours")}
+            </h1>
+
+            <h1 className="text-base font-semibold text-slate-800">
+              Total Amount:{" "}
+              {moment(toSlot).diff(moment(fromSlot), "hours") * car?.price} €
+            </h1>
+          </div>
+        )}
+
+        <div className="mt-6">
+          <Accordion open={openAcc1}>
+            <AccordionHeader
+              className="sm:text-xl md:text-2xl"
+              onClick={handleOpenAcc1}
+            >
+              Fuel type of this model
+            </AccordionHeader>
+            <AccordionBody className="text-base md:text-xl text-slate-800 font-semibold">
+              {car.fuelType}
+            </AccordionBody>
+          </Accordion>
+
+          <Accordion open={openAcc2}>
+            <AccordionHeader
+              className="sm:text-xl md:text-2xl"
+              onClick={handleOpenAcc2}
+            >
+              Price per hour including insurance
+            </AccordionHeader>
+            <AccordionBody className="text-base md:text-xl text-slate-800 font-semibold">
+              {car.price} €
+            </AccordionBody>
+          </Accordion>
+
+          <Accordion open={openAcc3}>
+            <AccordionHeader
+              className="sm:text-xl md:text-2xl"
+              onClick={handleOpenAcc3}
+            >
+              Insurance policy
+            </AccordionHeader>
+            <AccordionBody className="text-base md:text-xl text-slate-800 font-semibold">
+              Our insurance coverage applies when the client is not proven to be
+              at fault. In cases where the client's fault is not established,
+              the insurance will cover any damages to the rental vehicle.
+            </AccordionBody>
+          </Accordion>
+        </div>
       </div>
-    )}
-
-    <div className="mt-6">
-      <Accordion open={openAcc1}>
-        <AccordionHeader
-          className="sm:text-xl md:text-2xl"
-          onClick={handleOpenAcc1}
-        >
-          Fuel type of this model
-        </AccordionHeader>
-        <AccordionBody className="text-base md:text-xl text-slate-800 font-semibold">
-          {car.fuelType}
-        </AccordionBody>
-      </Accordion>
-
-      <Accordion open={openAcc2}>
-        <AccordionHeader
-          className="sm:text-xl md:text-2xl"
-          onClick={handleOpenAcc2}
-        >
-          Price per hour including insurance
-        </AccordionHeader>
-        <AccordionBody className="text-base md:text-xl text-slate-800 font-semibold">
-          {car.price} €
-        </AccordionBody>
-      </Accordion>
-
-      <Accordion open={openAcc3}>
-        <AccordionHeader
-          className="sm:text-xl md:text-2xl"
-          onClick={handleOpenAcc3}
-        >
-          Insurance policy
-        </AccordionHeader>
-        <AccordionBody className="text-base md:text-xl text-slate-800 font-semibold">
-          Our insurance coverage applies when the client is not proven to be
-          at fault. In cases where the client's fault is not established, the
-          insurance will cover any damages to the rental vehicle.
-        </AccordionBody>
-      </Accordion>
     </div>
-  </div>
-</div>
-
   );
 }