mirror of
https://github.com/jorgev259/soc_site-astro.git
synced 2025-06-29 07:57:41 +00:00
Merge branch 'clouds' into dev
This commit is contained in:
parent
563ff224cc
commit
a8c787015c
2 changed files with 291 additions and 278 deletions
|
|
@ -11,12 +11,12 @@ const { title, href, image, loading = false } = props
|
||||||
|
|
||||||
<a
|
<a
|
||||||
href={href}
|
href={href}
|
||||||
class:list={['block w-full mt-2.5 rounded-md bg-dark ', loading ? 'cursor-default' : 'hover:bg-dark-hover group']}
|
class:list={['block w-full mt-2.5 rounded-xl bg-dark/85 ', loading ? 'cursor-default' : 'hover:bg-dark group']}
|
||||||
>
|
>
|
||||||
{
|
{
|
||||||
loading ? (
|
loading ? (
|
||||||
<div class='pt-2.5'>
|
<div class='pt-2.5'>
|
||||||
<div class='rounded-md animate-pulse bg-gray size-40 mx-auto' />
|
<div class='rounded-xl animate-pulse bg-gray/85 size-40 mx-auto' />
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<Image
|
<Image
|
||||||
|
|
@ -25,7 +25,7 @@ const { title, href, image, loading = false } = props
|
||||||
height={500}
|
height={500}
|
||||||
width={500}
|
width={500}
|
||||||
quality='low'
|
quality='low'
|
||||||
class='rounded-md scale-95 group-hover:scale-100 transition-transform'
|
class='rounded-md scale-95 group-hover:scale-98 transition-transform'
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
@ -39,7 +39,7 @@ const { title, href, image, loading = false } = props
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div class='group-hover:text-hover-link group-hover:underline text-base font-bold p-1 text-center'>{title}</div>
|
<div class='group-hover:text-hover-link group-hover:underline text-lg font-bold px-1 pb-1 text-center'>{title}</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
</a>
|
</a>
|
||||||
|
|
|
||||||
|
|
@ -47,292 +47,305 @@ const { currentLocale } = Astro
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<BaseLayout>
|
<BaseLayout>
|
||||||
<div class='flex flex-col flex-1 max-w-[2000px] px-4 md:px-10 py-3'>
|
<div
|
||||||
<div class='flex flex-col md:flex-row gap-x-3'>
|
class={`w-full min-h-100vh bg-fixed bg-center bg-cover`}
|
||||||
<div class='flex-1'>
|
style={`
|
||||||
<div class='size-full relative cursor-pointer'>
|
background-image: url('https://cdn.sittingonclouds.net/album?./${album?.id}.png');
|
||||||
<Image
|
`}
|
||||||
src={`https://cdn.sittingonclouds.net/album/${album?.id}.png`}
|
>
|
||||||
alt={`${album?.title} cover`}
|
<div class='bg-dark/75 w-full min-h-100vh'>
|
||||||
class='rounded-md size-full object-contain absolute'
|
<div class='flex flex-col flex-1 max-w-[1440px] mx-auto p-3'>
|
||||||
quality='mid'
|
<div class='flex flex-wrap md:flex-nowrap gap-x-3'>
|
||||||
width={2560}
|
<div class='flex-1 md:flex-5/12'>
|
||||||
height={150}
|
<div class='size-full relative cursor-pointer'>
|
||||||
/>
|
<Image
|
||||||
</div>
|
src={`https://cdn.sittingonclouds.net/album?./${album?.id}.png`}
|
||||||
</div>
|
alt={`${album?.title} cover`}
|
||||||
<div class='flex-1'>
|
class='rounded-sm size-full object-contain h-96'
|
||||||
<div class='bg-dark rounded-md py-4 px-6'>
|
quality='mid'
|
||||||
<div class='font-medium text-4xl text-center'>{album?.title}</div>
|
width={384}
|
||||||
{album?.subTitle ? <h6 style={{ whiteSpace: 'pre-wrap' }}>{album?.subTitle}</h6> : null}
|
height={384}
|
||||||
<table class='mt-4'>
|
/>
|
||||||
<tbody>
|
|
||||||
{
|
|
||||||
album?.releaseDate ? (
|
|
||||||
<tr>
|
|
||||||
<th class='width-row'>{m.releaseDate()}</th>
|
|
||||||
<td>
|
|
||||||
{new Intl.DateTimeFormat(currentLocale, { dateStyle: 'medium' }).format(album?.releaseDate)}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
) : null
|
|
||||||
}
|
|
||||||
|
|
||||||
{
|
|
||||||
(album?.artistList.length ?? 0) > 0 && (
|
|
||||||
<tr>
|
|
||||||
<th>{m.artists()}</th>
|
|
||||||
<td>{album?.artistList.map(({ artist }) => artist.name).join(', ')}</td>
|
|
||||||
</tr>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<th>{m.classification()}</th>
|
|
||||||
<td>
|
|
||||||
{
|
|
||||||
[
|
|
||||||
album?.categoryList.map(({ categoryName }) => (m as any)[`${categoryName}Osts`]()).join(' & '),
|
|
||||||
album?.classificationList.map(({ classificationName }) => classificationName).join(', ')
|
|
||||||
]
|
|
||||||
.filter((f) => f !== '')
|
|
||||||
.join(' - ')
|
|
||||||
}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
{
|
|
||||||
album?.label && (
|
|
||||||
<tr>
|
|
||||||
<th>{m.publishedBy()}</th>
|
|
||||||
<td>
|
|
||||||
<a class='btn btn-link p-0' href={`/publisher/${album?.label}`}>
|
|
||||||
{album?.label}
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
{
|
|
||||||
(album?.platformList.length ?? 0) > 0 && (
|
|
||||||
<tr>
|
|
||||||
<th>{m.platforms()}</th>
|
|
||||||
<td>
|
|
||||||
{album?.platformList.map(({ platform }, i) => (
|
|
||||||
<Fragment key={platform.id}>
|
|
||||||
{id === '29' ? (
|
|
||||||
<span class='btn p-0' style={{ color: 'white' }}>
|
|
||||||
{platform.name}
|
|
||||||
</span>
|
|
||||||
) : (
|
|
||||||
<a class='btn btn-link p-0' href={`/platform/${id}`}>
|
|
||||||
{platform.name}
|
|
||||||
</a>
|
|
||||||
)}
|
|
||||||
{i !== album?.platformList.length - 1 && ', '}
|
|
||||||
</Fragment>
|
|
||||||
))}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
{
|
|
||||||
(album?.gameList.length ?? 0) > 0 && (
|
|
||||||
<tr>
|
|
||||||
<th>{m.games()}</th>
|
|
||||||
<td>
|
|
||||||
{album?.gameList.map(({ game }, i) => (
|
|
||||||
<Fragment key={game.slug}>
|
|
||||||
<a class='btn btn-link p-0' href={`/game/${game.slug}`}>
|
|
||||||
{game.name}
|
|
||||||
</a>
|
|
||||||
{i !== album?.gameList.length - 1 && ', '}
|
|
||||||
</Fragment>
|
|
||||||
))}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
{
|
|
||||||
(album?.animList.length ?? 0) > 0 && (
|
|
||||||
<tr>
|
|
||||||
<th>{m.animations()}</th>
|
|
||||||
<td>
|
|
||||||
{album?.animList.map(({ animation }, i) => (
|
|
||||||
<Fragment key={id}>
|
|
||||||
<a class='btn btn-link p-0' href={`/anim/${id}`}>
|
|
||||||
{animation.title}
|
|
||||||
</a>
|
|
||||||
{i !== album?.animList.length - 1 && ', '}
|
|
||||||
</Fragment>
|
|
||||||
))}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<th>{m.avgRating()}</th>
|
|
||||||
<td>
|
|
||||||
<!-- <StarCounter albumId={album?.id} /> -->
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
<!-- <UserButtons id={album?.id} /> -->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<hr />
|
|
||||||
<div class='flex gap-x-3'>
|
|
||||||
<div class='flex-1 bg-dark rounded-md p-4'>
|
|
||||||
<h1 class='text-center uppercase text-4xl font-semibold'>
|
|
||||||
{m.tracklist()}
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<div class='px-3'>
|
|
||||||
<TrackList discs={album?.discs ?? []} client:only='react' />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class='flex-1 bg-dark rounded-md p-3'>
|
|
||||||
{
|
|
||||||
album?.vgmdb && (
|
|
||||||
<div class='mt-2 mb-3 ml-2 flex'>
|
|
||||||
<span class='text-xl'>{m.checkVGMDB()}:</span>
|
|
||||||
<a href={album?.vgmdb} class='ml-2' target='_blank' rel='noopener noreferrer'>
|
|
||||||
<Image width={100} height={30} alt={'VGMdb'} src={vgmdbLogo} />
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
)
|
</div>
|
||||||
}
|
<div class='flex-1 md:flex-7/12'>
|
||||||
{
|
<div class='bg-dark/85 rounded-xl py-4 px-6'>
|
||||||
(album?.stores.length ?? 0) > 0 && (
|
<div class='font-medium text-4xl text-center'>{album?.title}</div>
|
||||||
<div class='row mt-2 px-3'>
|
<div class='text-center'>
|
||||||
<div class='bg-red-500 text-white text-4xl rounded-md px-3 py-4'>
|
{album?.subTitle ? <h6 style={{ whiteSpace: 'pre-wrap ' }}>{album?.subTitle}</h6> : null}
|
||||||
<h1 class='text-center text-3xl uppercase font-semibold drop-shadow-lg'>{m.buyOriginal()}</h1>
|
|
||||||
<hr class='my-2.5' />
|
|
||||||
<div class='flex justify-center flex-wrap gap-4'>
|
|
||||||
{album?.stores.map(({ url, provider }, i) => (
|
|
||||||
<a target='_blank' rel='noopener noreferrer' href={url}>
|
|
||||||
<Image
|
|
||||||
class='rounded-md'
|
|
||||||
width={130}
|
|
||||||
height={50}
|
|
||||||
style={{ height: 'auto', width: '130px' }}
|
|
||||||
alt={provider}
|
|
||||||
src={`/img/provider/${provider}.jpg`}
|
|
||||||
/>
|
|
||||||
</a>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<table class='mt-4'>
|
||||||
)
|
<tbody>
|
||||||
}
|
{
|
||||||
<hr />
|
album?.releaseDate ? (
|
||||||
<div>
|
<tr>
|
||||||
{
|
<th class='width-row'>{m.releaseDate()}</th>
|
||||||
album?.downloads?.map((download) => {
|
<td>
|
||||||
const { links, title } = download
|
{new Intl.DateTimeFormat(currentLocale, { dateStyle: 'medium' }).format(album?.releaseDate)}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
) : null
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
{
|
||||||
<div class=''>
|
(album?.artistList.length ?? 0) > 0 && (
|
||||||
<h2 class='text-center text-3xl'>{title}</h2>
|
<tr>
|
||||||
{links.map((link) => {
|
<th>{m.artists()}</th>
|
||||||
const { id: linkId, url, url2, provider, directUrl } = link
|
<td>{album?.artistList.map(({ artist }) => artist.name).join(', ')}</td>
|
||||||
|
</tr>
|
||||||
return (
|
|
||||||
<Fragment key={linkId}>
|
|
||||||
<div class='flex gap-2 my-2'>
|
|
||||||
<div>
|
|
||||||
<Image
|
|
||||||
class='rounded-md'
|
|
||||||
width={30}
|
|
||||||
height={30}
|
|
||||||
alt={provider}
|
|
||||||
src={`/img/provider/${provider}.png`}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{url2 && (
|
|
||||||
<DownloadBtn href={url2} alt='fly' icon={flyIcon}>
|
|
||||||
{m.flyInc()}
|
|
||||||
</DownloadBtn>
|
|
||||||
)}
|
|
||||||
{url ? (
|
|
||||||
<DownloadBtn href={url} alt='ouo' icon={ouoIcon}>
|
|
||||||
{m.ouoIO()}
|
|
||||||
</DownloadBtn>
|
|
||||||
) : null}
|
|
||||||
{directUrl ? (
|
|
||||||
<DownloadBtn href={directUrl} direct server:defer>
|
|
||||||
{m.direct()}
|
|
||||||
</DownloadBtn>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
</Fragment>
|
|
||||||
)
|
)
|
||||||
})}
|
}
|
||||||
<hr />
|
|
||||||
|
<tr>
|
||||||
|
<th>{m.classification()}</th>
|
||||||
|
<td>
|
||||||
|
{
|
||||||
|
[
|
||||||
|
album?.categoryList
|
||||||
|
.map(({ categoryName }) => (m as any)[`${categoryName}Osts`]())
|
||||||
|
.join(' & '),
|
||||||
|
album?.classificationList.map(({ classificationName }) => classificationName).join(', ')
|
||||||
|
]
|
||||||
|
.filter((f) => f !== '')
|
||||||
|
.join(' - ')
|
||||||
|
}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{
|
||||||
|
album?.label && (
|
||||||
|
<tr>
|
||||||
|
<th>{m.publishedBy()}</th>
|
||||||
|
<td>
|
||||||
|
<a class='btn btn-link p-0' href={`/publisher/${album?.label}`}>
|
||||||
|
{album?.label}
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
{
|
||||||
|
(album?.platformList.length ?? 0) > 0 && (
|
||||||
|
<tr>
|
||||||
|
<th>{m.platforms()}</th>
|
||||||
|
<td>
|
||||||
|
{album?.platformList.map(({ platform }, i) => (
|
||||||
|
<Fragment key={platform.id}>
|
||||||
|
{id === '29' ? (
|
||||||
|
<span class='btn p-0' style={{ color: 'white' }}>
|
||||||
|
{platform.name}
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
<a class='btn btn-link p-0' href={`/platform/${id}`}>
|
||||||
|
{platform.name}
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
{i !== album?.platformList.length - 1 && ', '}
|
||||||
|
</Fragment>
|
||||||
|
))}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
{
|
||||||
|
(album?.gameList.length ?? 0) > 0 && (
|
||||||
|
<tr>
|
||||||
|
<th>{m.games()}</th>
|
||||||
|
<td>
|
||||||
|
{album?.gameList.map(({ game }, i) => (
|
||||||
|
<Fragment key={game.slug}>
|
||||||
|
<a class='btn btn-link p-0' href={`/game/${game.slug}`}>
|
||||||
|
{game.name}
|
||||||
|
</a>
|
||||||
|
{i !== album?.gameList.length - 1 && ', '}
|
||||||
|
</Fragment>
|
||||||
|
))}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
{
|
||||||
|
(album?.animList.length ?? 0) > 0 && (
|
||||||
|
<tr>
|
||||||
|
<th>{m.animations()}</th>
|
||||||
|
<td>
|
||||||
|
{album?.animList.map(({ animation }, i) => (
|
||||||
|
<Fragment key={id}>
|
||||||
|
<a class='btn btn-link p-0' href={`/anim/${id}`}>
|
||||||
|
{animation.title}
|
||||||
|
</a>
|
||||||
|
{i !== album?.animList.length - 1 && ', '}
|
||||||
|
</Fragment>
|
||||||
|
))}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<th>{m.avgRating()}</th>
|
||||||
|
<td>
|
||||||
|
<!-- <StarCounter album?.Id={album?.id} /> -->
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<!-- <UserButtons id={album?.id} /> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr />
|
||||||
|
<div class='flex flex-wrap md:flex-nowrap gap-x-3'>
|
||||||
|
<div class='flex-1 bg-dark/85 rounded-xl p-4'>
|
||||||
|
<h1 class='text-center uppercase text-4xl font-semibold'>
|
||||||
|
{m.tracklist()}
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<div class='px-3'>
|
||||||
|
<TrackList discs={album?.discs ?? []} client:only='react' />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class='flex-1 bg-dark/85 rounded-xl p-3'>
|
||||||
|
{
|
||||||
|
album?.vgmdb && (
|
||||||
|
<div class='mt-2 mb-3 ml-2 flex'>
|
||||||
|
<span class='text-xl'>{m.checkVGMDB()}:</span>
|
||||||
|
<a href={album?.vgmdb} class='ml-2' target='_blank' rel='noopener noreferrer'>
|
||||||
|
<Image width={100} height={30} alt={'VGMdb'} src={vgmdbLogo} />
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
})
|
}
|
||||||
}
|
{
|
||||||
</div>
|
(album?.stores.length ?? 0) > 0 && (
|
||||||
|
<div class='row mt-2 px-3'>
|
||||||
<div>
|
<div class='bg-red-500 text-white text-4xl rounded-md px-3 py-4'>
|
||||||
<div>
|
<h1 class='text-center text-3xl uppercase font-semibold drop-shadow-lg'>{m.buyOriginal()}</h1>
|
||||||
<h4 class='text-2xl'>{m.donationCall()}</h4>
|
<hr class='my-2.5' />
|
||||||
|
<div class='flex justify-center flex-wrap gap-4'>
|
||||||
|
{album?.stores.map(({ url, provider }, i) => (
|
||||||
|
<a target='_blank' rel='noopener noreferrer' href={url}>
|
||||||
|
<Image
|
||||||
|
class='rounded-md'
|
||||||
|
width={130}
|
||||||
|
height={50}
|
||||||
|
style={{ height: 'auto', width: '130px' }}
|
||||||
|
alt={provider}
|
||||||
|
src={`/img/provider/${provider}.jpg`}
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
<hr />
|
||||||
<div>
|
<div>
|
||||||
<span> {m.donationSteps()} </span>
|
{
|
||||||
<a href='https://discord.gg/AQc9vwGM' target='_blank' rel='noopener noreferrer'>Discord</a>
|
album?.downloads?.map((download) => {
|
||||||
|
const { links, title } = download
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div class=''>
|
||||||
|
<h2 class='text-center text-3xl'>{title}</h2>
|
||||||
|
{links.map((link) => {
|
||||||
|
const { id: linkId, url, url2, provider, directUrl } = link
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Fragment key={linkId}>
|
||||||
|
<div class='flex gap-2 my-2'>
|
||||||
|
<div>
|
||||||
|
<Image
|
||||||
|
class='rounded-md'
|
||||||
|
width={30}
|
||||||
|
height={30}
|
||||||
|
alt={provider}
|
||||||
|
src={`/img/provider/${provider}.png`}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{url2 && (
|
||||||
|
<DownloadBtn href={url2} alt='fly' icon={flyIcon}>
|
||||||
|
{m.flyInc()}
|
||||||
|
</DownloadBtn>
|
||||||
|
)}
|
||||||
|
{url ? (
|
||||||
|
<DownloadBtn href={url} alt='ouo' icon={ouoIcon}>
|
||||||
|
{m.ouoIO()}
|
||||||
|
</DownloadBtn>
|
||||||
|
) : null}
|
||||||
|
{directUrl ? (
|
||||||
|
<DownloadBtn href={directUrl} direct server:defer>
|
||||||
|
{m.direct()}
|
||||||
|
</DownloadBtn>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
</Fragment>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
<hr />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div class='mt-1'>
|
<div>
|
||||||
<a target='_blank' rel='noopener noreferrer' href='https://ko-fi.com/sittingonclouds'>
|
<div>
|
||||||
<Image style={{ height: 'auto', width: '200px' }} alt='Support me on Ko-fi' src={kofi} />
|
<h4 class='text-2xl'>{m.donationCall()}</h4>
|
||||||
</a>
|
<div>
|
||||||
|
<span> {m.donationSteps()} </span>
|
||||||
|
<a href='https://discord.gg/AQc9vwGM' target='_blank' rel='noopener noreferrer'>Discord</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class='mt-1'>
|
||||||
|
<a target='_blank' rel='noopener noreferrer' href='https://ko-fi.com/sittingonclouds'>
|
||||||
|
<Image style={{ height: 'auto', width: '200px' }} alt='Support me on Ko-fi' src={kofi} />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr />
|
||||||
|
<div class='text-xl'>
|
||||||
|
<div class='flex items-center'>
|
||||||
|
<span>{m.brokenLinkContact()}</span>
|
||||||
|
<a class='' href='https://discord.gg/x23SFbE' target='_blank' rel='noopener noreferrer'>
|
||||||
|
<Image
|
||||||
|
alt='Join our Discord!'
|
||||||
|
class='rounded-md ml-2'
|
||||||
|
style={{
|
||||||
|
height: 'auto',
|
||||||
|
width: '130px'
|
||||||
|
}}
|
||||||
|
src={discord}
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class='mt-2'>
|
||||||
|
<span>{m.mediafirePermission()}</span>
|
||||||
|
<a class='ml-1 text-link hover:underline' href='https://www.youtube.com/watch?v=d6-hcbEozAQ'>
|
||||||
|
{m.mediafirePermissionGuide()}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<hr />
|
<!-- Comment List here -->
|
||||||
<div class='text-xl'>
|
<div class='mt-2 bg-dark/85 rounded-xl uppercase text-4xl font-semibold text-center py-2 px-1.5'>
|
||||||
<div class='flex items-center'>
|
{m.relatedAlbums()}
|
||||||
<span>{m.brokenLinkContact()}</span>
|
</div>
|
||||||
<a class='' href='https://discord.gg/x23SFbE' target='_blank' rel='noopener noreferrer'>
|
<div class='mt-2'>
|
||||||
<Image
|
<div class='grid grid-cols-4 gap-x-1.5 justify-items-center'>
|
||||||
alt='Join our Discord!'
|
{
|
||||||
class='rounded-md ml-2'
|
album?.relatedAlbumList.map(({ relatedAlbum }) => (
|
||||||
style={{
|
<AlbumBox
|
||||||
height: 'auto',
|
title={relatedAlbum?.title}
|
||||||
width: '130px'
|
href={`/album?./${relatedAlbum?.id}`}
|
||||||
}}
|
image={`/album?./${relatedAlbum?.id}.png`}
|
||||||
src={discord}
|
/>
|
||||||
/>
|
))
|
||||||
</a>
|
}
|
||||||
</div>
|
|
||||||
<div class='mt-2'>
|
|
||||||
<span>{m.mediafirePermission()}</span>
|
|
||||||
<a class='ml-1 text-link hover:underline' href='https://www.youtube.com/watch?v=d6-hcbEozAQ'>
|
|
||||||
{m.mediafirePermissionGuide()}
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<hr />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Comment List here -->
|
|
||||||
<div class='mt-2 bg-dark uppercase text-4xl font-semibold rounded-md text-center py-4 px-1.5'>
|
|
||||||
{m.relatedAlbums()}
|
|
||||||
</div>
|
|
||||||
<div class='mt-2'>
|
|
||||||
<div class='grid grid-cols-4 gap-x-1.5'>
|
|
||||||
{
|
|
||||||
album?.relatedAlbumList.map(({ relatedAlbum }) => (
|
|
||||||
<AlbumBox
|
|
||||||
title={relatedAlbum?.title}
|
|
||||||
href={`/album/${relatedAlbum?.id}`}
|
|
||||||
image={`/album/${relatedAlbum?.id}.png`}
|
|
||||||
/>
|
|
||||||
))
|
|
||||||
}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue