Skip to content

Instantly share code, notes, and snippets.

@productioncoder productioncoder/Rating.js
Last active Dec 15, 2018

Embed
What would you like to do?
/* ... */
import {Icon, Progress} from "semantic-ui-react";
export function Rating() {
/* ... */
return (
<div className='rating'>
<div className='thumbs-up'>
<Icon name='thumbs outline up'/>
<span>{props.likeCount}</span>
</div>
<div className='thumbs-down'>
<Icon name='thumbs outline down'/>
<span>{props.dislikeCount}</span>
</div>
{progress}
</div>
);
}
.rating {
display: inline-grid;
grid: auto auto / max-content max-content;
column-gap: 16px;
grid-row-gap: 4px;
.thumbs-up {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.thumbs-down {
grid-column: 2 / 3;
grid-row: 1 / 2;
}
.progress {
grid-column: 1 / span 2;
grid-row: 2 / 3;
&.ui.progress:last-child {
margin-bottom: 0;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.