mirror of
https://github.com/qier222/YesPlayMusic.git
synced 2025-02-28 16:08:39 +08:00
40 lines
871 B
TypeScript
40 lines
871 B
TypeScript
import { cx } from '@emotion/css'
|
|
|
|
function Tabs<T>({
|
|
tabs,
|
|
value,
|
|
onChange,
|
|
className,
|
|
style,
|
|
}: {
|
|
tabs: {
|
|
id: T
|
|
name: string
|
|
}[]
|
|
value: string
|
|
onChange: (id: T) => void
|
|
className?: string
|
|
style?: React.CSSProperties
|
|
}) {
|
|
return (
|
|
<div className={cx('no-scrollbar flex overflow-y-auto', className)} style={style}>
|
|
{tabs.map(tab => (
|
|
<div
|
|
key={tab.id as string}
|
|
className={cx(
|
|
'mr-2.5 rounded-12 py-3 px-6 text-16 font-medium backdrop-blur transition duration-500',
|
|
value === tab.id
|
|
? 'bg-brand-700 text-white'
|
|
: 'dark:bg-white/10 dark:text-white/20 hover:dark:bg-white/20 hover:dark:text-white/40'
|
|
)}
|
|
onClick={() => onChange(tab.id)}
|
|
>
|
|
{tab.name}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Tabs
|