mirror of https://github.com/btahir/next-beats
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
35 lines
1.0 KiB
TypeScript
35 lines
1.0 KiB
TypeScript
import React from 'react'
|
|
import { Channel } from '@/types/lofi'
|
|
|
|
interface ChannelButtonsProps {
|
|
channels: Channel[]
|
|
currentChannel: number
|
|
setCurrentChannel: (index: number) => void
|
|
currentTheme: string
|
|
}
|
|
|
|
const ChannelButtons: React.FC<ChannelButtonsProps> = ({
|
|
channels,
|
|
currentChannel,
|
|
setCurrentChannel,
|
|
currentTheme,
|
|
}) => (
|
|
<div className="flex space-x-2 overflow-x-auto pb-2">
|
|
{channels.map((channel, idx) => (
|
|
<button
|
|
key={idx}
|
|
onClick={() => setCurrentChannel(idx)}
|
|
className={`flex-shrink-0 rounded-[var(--lofi-button-radius)] px-3 py-1 font-mono text-xs shadow-[var(--lofi-card-shadow)] transition-colors ${
|
|
currentChannel === idx
|
|
? 'bg-[var(--lofi-accent)] text-white hover:bg-[var(--lofi-accent-hover)]'
|
|
: 'bg-[var(--lofi-button-bg)] text-[var(--lofi-button-text)] hover:bg-[var(--lofi-button-hover)]'
|
|
}`}
|
|
>
|
|
CH{idx + 1} {channel.isCustom && '★'}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)
|
|
|
|
export default ChannelButtons
|