Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | 2x 7x 7x 6x 3x 3x 3x 3x 3x | import { forwardRef } from 'react';
import Button from 'common-components/Button';
import Image from 'common-components/Image';
import Loader from 'common-components/Loader';
import { useGetRelease } from 'helpers/hooks';
import { ellipsisText } from 'helpers/utils';
import styles from './ReleaseDetail.module.scss';
type Props = {
content: Result;
onClose: () => void;
}
const ReleaseDetail = forwardRef<HTMLDivElement, Props>(({ content, onClose }: Props, ref) => {
const { data, status } = useGetRelease(content.id);
if (status === "loading") return <Loader />;
if (status === "success" && data) {
const { thumb, title = "--", format, label, country = "--", genre } = content;
const { released, community, tracklist } = data;
return (
<div ref={ref} className={styles.details}>
<Button
onClick={onClose}
className={styles.details__btn}
aria-label="Close"
data-testid="close"
>
X
</Button>
<Image src={thumb} alt="Cover" />
<h3 title={title}>{ellipsisText(title)}</h3>
<div className={styles.details__basics}>
<p><strong>Country</strong><span>{country}</span></p>
<p><strong>Released</strong><span>{released}</span></p>
<p><strong>Genre</strong><span>{genre?.slice(0, 5).join(", ")}</span></p>
<p><strong>Formats</strong><span>{format?.slice(0, 5).join(", ")}</span></p>
<p><strong>Labels</strong><span>{label?.slice(0, 3).join(", ")}</span></p>
</div>
<h3>Statistics</h3>
<div className={styles.details__basics}>
<p><strong>Have</strong><span>{community.have}</span></p>
<p><strong>Want</strong><span>{community.want}</span></p>
<p><strong>Count</strong><span>{community?.rating.count}</span></p>
<p><strong>Rating</strong><span>{community?.rating.average}/5</span></p>
</div>
<h3>Tracks</h3>
<ul className={styles.details__tracks}>
<li>
<strong>Position</strong>
<strong>Title</strong>
<strong>Duration</strong>
</li>
{tracklist.map(({ position, title, duration }, i) => (
<li key={i}>
<span>{position || "--"}</span>
<span>{ellipsisText(title)}</span>
<span>{duration || "--"}</span>
</li>
))}
</ul>
</div>
)
}
return <div className={styles.alert} role="alert">Something went wrong! Try another release.</div>
})
export default ReleaseDetail;
|