111 lines
4.0 KiB
TypeScript
111 lines
4.0 KiB
TypeScript
import { Fragment } from 'react';
|
|
import Link from 'next/link';
|
|
import { CardBasic } from 'src/components/card';
|
|
import { Basic } from 'src/interfaces/shared/title';
|
|
import { formatNumber, formatTime } from 'src/utils/helpers';
|
|
import styles from 'src/styles/modules/components/title/basic.module.scss';
|
|
|
|
type Props = {
|
|
className: string;
|
|
data: Basic;
|
|
};
|
|
|
|
const Basic = ({ data, className }: Props) => {
|
|
const titleType = data.type.id;
|
|
const releaseTime =
|
|
titleType === 'tvSeries'
|
|
? `${data.releaseYear?.start}-${data.releaseYear?.end || 'present'}`
|
|
: data.releaseYear?.start;
|
|
|
|
return (
|
|
<CardBasic
|
|
className={`${styles.container} ${className}`}
|
|
image={data.poster?.url}
|
|
title={data.title}
|
|
>
|
|
<ul className={styles.meta} aria-label='quick facts'>
|
|
{data.status && data.status.id !== 'released' && (
|
|
<li className={styles.meta__text}>{data.status.text}</li>
|
|
)}
|
|
<li className={styles.meta__text}>{data.type.name}</li>
|
|
{data.releaseYear && <li className={styles.meta__text}>{releaseTime}</li>}
|
|
{data.ceritficate && <li className={styles.meta__text}>{data.ceritficate}</li>}
|
|
{data.runtime && <li className={styles.meta__text}>{formatTime(data.runtime)}</li>}
|
|
</ul>
|
|
<div className={styles.ratings}>
|
|
{data.ratings.avg && (
|
|
<>
|
|
<p className={styles.rating}>
|
|
<span className={styles.rating__num}>{data.ratings.avg}</span>
|
|
<svg className={styles.rating__icon}>
|
|
<use href='/svg/sprite.svg#icon-rating'></use>
|
|
</svg>
|
|
<span className={styles.rating__text}> Avg. rating</span>
|
|
</p>
|
|
<p className={styles.rating}>
|
|
<span className={styles.rating__num}>{formatNumber(data.ratings.numVotes)}</span>
|
|
<svg className={styles.rating__icon}>
|
|
<use href='/svg/sprite.svg#icon-like-dislike'></use>
|
|
</svg>
|
|
<span className={styles.rating__text}> No. of votes</span>
|
|
</p>
|
|
</>
|
|
)}
|
|
{data.ranking && (
|
|
<p className={styles.rating}>
|
|
<span className={styles.rating__num}>{formatNumber(data.ranking.position)}</span>
|
|
<svg className={styles.rating__icon}>
|
|
<use href='/svg/sprite.svg#icon-graph-rising'></use>
|
|
</svg>
|
|
<span className={styles.rating__text}>
|
|
{' '}
|
|
Popularity (
|
|
<span className={styles.rating__sub}>
|
|
{data.ranking.direction === 'UP'
|
|
? `\u2191${formatNumber(data.ranking.change)}`
|
|
: data.ranking.direction === 'DOWN'
|
|
? `\u2193${formatNumber(data.ranking.change)}`
|
|
: ''}
|
|
</span>
|
|
)
|
|
</span>
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{!!data.genres.length && (
|
|
<p className={styles.genres}>
|
|
<span className={styles.genres__heading}>Genres: </span>
|
|
{data.genres.map((genre, i) => (
|
|
<Fragment key={genre.id}>
|
|
{i > 0 && ', '}
|
|
<Link href={`/search/title?genres=${genre.id}`}>
|
|
<a className={styles.link}>{genre.text}</a>
|
|
</Link>
|
|
</Fragment>
|
|
))}
|
|
</p>
|
|
)}
|
|
<p className={styles.overview}>
|
|
<span className={styles.overview__heading}>Plot: </span>
|
|
<span className={styles.overview__text}>{data.plot || '-'}</span>
|
|
</p>
|
|
{data.primaryCrew.map(crewType => (
|
|
<p className={styles.crewType} key={crewType.type.id}>
|
|
<span className={styles.crewType__heading}>{`${crewType.type.category}: `}</span>
|
|
{crewType.crew.map((crew, i) => (
|
|
<Fragment key={crew.id}>
|
|
{i > 0 && ', '}
|
|
<Link href={`/name/${crew.id}`}>
|
|
<a className={styles.link}>{crew.name}</a>
|
|
</Link>
|
|
</Fragment>
|
|
))}
|
|
</p>
|
|
))}
|
|
</CardBasic>
|
|
);
|
|
};
|
|
|
|
export default Basic;
|