Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Subscription component in Youtube
import React from 'react';
import {Icon, Image, Menu} from "semantic-ui-react";
import './Subscription.scss';
export function Subscription(props) {
let rightElement = null;
const {broadcasting, amountNewVideos} = props;
if (broadcasting) {
rightElement = <Icon name='signal'/>;
} else if (amountNewVideos) {
rightElement = <span className='new-videos-count'>{amountNewVideos}</span>;
}
return (
<Menu.Item>
<div className='subscription'>
<div>
<Image src='http://via.placeholder.com/28x28' avatar/>
<span>{props.label}</span>
</div>
{rightElement}
</div>
</Menu.Item>
);
}
@import '../../../../styles/shared.scss';
.subscription {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
i.icon {
color: $red;
}
.new-videos-count {
color: $grey;
}
}
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.