gdq-archive/frontend/components/Runner.tsx

44 lines
1.7 KiB
TypeScript

import {
faFacebook, faTwitch, faTwitter, faYoutube,
} from '@fortawesome/free-brands-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import * as React from 'react';
import { RunnerInformation } from 'util/datatypes/RunnerList';
import style from './Runner.module.scss';
export default function Runner({ runner }: { runner: RunnerInformation }) {
return (
<span className="mr-3 text-nowrap">
<span className="mr-1">{runner.name}</span>
<sup>
{runner.platform === 'TWITCH' && runner.stream.length > 0 ? (
<a href={runner.stream}>
<FontAwesomeIcon icon={faTwitch} className={['mr-1', style.twitch].join(' ')} />
</a>
) : ''}
{runner.platform === 'FACEBOOK' && runner.stream.length > 0 ? (
<a href={runner.stream}>
<FontAwesomeIcon icon={faFacebook} className={['mr-1', style.facebook].join(' ')} />
</a>
) : ''}
{runner.platform === 'YOUTUBE' && runner.stream.length > 0 ? (
<a href={runner.stream}>
<FontAwesomeIcon icon={faYoutube} className={['mr-1', style.youtube].join(' ')} />
</a>
) : ''}
{runner.twitter && runner.twitter.length > 0 ? (
<a href={`https://twitter.com/${runner.twitter}`}>
<FontAwesomeIcon icon={faTwitter} className={['mr-1', style.twitter].join(' ')} />
</a>
) : ''}
{runner.youtube && runner.youtube.length > 0 ? (
<a href={`https://youtube.com/${runner.youtube}`}>
<FontAwesomeIcon icon={faYoutube} className={['mr-1', style.youtube].join(' ')} />
</a>
) : ''}
</sup>
</span>
);
}