girineko/YesPlayMusic
1
0
Fork 0
mirror of https://github.com/GiriNeko/YesPlayMusic.git synced 2025-12-17 21:58:03 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: updates

Browse source
This commit is contained in:
qier222 2022-08-22 16:51:23 +08:00
parent ebebf2a733
commit a1b0bcf4d3
No known key found for this signature in database
GPG key ID: 9C85007ED905F14D
68 changed files with 4776 additions and 5559 deletions
Download patch file Download diff file Expand all files Collapse all files

58
packages/web/components/New/TrackListHeader/Info.tsx
View file

@ -4,6 +4,7 @@ import dayjs from 'dayjs'
import { useNavigate } from 'react-router-dom'
import useIsMobile from '@/web/hooks/useIsMobile'
import { ReactNode } from 'react'
import { AnimatePresence, motion } from 'framer-motion'
const Info = ({
title,
@ -11,12 +12,14 @@ const Info = ({
creatorLink,
description,
extraInfo,
isLoading,
}: {
title?: string
creatorName?: string
creatorLink?: string
description?: string
extraInfo?: string | ReactNode
isLoading?: boolean
}) => {
const navigate = useNavigate()
const isMobile = useIsMobile()
@ -24,33 +27,56 @@ const Info = ({
return (
<div>
{/* Title */}
<div className='mt-2.5 text-28 font-semibold dark:text-white/80 lg:mt-0 lg:text-36 lg:font-medium'>
{title}
</div>
{isLoading ? (
<div className='mt-2.5 text-28 font-semibold text-transparent lg:mt-0 lg:text-36 lg:font-medium'>
<span className='rounded-full bg-white/10'>PLACEHOLDER</span>
</div>
) : (
<div className='mt-2.5 text-28 font-semibold transition-colors duration-300 dark:text-white/80 lg:mt-0 lg:text-36 lg:font-medium'>
{title}
</div>
)}
{/* Creator */}
<div className='mt-2.5 lg:mt-6'>
<span
onClick={() => creatorLink && navigate(creatorLink)}
className='text-24 font-medium transition-colors duration-300 dark:text-white/40 hover:dark:text-neutral-100 '
>
{creatorName}
</span>
</div>
{isLoading ? (
<div className='mt-2.5 lg:mt-6'>
<span className='text-24 font-medium text-transparent'>
<span className='rounded-full bg-white/10'>PLACEHOLDER</span>
</span>
</div>
) : (
<div className='mt-2.5 lg:mt-6'>
<span
onClick={() => creatorLink && navigate(creatorLink)}
className='text-24 font-medium transition-colors duration-300 dark:text-white/40 hover:dark:text-neutral-100'
>
{creatorName}
</span>
</div>
)}
{/* Extra info */}
<div className='mt-1 flex items-center text-12 font-medium dark:text-white/40 lg:text-14 lg:font-bold'>
{extraInfo}
</div>
{isLoading ? (
<div className='mt-1 flex items-center text-12 font-medium text-transparent lg:text-14 lg:font-bold'>
<span className='rounded-full bg-white/10'>PLACEHOLDER</span>
</div>
) : (
<div className='mt-1 flex items-center text-12 font-medium transition-colors duration-300 dark:text-white/40 lg:text-14 lg:font-bold'>
{extraInfo}
</div>
)}
{/* Description */}
{!isMobile && (
<div
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.3 }}
className='line-clamp-3 mt-6 whitespace-pre-wrap text-14 font-bold dark:text-white/40'
dangerouslySetInnerHTML={{
__html: description || '',
}}
></div>
></motion.div>
)}
</div>
)