mirror of
https://github.com/supabase/supabase.git
synced 2026-10-13 13:19:09 +03:00
Saxon FletcherandClaude Opus 4.8
fb02182e86
## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES/NO ## What kind of change does this PR introduce? Bug fix, feature, docs update, ... ## What is the current behavior? Please link any relevant issues here. ## What is the new behavior? Feel free to include screenshots if it includes visual changes. ## Additional context Add any other context or screenshots. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Refreshed theming across the UI to use modern color expressions and shared theme variables (including OKLCH-based gradients), improving consistency for charts, code blocks, overlays, icons, and decorative backgrounds. * **Bug Fixes** * Improved light/dark color and gradient consistency across axis/grid styling, reference lines, buttons/badges, sidebar accents, loaders, and other visual components. * **Documentation** * Updated styling/theming guidance to align with the revised semantic token system and the updated theme variable usage patterns. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
95 lines
3.4 KiB
TypeScript
95 lines
3.4 KiB
TypeScript
import { ArrowRight } from 'lucide-react'
|
|
import Link from 'next/link'
|
|
import { useAudio } from 'react-use'
|
|
import { cn } from 'ui'
|
|
|
|
const Player = () => {
|
|
const [audio, state, controls, ref] = useAudio({
|
|
src: 'https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/audio/supabase-album/Bernard.m4a',
|
|
loop: true,
|
|
})
|
|
|
|
const isPlaying = state.playing
|
|
const trackName = audio.props.src?.split('/')?.slice(-1)?.toString()?.split('.')[0]
|
|
const duration = ref?.current?.duration ?? 0
|
|
const progress = (state.time * 100) / duration
|
|
const playerLength = 47
|
|
const playerProgress = -(progress * playerLength) / 100 - playerLength
|
|
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
{audio}
|
|
<Link
|
|
href="https://supabase.productions/"
|
|
target="_blank"
|
|
className={cn(
|
|
'opacity-0 outline-hidden group translate-x-2 ease-[cubic-bezier(.24,0,.22,.99)]! duration-200 transition-all text-foreground-muted hover:text-foreground leading-3! font-mono uppercase text-[10px] flex flex-col text-right',
|
|
isPlaying && 'opacity-100 translate-x-0'
|
|
)}
|
|
>
|
|
<span className="text-border-strong">Now playing</span>
|
|
<span className="tracking-widest flex justify-end gap-px text-right translate-x-0 transition-transform group-hover:-translate-x-2">
|
|
{trackName}
|
|
<ArrowRight className="w-3 h-3 opacity-0 group-hover:opacity-100 -mr-full absolute -right-3 text-current transition-opacity" />
|
|
</span>
|
|
</Link>
|
|
<button
|
|
onClick={isPlaying ? controls.pause : controls.play}
|
|
className="relative outline-border-muted w-7 h-7 opacity-70 hover:opacity-100 rounded-full flex items-center justify-center text-foreground-muted hover:text-foreground-lighter transition-opacity"
|
|
style={{
|
|
background: `radial-gradient(closest-side, #060809 79%, transparent 95% 100%),conic-gradient(var(--foreground-lighter) ${progress.toFixed()}%, var(--border-muted) 0)`,
|
|
}}
|
|
>
|
|
<svg
|
|
className="absolute inset-0 w-full h-full -rotate-90"
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 16 16"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<circle opacity="0.1" cx="8" cy="8" r="7.5" stroke="var(--foreground-default)" />
|
|
<circle
|
|
cx="8"
|
|
cy="8"
|
|
r="7.5"
|
|
stroke="white"
|
|
opacity="0.4"
|
|
strokeLinecap="round"
|
|
className={cn('transition-opacity', isPlaying ? 'opacity-30' : 'opacity-10')}
|
|
strokeDasharray={playerLength}
|
|
strokeDashoffset={playerProgress}
|
|
/>
|
|
</svg>
|
|
|
|
{isPlaying ? (
|
|
<svg
|
|
className="w-2.5 h-2.5"
|
|
width="12"
|
|
height="12"
|
|
viewBox="0 0 12 12"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<rect x="1" width="4" height="12" fill="currentColor" />
|
|
<rect x="7" width="4" height="12" fill="currentColor" />
|
|
</svg>
|
|
) : (
|
|
<svg
|
|
className="w-2.5 h-2.5 transform translate-x-px"
|
|
width="11"
|
|
height="12"
|
|
viewBox="0 0 11 12"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path d="M11.0075 6L0.20752 0V12" fill="currentColor" />
|
|
</svg>
|
|
)}
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Player
|