Skip to content

Commit

Permalink
mobile styles added
Browse files Browse the repository at this point in the history
  • Loading branch information
@ampodo
ampodo committed Oct 27, 2023
1 parent c1b0e4c commit 2e0cae3
Showing 1 changed file with 119 additions and 121 deletions.
240 changes: 119 additions & 121 deletions src/components/information/CarInformation.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>

);
}

Expand Down

0 comments on commit 2e0cae3

Please sign in to comment.