Merge pull request dev-triangle#20 from dev-triangle/newadditions

Newadditions

src/components/FlightCards/FlightCards.css

@@ -0,0 +1,60 @@
+ .service-card {
+    width: 15rem;
+    height: 20rem;
+    /* padding: 2em 1.5em; */
+    border-radius: 5px;
+    box-shadow: 0 0 35px rgba(0, 0, 0, 0.12);
+    cursor: pointer;
+    transition: 0.5s;
+    position: relative;
+    z-index: 2;
+    overflow: hidden;
+    background: #fff;
+    display: flex;
+    flex-direction: column;
+    padding-top: 1rem;
+    padding-left: 0.5rem;
+  }
+
+  .service-card::after {
+    content: "";
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(#0dcaf0, rgb(255, 23, 131));
+    position: absolute;
+    left: 0%;
+    top: -98%;
+    z-index: -2;
+    transition: all 0.4s cubic-bezier(0.77, -0.04, 0, 0.99);
+  }
+
+   .service-card:hover:after {
+    top: 0%;
+  }
+  .service-card  {
+    background-color: #ffffff;
+    color: black
+  }
+
+   .service-card:hover  {
+    color: #0dcaf0;
+  }
+
+ .service-card:hover h3 {
+    color: #ffffff;
+  }
+
+ .service-card:hover p {
+    color: #f0f0f0;
+  }
+  .trainp{
+    font-size: 26px;
+
+  }
+  .trainh{
+    font-size: 2rem;
+    font-family: serif;
+  }
+  .trainp_div{
+   margin-top: 3rem;
+  }

src/components/FlightCards/FlightCards.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import './FlightCards.css'
+function FlightCards({flight}) {
+  return (
+
+    <div class="service-card">
+
+    <h1 className='trainh'>{flight.train_name}</h1>
+    <div className='trainp_div'>
+    <p className='trainp'>
+      Date: {flight.next_date} 
+      </p>
+      <p className='trainp'>
+      Time: {flight.flight_time}
+      </p>
+      <p className='trainp'>
+      Cost: {flight.cost}
+    </p>
+    </div>
+  </div>
+  )
+}
+
+export default FlightCards

src/components/FlightCards/TrainCards.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import '../FlightCards/FlightCards.css'
+function TrainCards({train}) {
+  return (
+
+    <div class="service-card">
+
+    <h1 className='trainh'>{train.train_name}</h1>
+    <div className='trainp_div'>
+    <p className='trainp'>
+      Date: {train.next_date} 
+      </p>
+      <p className='trainp'>
+      Time: {train.train_time}
+      </p>
+      <p className='trainp'>
+      Cost: {train.cost}
+    </p>
+    </div>
+  </div>
+
+  )
+}
+
+export default TrainCards

src/components/ReviewDialog/ReviewDialog.js

@@ -18,7 +18,7 @@ const ReviewDialog = ({open,handleClose}) => {
 
         })
     },[])
-    const handleSubmit=()=>{
+    const handleSubmit=(e)=>{
         axiosInstance.post(`${baseUrl}/reviews/`,{
             desc: description,
             rate: rate,
@@ -27,8 +27,9 @@ const ReviewDialog = ({open,handleClose}) => {
         }).then((response)=>{
             console.log(response)
         },(error)=>{
-
+   console.log(error)
         })
+
     }
   return (
     <div>

src/pages/PlaceDetailPage/PlaceDetailPage.css

@@ -130,6 +130,13 @@
     gap: 2rem;
     flex-direction: row;
 }
+.train__container
+{
+    display: flex;
+    flex-wrap: wrap;
+    gap: 2rem;
+    flex-direction: row;
+}
 
 @media only screen and (max-width: 1300px) {
 

src/pages/PlaceDetailPage/PlaceDetailPage.js

@@ -7,6 +7,8 @@ import BookingComponent from './BookingComponent'
 import axios from 'axios'
 import baseUrl from '../../utils/Urls'
 import HotelCards from '../../components/HotelCards/HotelCards'
+import TrainCards from '../../components/FlightCards/TrainCards'
+import FlightCards from '../../components/FlightCards/FlightCards'
 const PlaceDetailPage = () => {
   const[placeName,setPlaceName]=useState('')
   const[placeImage,setPlaceImage]=useState()
@@ -91,32 +93,26 @@ const PlaceDetailPage = () => {
 
                     </div>
                     <div className="place__header_name">Flights to {placeName}
-                    <ul>
+                    <div className='train__container'>
                     {flights.map((flight)=>
           flight.to_place_foreign===parseInt(id)?
-            (<li className='flight_details'>
-            <p>Flight Name: {flight.flight_name}</p>
-            <p>Flight Time: {flight.flight_time}</p>
-            <p>Cost: {flight.cost}</p>
-            <p>Next Date: {flight.next_date}</p>
-          </li>):null
+            (<FlightCards key={flight.id} flight={flight}/>):null
           )
          }
-                      </ul>
+         </div>
+
                     </div>
                     <div className="place__header_name">Trains to {placeName}
-                    <ul>
+                    <div className='train__container'>
                     {trains.map((train)=>
           train.to_place_foreign===parseInt(id)?
-            (<li className='flight_details'>
-            <p>Train Name: {train.train_name}</p>
-            <p>Train Time: {train.train_time}</p>
-            <p>Cost: {train.cost}</p>
-            <p>Next Date: {train.next_date}</p>
-          </li>):null
+            (
+              <TrainCards key={train.id} train={train}/>
+            ):null
           )
          }
-                      </ul>
+         </div>
+
                     </div>
 
                     <div className="place__header_name">Hotels in {placeName}

src/pages/ReviewPage/ReviewPage.css

@@ -133,3 +133,4 @@ section.t-bq-section {
         top: 45px;
     }
 }
+

src/pages/ReviewPage/ReviewPage.js

@@ -6,7 +6,10 @@ import baseUrl from '../../utils/Urls'
 import ReviewCards from './ReviewCards'
 import CustomTitle from '../../utils/CustomTitle'
 import ReviewDialog from '../../components/ReviewDialog/ReviewDialog'
+
+
 function ReviewPage() {
+
 const[reviews,setReviews]=useState([])
 const[open,setOpen]=useState(false)
 
@@ -28,10 +31,11 @@ useEffect(()=>{
       <ReviewDialog open={open} handleClose={handleClose} />
     <div className='review__container'>
     {
-            (localStorage.getItem('refresh_token'))?((<button className="review__popper" onClick={handleClickOpen} >
-           Review
-          </button>  )):(( null))
-          }
+
+      (localStorage.getItem('refresh_token'))?((<button className="review__popper" onClick={handleClickOpen} >
+      Review
+     </button>  )):(( null))
+     }
      {
         reviews.map((item)=>{
           return(