Skip to content

Commit

Permalink
Enhancement: Converted offer list into its own component
Browse files Browse the repository at this point in the history 
Now a single offer is its own reusalble component

see  #7
  • Loading branch information
@lupyana
lupyana committed May 18, 2019
1 parent 96d6e76 commit ce33ea8
Show file tree
Hide file tree
Showing 2 changed files with 38 additions and 102 deletions.
106 changes: 4 additions & 102 deletions frontend/src/components/Dashboard.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import React, { Component } from "react";
import Header from "./partials/Header"
import Offer from "./partials/Offer"

import '../css/form.css';
// import { NavLink } from 'react-router-dom';

Expand All @@ -11,110 +13,10 @@ class Dashboard extends Component {

<div class="width-80p center ">
<div class="offer-list">
<a href="ride.html">
<div class="offer">
<div class="padding-30">
<div class="mb-20">
<img src="https://via.placeholder.com/320x80" alt="" />
</div>
<div class="ride-details ">
<div class="width-50 ride-start mb-10">
Kkoo to Mbezi
</div>
<div class="width-50 ride-time text-right mb-10">
Time: 1800 hrs
</div>
</div>
<div class="ride-offerer">
<div class="width-50 ride-start mb-10">
<span class="avatar">With: </span> Benito
</div>
<div class="width-50 ride-time text-right mb-10">
Rating: some stars
</div>
</div>
</div>
</div>
</a>
<a href="ride.html">
<div class="offer">
<div class="padding-30">
<div class="mb-20">
<img src="https://via.placeholder.com/320x80" alt="" />
</div>
<div class="ride-details ">
<div class="width-50 ride-start mb-10">
Kkoo to Mbezi
</div>
<div class="width-50 ride-time text-right mb-10">
Time: 1800 hrs
</div>
</div>
<div class="ride-offerer">
<div class="width-50 ride-start mb-10">
<span class="avatar">With: </span> Benito
</div>
<div class="width-50 ride-time text-right mb-10">
Rating: some stars
</div>
</div>
</div>
</div>
</a>
<a href="ride.html">
<div class="offer">
<div class="padding-30">
<div class="mb-20">
<img src="https://via.placeholder.com/320x80" alt="" />
</div>
<div class="ride-details ">
<div class="width-50 ride-start mb-10">
Kkoo to Mbezi
</div>
<div class="width-50 ride-time text-right mb-10">
Time: 1800 hrs
</div>
</div>
<div class="ride-offerer">
<div class="width-50 ride-start mb-10">
<span class="avatar">With: </span> Benito
</div>
<div class="width-50 ride-time text-right mb-10">
Rating: some stars
</div>
</div>
</div>
</div>
</a>
<a href="ride.html">
<div class="offer">
<div class="padding-30">
<div class="mb-20">
<img src="https://via.placeholder.com/320x80" alt="" />
</div>
<div class="ride-details ">
<div class="width-50 ride-start mb-10">
Kkoo to Mbezi
</div>
<div class="width-50 ride-time text-right mb-10">
Time: 1800 hrs
</div>
</div>
<div class="ride-offerer">
<div class="width-50 ride-start mb-10">
<span class="avatar">With: </span> Benito
</div>
<div class="width-50 ride-time text-right mb-10">
Rating: some stars
</div>
</div>
</div>
</div>
</a>

<Offer />
</div>
</div>
<button class="open-button" onclick="openForm()">Give a Ride</button>
<button class="open-button" >Give a Ride</button>

</div>
);
Expand Down
34 changes: 34 additions & 0 deletions frontend/src/components/partials/Offer.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import React, { Component } from "react";
import { NavLink } from 'react-router-dom';

class Offer extends Component {
render () {
return (
<div class="offer">
<div class="padding-30">
<div class="mb-20">
<img src="https://via.placeholder.com/320x80" alt="" />
</div>
<div class="ride-details ">
<div class="width-50 ride-start mb-10">
Kkoo to Mbezi
</div>
<div class="width-50 ride-time text-right mb-10">
Time: 1800 hrs
</div>
</div>
<div class="ride-offerer">
<div class="width-50 ride-start mb-10">
<span class="avatar">With: </span> Benito
</div>
<div class="width-50 ride-time text-right mb-10">
Rating: some stars
</div>
</div>
</div>
</div>
);
}
}

export default Offer;

0 comments on commit ce33ea8

Please sign in to comment.