Thanks to visit codestin.com
Credit goes to github.com

Skip to content
This repository was archived by the owner on Mar 9, 2021. It is now read-only.

Commit 17d4e89

Browse files
vinaypuppalvinaypuppal
committed
visually seperate upcoming and past events
1 parent 7c30a16 commit 17d4e89

File tree

1 file changed

+40
-32
lines changed

1 file changed

+40
-32
lines changed

‎pages/events.js

Lines changed: 40 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import fetch from 'isomorphic-unfetch';
3-
import { Card } from 'semantic-ui-react';
3+
import { Card, Divider } from 'semantic-ui-react';
44

55
import publicPage from '../hocs/public-page';
66
import {
@@ -52,37 +52,42 @@ class Events extends React.Component {
5252
<div>{this.props.fetchError}</div>
5353
) : (
5454
<div>
55-
<h4>Upcoming events</h4>
56-
<div>
57-
{this.props.futureEvents.map(event => (
58-
<Card.Group key={event.id}>
59-
<RowEvent
60-
name={event.name}
61-
yesCount={event.yes_rsvp_count}
62-
time={event.time}
63-
venue={event.venue}
64-
link={event.link}
65-
status={event.status}
66-
/>
67-
</Card.Group>
68-
))}
69-
</div>
70-
<h4>Recent events</h4>
71-
<div>
72-
{this.props.pastEvents.map(event => (
73-
<Card.Group key={event.id}>
74-
<RowEvent
75-
key={event.id}
76-
name={event.name}
77-
yesCount={event.yes_rsvp_count}
78-
time={event.time}
79-
venue={event.venue}
80-
link={event.link}
81-
status={event.status}
82-
/>
83-
</Card.Group>
84-
))}
85-
</div>
55+
<section>
56+
<h2>Upcoming events</h2>
57+
<div>
58+
{this.props.futureEvents.map(event => (
59+
<Card.Group key={event.id}>
60+
<RowEvent
61+
name={event.name}
62+
yesCount={event.yes_rsvp_count}
63+
time={event.time}
64+
venue={event.venue}
65+
link={event.link}
66+
status={event.status}
67+
/>
68+
</Card.Group>
69+
))}
70+
</div>
71+
</section>
72+
<Divider />
73+
<section>
74+
<h2>Recent events</h2>
75+
<div>
76+
{this.props.pastEvents.map(event => (
77+
<Card.Group key={event.id}>
78+
<RowEvent
79+
key={event.id}
80+
name={event.name}
81+
yesCount={event.yes_rsvp_count}
82+
time={event.time}
83+
venue={event.venue}
84+
link={event.link}
85+
status={event.status}
86+
/>
87+
</Card.Group>
88+
))}
89+
</div>
90+
</section>
8691
</div>
8792
)}
8893
</main>
@@ -110,6 +115,9 @@ class Events extends React.Component {
110115
color: #df1cb5;
111116
font-weight: 900;
112117
}
118+
section {
119+
margin: 50px 0;
120+
}
113121
`}</style>
114122
</div>
115123
);

0 commit comments

Comments
 (0)