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

feat: updates

Browse source
This commit is contained in:
qier222 2022-06-11 00:19:07 +08:00
parent 4c90db789b
commit 196a974a64
No known key found for this signature in database
GPG key ID: 9C85007ED905F14D
21 changed files with 291 additions and 191 deletions
Download patch file Download diff file Expand all files Collapse all files

23
packages/web/components/New/Topbar/SearchBox.tsx
View file

@ -1,13 +1,30 @@
import { css, cx } from '@emotion/css'
import Icon from '../../Icon'
import { breakpoint as bp } from '@/web/utils/const'
const SearchBox = () => {
return (
<div className='app-region-no-drag flex items-center rounded-full bg-day-600 p-2.5 text-neutral-500 dark:bg-night-600 lg:min-w-[284px]'>
<div
className={cx(
'app-region-no-drag flex items-center rounded-full bg-day-600 p-2.5 text-neutral-500 dark:bg-night-600',
css`
${bp.lg} {
min-width: 284px;
}
`
)}
>
<Icon name='search' className='mr-2.5 h-7 w-7' />
<input
placeholder='Artist, songs and more'
className='bg-transparent font-medium placeholder:text-neutral-500 dark:text-neutral-200'
placeholder='Search'
className={cx(
'flex-shrink bg-transparent font-medium placeholder:text-neutral-500 dark:text-neutral-200',
css`
@media (max-width: 360px) {
width: 142px;
}
`
)}
/>
</div>
)

10
packages/web/components/New/Topbar/SettingsButton.tsx
View file

@ -1,8 +1,14 @@
import Icon from '@/web/components/Icon'
import { cx } from '@emotion/css'
const SettingsButton = () => {
const SettingsButton = ({ className }: { className?: string }) => {
return (
<button className='app-region-no-drag rounded-full bg-day-600 p-2.5 dark:bg-night-600'>
<button
className={cx(
'app-region-no-drag rounded-full bg-day-600 p-2.5 dark:bg-night-600',
className
)}
>
<Icon name='placeholder' className='h-7 w-7 text-neutral-500' />
</button>
)

3
packages/web/components/New/Topbar/TopbarMobile.tsx
View file

@ -1,3 +1,4 @@
import { css } from '@emotion/css'
import Avatar from './Avatar'
import SearchBox from './SearchBox'
import SettingsButton from './SettingsButton'
@ -9,7 +10,7 @@ const TopbarMobile = () => {
<SearchBox />
</div>
<div className='ml-6 flex'>
<div className='ml-6 flex flex-shrink-0'>
<SettingsButton />
<div className='ml-3'>
<Avatar />