54 lines
1.8 KiB
TypeScript
54 lines
1.8 KiB
TypeScript
|
import { clsx } from 'clsx'
|
||
|
|
import styles from './AudioHeader.module.scss'
|
||
|
|
import { imageProxy } from '../../../utils/imageProxy'
|
||
|
|
import { MediaItem } from '../../../pages/types'
|
||
|
|
import { createSignal, Show } from 'solid-js'
|
||
|
|
import { Icon } from '../../_shared/Icon'
|
||
|
|
import { Topic } from '../../../graphql/types.gen'
|
||
|
|
import { getPagePath } from '@nanostores/router'
|
||
|
|
import { router } from '../../../stores/router'
|
||
|
|
|
||
|
|
type Props = {
|
||
|
|
title: string
|
||
|
|
cover?: string
|
||
|
|
artistData?: MediaItem
|
||
|
|
topic: Topic
|
||
|
|
}
|
||
|
|
|
||
|
|
export const AudioHeader = (props: Props) => {
|
||
|
|
const [expandedImage, setExpandedImage] = createSignal(false)
|
||
|
|
return (
|
||
|
|
<div class={clsx(styles.AudioHeader, { [styles.expandedImage]: expandedImage() })}>
|
||
|
|
<div class={styles.cover}>
|
||
|
|
<img class={styles.image} src={imageProxy(props.cover)} alt={props.title} />
|
||
|
|
<Show when={props.cover}>
|
||
|
|
<button type="button" class={styles.expand} onClick={() => setExpandedImage(!expandedImage())}>
|
||
|
|
<Icon name="expand-circle" />
|
||
|
|
</button>
|
||
|
|
</Show>
|
||
|
|
</div>
|
||
|
|
<div class={styles.albumInfo}>
|
||
|
|
<Show when={props.topic}>
|
||
|
|
<div class={styles.topic}>
|
||
|
|
<a href={getPagePath(router, 'topic', { slug: props.topic.slug })} class={styles.link}>
|
||
|
|
{props.topic.title}
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</Show>
|
||
|
|
<h1>{props.title}</h1>
|
||
|
|
<div class={styles.artistData}>
|
||
|
|
<Show when={props.artistData.artist}>
|
||
|
|
<div class={styles.item}>{props.artistData.artist}</div>
|
||
|
|
</Show>
|
||
|
|
<Show when={props.artistData.date}>
|
||
|
|
<div class={styles.item}>{props.artistData.date}</div>
|
||
|
|
</Show>
|
||
|
|
<Show when={props.artistData.genre}>
|
||
|
|
<div class={styles.item}>{props.artistData.genre}</div>
|
||
|
|
</Show>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|