aiden
/
next-beats
mirror of https://github.com/btahir/next-beats
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

move vol to right on large screens

Browse Source
main
btahir89 12 months ago
parent ce38039996
commit 02c8408ba2
1 changed files with 25 additions and 26 deletions
Show Stats Download Patch File Download Diff File

51
components/PlaybackControls.tsx
Unescape Escape View File

@ -24,7 +24,7 @@ const PlaybackControls: React.FC<PlaybackControlsProps> = ({
setVolume, setVolume,
changeChannel, changeChannel,
}) => ( }) => (
<div className="flex w-full items-center justify-between gap-2"> <div className="flex w-full items-center justify-between sm:justify-start sm:gap-8">
{/* Left Side - Playback Controls */} {/* Left Side - Playback Controls */}
<div className="flex shrink-0 items-center space-x-1"> <div className="flex shrink-0 items-center space-x-1">
<button <button
@ -49,31 +49,30 @@ const PlaybackControls: React.FC<PlaybackControlsProps> = ({
> >
<SkipForward size={14} className="sm:h-4 sm:w-4" /> <SkipForward size={14} className="sm:h-4 sm:w-4" />
</button> </button>
</div> {/* Right Side - Volume Control */}
<div className="flex min-w-[90px] items-center space-x-1 sm:min-w-[110px] sm:space-x-2">
{/* Right Side - Volume Control */} <button
<div className="flex min-w-[90px] items-center space-x-1 sm:min-w-[110px] sm:space-x-2"> onClick={() => setVolume(volume === 0 ? 0.5 : 0)}
<button className="hidden sm:block rounded-[var(--lofi-button-radius)] px-1 py-1.5 text-[var(--lofi-text-primary)] shadow-[var(--lofi-card-shadow)] hover:bg-[var(--lofi-card-hover)] sm:p-2"
onClick={() => setVolume(volume === 0 ? 0.5 : 0)} >
className="hidden sm:block rounded-[var(--lofi-button-radius)] px-1 py-1.5 text-[var(--lofi-text-primary)] shadow-[var(--lofi-card-shadow)] hover:bg-[var(--lofi-card-hover)] sm:p-2" {volume === 0 ? (
> <VolumeX size={14} className="sm:h-4 sm:w-4" />
{volume === 0 ? ( ) : volume < 0.5 ? (
<VolumeX size={14} className="sm:h-4 sm:w-4" /> <Volume1 size={14} className="sm:h-4 sm:w-4" />
) : volume < 0.5 ? ( ) : (
<Volume1 size={14} className="sm:h-4 sm:w-4" /> <Volume2 size={14} className="sm:h-4 sm:w-4" />
) : ( )}
<Volume2 size={14} className="sm:h-4 sm:w-4" /> </button>
)} <input
</button> type="range"
<input min={0}
type="range" max={1}
min={0} step={0.01}
max={1} value={volume}
step={0.01} onChange={(e) => setVolume(parseFloat(e.target.value))}
value={volume} className="h-1 w-full cursor-pointer accent-[var(--lofi-accent)] rounded-lg bg-[var(--lofi-card-hover)]"
onChange={(e) => setVolume(parseFloat(e.target.value))} />
className="h-1 w-full cursor-pointer accent-[var(--lofi-accent)] rounded-lg bg-[var(--lofi-card-hover)]" </div>
/>
</div> </div>
</div> </div>
) )

Write Preview
Loading…
Cancel
Save