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

feat: updates

Browse source
This commit is contained in:
qier222 2022-03-17 19:30:43 +08:00
parent d96bd2a547
commit e3486ab550
No known key found for this signature in database
GPG key ID: 9C85007ED905F14D
23 changed files with 331 additions and 261 deletions
Download patch file Download diff file Expand all files Collapse all files

19
packages/renderer/src/components/Sidebar.tsx
View file

@ -3,6 +3,7 @@ import SvgIcon from '@/components/SvgIcon'
import { prefetchPlaylist } from '@/hooks/usePlaylist'
import useUser from '@/hooks/useUser'
import useUserPlaylists from '@/hooks/useUserPlaylists'
import { scrollToTop } from '@/utils/common'
interface Tab {
name: string
@ -34,9 +35,10 @@ const primaryTabs: PrimaryTab[] = [
const PrimaryTabs = () => {
return (
<div>
<div className="app-region-drag h-14"></div>
<div className='app-region-drag h-14'></div>
{primaryTabs.map(tab => (
<NavLink
onClick={() => scrollToTop()}
key={tab.route}
to={tab.route}
className={({ isActive }: { isActive: boolean }) =>
@ -47,12 +49,12 @@ const PrimaryTabs = () => {
)
}
>
<SvgIcon className="mr-3 h-6 w-6" name={tab.icon} />
<span className="font-semibold">{tab.name}</span>
<SvgIcon className='mr-3 h-6 w-6' name={tab.icon} />
<span className='font-semibold'>{tab.name}</span>
</NavLink>
))}
<div className="mx-5 my-2 h-px bg-black opacity-5 dark:bg-white dark:opacity-10"></div>
<div className='mx-5 my-2 h-px bg-black opacity-5 dark:bg-white dark:opacity-10'></div>
</div>
)
}
@ -65,10 +67,11 @@ const Playlists = () => {
})
return (
<div className="mb-16 overflow-auto pb-2">
<div className='mb-16 overflow-auto pb-2'>
{playlists?.playlist?.map(playlist => (
<NavLink
key={playlist.id}
onClick={() => scrollToTop()}
to={`/playlist/${playlist.id}`}
onMouseOver={() => prefetchPlaylist({ id: playlist.id })}
className={({ isActive }: { isActive: boolean }) =>
@ -78,7 +81,7 @@ const Playlists = () => {
)
}
>
<span className="line-clamp-1">{playlist.name}</span>
<span className='line-clamp-1'>{playlist.name}</span>
</NavLink>
))}
</div>
@ -88,8 +91,8 @@ const Playlists = () => {
const Sidebar = () => {
return (
<div
id="sidebar"
className="grid h-screen max-w-sm grid-rows-[12rem_auto] border-r border-gray-300/10 bg-gray-50 bg-opacity-[.85] dark:border-gray-500/10 dark:bg-gray-900 dark:bg-opacity-80"
id='sidebar'
className='grid h-screen max-w-sm grid-rows-[12rem_auto] border-r border-gray-300/10 bg-gray-50 bg-opacity-[.85] dark:border-gray-500/10 dark:bg-gray-900 dark:bg-opacity-80'
>
<PrimaryTabs />
<Playlists />