Skip to content

Commit

Permalink
made major ui changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@Govind783
Govind783 committed Mar 28, 2023
1 parent 16b5030 commit 7726d55
Show file tree
Hide file tree
Showing 34 changed files with 1,345 additions and 719 deletions.
14 changes: 7 additions & 7 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@
"slick-carousel": "^1.8.1",
"social-login-buttons": "^0.0.4",
"styled-components": "^5.3.6",
"swiper": "^8.4.5",
"swiper": "^8.4.7",
"use-places-autocomplete": "^4.0.0",
"web-vitals": "^2.1.4",
"yup": "^0.32.11"
Expand Down
3 changes: 2 additions & 1 deletion src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import SinglePage from './components/SinglePage';
import Checkout from './components/Checkout';
import { useState } from 'react';
import SearchDetails from './components/SearchDetails';
import SearchPageFooter from './components/SearchPageFooter';


function App() {
Expand All @@ -18,7 +19,7 @@ function App() {
<main>
<BrowserRouter>
<Routes>
<Route path="/" exact element={<> <Home toggle={open} setToggle={setOpen} /> <TabsComp toggle={open} setToggle={setOpen} /> </>} />
<Route path="/" exact element={<> <Home toggle={open} setToggle={setOpen} /> <TabsComp toggle={open} setToggle={setOpen} /> <SearchPageFooter /> </>} />
<Route path="/:id" element={<> <Home /> <SinglePage /> </>} />
<Route path="/checkout/:id/:days" exact element={<> <Home /> <Checkout /> </>} />
<Route path="/location/:loc" exact element={<> <Home /> <SearchDetails /> </>} />
Expand Down
84 changes: 72 additions & 12 deletions src/Tabs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import Tab8 from "./components/Tab8"
import Tab9 from "./components/Tab9"
import Tab10 from "./components/Tab10"

const TabsComp = ({toggle , setToggle}) => {
const TabsComp = ({ toggle, setToggle }) => {



Expand All @@ -23,17 +23,77 @@ const TabsComp = ({toggle , setToggle}) => {
<>

<Tabs>
<TabList className="tabs-hold">
<Tab> <img className='im' src='https://a0.muscache.com/pictures/ee9e2a40-ffac-4db9-9080-b351efc3cfc4.jpg' alt='hey' /> </Tab>
<Tab> <img className='im' src='https://a0.muscache.com/pictures/c0a24c04-ce1f-490c-833f-987613930eca.jpg' alt='hey' /> </Tab>
<Tab> <img className='im' src='https://a0.muscache.com/pictures/8b44f770-7156-4c7b-b4d3-d92549c8652f.jpg' alt='hey' /> </Tab>
<Tab> <img className='im' src='https://a0.muscache.com/pictures/10ce1091-c854-40f3-a2fb-defc2995bcaf.jpg' alt='hey' /> </Tab>
<Tab> <img className='im' src='https://a0.muscache.com/pictures/35919456-df89-4024-ad50-5fcb7a472df9.jpg' alt='hey' /> </Tab>
<Tab> <img className='im' src='https://a0.muscache.com/pictures/50861fca-582c-4bcc-89d3-857fb7ca6528.jpg' alt='hey' /> </Tab>
<Tab> <img className='im' src='https://a0.muscache.com/pictures/8e507f16-4943-4be9-b707-59bd38d56309.jpg' alt='hey' /> </Tab>
<Tab> <img className='im' src='https://a0.muscache.com/pictures/3b1eb541-46d9-4bef-abc4-c37d77e3c21b.jpg' alt='hey' /> </Tab>
<Tab> <img className='im' src='https://a0.muscache.com/pictures/52c8d856-33d0-445a-a040-a162374de100.jpg' alt='hey' /> </Tab>
<Tab> <img className='im' src='https://a0.muscache.com/pictures/3fb523a0-b622-4368-8142-b5e03df7549b.jpg' alt='hey' /> </Tab>
<TabList className="placeTabs-hold">
<Tab className='tabImg md:pr-1 pr-0'>
<div className='w-8'>
<img className='md:w-8 w-6' src='https://a0.muscache.com/pictures/ee9e2a40-ffac-4db9-9080-b351efc3cfc4.jpg' alt='hey' />
</div>

</Tab>

<Tab className='tabImg md:pr-1 pr-0'>
<div className='w-8'>
<img className='md:w-8 w-6' src='https://a0.muscache.com/pictures/c0a24c04-ce1f-490c-833f-987613930eca.jpg' alt='hey' />
</div>

</Tab>

<Tab className='tabImg md:pr-1 pr-0'>
<div className='w-8'>
<img className='md:w-8 w-6' src='https://a0.muscache.com/pictures/8b44f770-7156-4c7b-b4d3-d92549c8652f.jpg' alt='hey' />
</div>

</Tab>

<Tab className='tabImg md:pr-1 pr-0'>
<div className='w-8'>
<img className='md:w-8 w-6' src='https://a0.muscache.com/pictures/10ce1091-c854-40f3-a2fb-defc2995bcaf.jpg' alt='hey' />
</div>

</Tab>

<Tab className='tabImg md:pr-1 pr-0'>
<div className='w-8'>
<img className='md:w-8 w-6' src='https://a0.muscache.com/pictures/35919456-df89-4024-ad50-5fcb7a472df9.jpg' alt='hey' />
</div>

</Tab>

<Tab className='tabImg md:pr-1 pr-0'>
<div className='w-8'>
<img className='md:w-8 w-6' src='https://a0.muscache.com/pictures/50861fca-582c-4bcc-89d3-857fb7ca6528.jpg' alt='hey' />
</div>

</Tab>

<Tab className='tabImg md:pr-1 pr-0'>
<div className='w-8'>
<img className='md:w-8 w-6' src='https://a0.muscache.com/pictures/8e507f16-4943-4be9-b707-59bd38d56309.jpg' alt='hey' />
</div>

</Tab>

<Tab className='tabImg md:pr-1 pr-0'>
<div className='w-8'>
<img className='md:w-8 w-6' src='https://a0.muscache.com/pictures/3b1eb541-46d9-4bef-abc4-c37d77e3c21b.jpg' alt='hey' />
</div>

</Tab>

<Tab className='tabImg md:pr-1 pr-0'>
<div className='w-8'>
<img className='md:w-8 w-6' src='https://a0.muscache.com/pictures/52c8d856-33d0-445a-a040-a162374de100.jpg' alt='hey' />
</div>

</Tab>

<Tab className='tabImg md:pr-1 pr-0'>
<div className='w-8'>
<img className='md:w-8 w-6' src='https://a0.muscache.com/pictures/3fb523a0-b622-4368-8142-b5e03df7549b.jpg' alt='hey' />
</div>

</Tab>

</TabList>


Expand Down
16 changes: 7 additions & 9 deletions src/components/CalendarNavBar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,17 +26,15 @@ const CalendarNavBar = () => {
var daysCheck = differenceInDays(endDate, startDate);


return (<div className='NavBarCalendar'>
return (
<div className='calendNavBarHodl mx-auto'>

<DateRangePicker color='black' ranges={[selectionRange]} minDate={new Date()} rangeColors={["#black"]} onChange={handleSelect} />
<div className='NavBarCalendar'>
<DateRangePicker color='black' ranges={[selectionRange]} minDate={new Date()} rangeColors={["#black"]} onChange={handleSelect} />
</div>
</div>

<button className='close-cal rounded-xl'>Close calendar</button>

{daysCheck == 0 ? <p className={daysCheck == 0 ? "days-0" : "days-updated"}>days selected = 0</p> : <p className='days-updated'>{daysCheck} days selected</p>}



</div>)
)
}

export default CalendarNavBar
23 changes: 15 additions & 8 deletions src/components/Card.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,16 @@ import { FaAirbnb } from "react-icons/fa";

const Card = () => {
return (
<div>
<div className='gpayHold'>
<div className='googlePayPaymentHold'>

<GooglePayButton className='gpayHold' environment='TEST' paymentRequest={{

<div className='gpayAsset1Hold flex justify-end'>
<img src={creditCard} className="cc" />
</div>

<br />
<div className='flex mx-auto googlePayButtonContainer ml-4 mt-4 mb-20 md:ml-0 md:mt-0 md:mb-0'>
<GooglePayButton className='' environment='TEST' paymentRequest={{
apiVersion: 2,
apiVersionMinor: 0,
allowedPaymentMethods: [
Expand Down Expand Up @@ -55,16 +61,17 @@ const Card = () => {
/>
</div>

<div className='credHold'>
<img src={creditCard} className="cc" />
</div>

<div className='walHold absolute top-60'>
<br />
<div className='gpayAsset2Hold hidden lg:block'>
<img src={wallet} className="wal" />

</div>


</div>
)
}

export default Card
export default Card

17 changes: 12 additions & 5 deletions src/components/Checkout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { placesStore } from '../store/Store'
import { useParams } from 'react-router-dom';
import "../styles/Checkout.css"
import PaymentForm from './PaymentForm';
import { Link } from 'react-router-dom';

const Checkout = (props) => {

Expand All @@ -24,19 +25,22 @@ const Checkout = (props) => {

<div className='place-datails-container absolute'>

<img src={homeMainPic} className="rounded-xl w-48 absolute checkout-pic" />
<p className='checkout-name'>{name}</p>
<Link to={`/${id}`}>
<img src={homeMainPic} className="rounded-xl w-48 absolute checkout-pic" />
<p className='checkout-name'>{name}</p>
</Link>

<p className='checkout-stars'>{stars} (15reviews) </p>

<p className='checkout-start-price font-semibold'>${price}</p>

<p className='checkout-line1 text-gray-300'>____________________________________________________________</p>
<p className='checkout-line1 text-gray-300 whitespace-nowrap'>____________________________________________________________</p>

<p className='absolute uppercase italic checkout-protected font-semibold'>Your booking is protected by</p>

<img src='https://a0.muscache.com/pictures/aircover/aircover-logo/original/56683a2f-f11b-43f6-8af7-a1b3861b2c85.svg' className='checkout-logo absolute w-32 left-12' />

<p className='checkout-line2 text-gray-300'>____________________________________________________________</p>
<p className='checkout-line2 text-gray-300 whitespace-nowrap'>____________________________________________________________</p>

<p className='absolute text-xl font-semibold checkout-price-heading'>price details</p>

Expand All @@ -60,10 +64,13 @@ const Checkout = (props) => {

</div>

<p className='checkout-line3 text-gray-300'>____________________________________________________________</p>
<p className='checkout-line3 text-gray-300 whitespace-nowrap'>____________________________________________________________</p>
<p className='checkout-toal-heading font-semibold absolute text-xl'>TOTAL</p>

<p className='absolute total-checkout'>${240 + 65 + (price * daysFinal)}</p>
<br />
<br />
<br />

</div>

Expand Down
6 changes: 3 additions & 3 deletions src/components/Footer2.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,9 +33,9 @@ const Footer2 = () => {
</div>
<div className="md:place-self-center md:justify-self-end">
<div className="grid grid-flow-col gap-4">
<a href='https://twitter.com/Govind755'><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="fill-current"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"></path></svg></a>
<a href='https://www.youtube.com/@cryptolikeneverbefore586'><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="fill-current"><path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"></path></svg></a>
<a href='https://twitter.com/Govind755'><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="fill-current"><path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"></path></svg></a>
<a href='https://twitter.com/Govind755' target={"_blank"} ><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="fill-current"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"></path></svg></a>
<a href='https://www.youtube.com/@cryptolikeneverbefore586' target={"_blank"} ><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="fill-current"><path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"></path></svg></a>
<a href='https://twitter.com/Govind755' target={"_blank"} ><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="fill-current"><path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"></path></svg></a>
</div>
</div>
</footer>
Expand Down
4 changes: 2 additions & 2 deletions src/components/Home.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -236,7 +236,7 @@ const Home = ({ toggle, setToggle }) => {
</Link>
</div>

<div className='secText flex gap-20 top-24 relative left-16'>
<div className='secText flex top-24 relative left-16'>
<p className='fs'> SouthEast Asia </p>
<p className='fs'> Indonesia </p>
<p className='fs'> MiddleEast </p>
Expand Down Expand Up @@ -363,7 +363,7 @@ const Home = ({ toggle, setToggle }) => {
<div className="flex items-center relative cursor-pointer whitespace-nowrap">Become a host</div>
</div>
<div className="block relative">
<button type="button" className="inline-block py-2 px-3 hover:bg-gray-200 rounded-full relative ">
<button type="button" className="inline-block py-2 hover:bg-gray-200 rounded-full relative ">
<div className="flex items-center h-5">
<div className="_xpkakx">
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" focusable="false" style={{ display: 'block', height: '16px', width: '16px', fill: 'currentcolor' }}><path d="m8.002.25a7.77 7.77 0 0 1 7.748 7.776 7.75 7.75 0 0 1 -7.521 7.72l-.246.004a7.75 7.75 0 0 1 -7.73-7.513l-.003-.245a7.75 7.75 0 0 1 7.752-7.742zm1.949 8.5h-3.903c.155 2.897 1.176 5.343 1.886 5.493l.068.007c.68-.002 1.72-2.365 1.932-5.23zm4.255 0h-2.752c-.091 1.96-.53 3.783-1.188 5.076a6.257 6.257 0 0 0 3.905-4.829zm-9.661 0h-2.75a6.257 6.257 0 0 0 3.934 5.075c-.615-1.208-1.036-2.875-1.162-4.686l-.022-.39zm1.188-6.576-.115.046a6.257 6.257 0 0 0 -3.823 5.03h2.75c.085-1.83.471-3.54 1.059-4.81zm2.262-.424c-.702.002-1.784 2.512-1.947 5.5h3.904c-.156-2.903-1.178-5.343-1.892-5.494l-.065-.007zm2.28.432.023.05c.643 1.288 1.069 3.084 1.157 5.018h2.748a6.275 6.275 0 0 0 -3.929-5.068z" /></svg>
Expand Down
1 change: 1 addition & 0 deletions src/components/PaymentForm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ const PaymentForm = (props) => {

<TabPanel>
<Paypal initialPrice={price} nameOfPlace={placesName} daysSelected={days} />

</TabPanel>


Expand Down
11 changes: 6 additions & 5 deletions src/components/Paypal.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { useState } from 'react'
import "../styles/Paypal.css";
import paypalbg from "../styles/paypalbg.png"
import paypalCard from "../styles/paypal-card.png"
import paypalCard from "../styles/paypal-bgg.png"
import success from "../styles/ab.gif";
import { PayPalButtons } from '@paypal/react-paypal-js';
import { PayPalScriptProvider } from '@paypal/react-paypal-js';
Expand All @@ -14,11 +14,11 @@ const Paypal = (props) => {
let numOfDays = props.daysSelected;



return (
<div className='pa'>

<div className='paypalbghold'>

<div className='paypalbghold hidden lg:block'>
<img src={paypalbg} className="paypalbg" />
</div>

Expand Down Expand Up @@ -97,9 +97,10 @@ const Paypal = (props) => {

</div>

<div className='loader'>
<br />
<br />
<br />

</div>

</div>
)
Expand Down
Loading

0 comments on commit 7726d55

Please sign in to comment.