ershisan99/www
1
0
Fork 0
mirror of https://github.com/ershisan99/www.git synced 2025-12-17 12:34:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

maybe fix timezones?

Browse Source
This commit is contained in:
Andres
2025-04-28 15:51:43 +02:00
parent 140b55dede
commit 65150145de
2 changed files with 78 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
src/app/(home)/major-league-balatro/_components/next-match-info-card.tsx
View File

@@ -1,3 +1,4 @@
import { TimeZoneProvider } from '@/components/timezone-provider'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
import { import {
DropdownMenu, DropdownMenu,
@@ -24,67 +25,69 @@ export function NextMatchInfoCard({
bestOf, bestOf,
}: NextMatchInfoCardProps) { }: NextMatchInfoCardProps) {
return ( return (
<div className='mt-10 overflow-hidden rounded-xl border bg-card/60 shadow-lg backdrop-blur-sm'> <TimeZoneProvider>
<div className='flex items-center justify-between gap-4 px-6 py-4'> <div className='mt-10 overflow-hidden rounded-xl border bg-card/60 shadow-lg backdrop-blur-sm'>
<div className={'flex flex-col gap-1'}> <div className='flex items-center justify-between gap-4 px-6 py-4'>
<div className='text-center text-muted-foreground text-sm'> <div className={'flex flex-col gap-1'}>
{typeof week === 'string' ? week : `Week ${week}`} <div className='text-center text-muted-foreground text-sm'>
{typeof week === 'string' ? week : `Week ${week}`}
</div>
<div className={'font-bold text-muted-foreground text-sm'}>
Best of {bestOf}
</div>
</div> </div>
<div className={'font-bold text-muted-foreground text-sm'}>
Best of {bestOf}
</div>
</div>
<div> <div>
<h3 className='flex items-center gap-2 font-bold text-xl md:text-2xl'> <h3 className='flex items-center gap-2 font-bold text-xl md:text-2xl'>
<div className={'flex items-center gap-2'}> <div className={'flex items-center gap-2'}>
<PlayerAvatar <PlayerAvatar
className={'size-16'} className={'size-16'}
playerName={player1.name} playerName={player1.name}
img={player1.picture} img={player1.picture}
/> />
{player1.name}
</div>
<span className='text-red-500'>vs</span>
<div className={'flex items-center gap-2'}>
{player2.name}
<PlayerAvatar
className={'size-16'}
playerName={player2.name}
img={player2.picture}
/>
</div>
</h3>
</div>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button className='w-full gap-2 bg-red-600 text-white hover:bg-red-700 md:w-auto'>
<SiTwitch className='h-4 w-4' />
Watch Live
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem asChild>
<Link
href={`https://twitch.tv/${player1.socials.twitch}`}
target='_blank'
rel='noopener noreferrer'
>
{player1.name} {player1.name}
</Link> </div>
</DropdownMenuItem> <span className='text-red-500'>vs</span>
<DropdownMenuItem asChild> <div className={'flex items-center gap-2'}>
<Link
href={`https://twitch.tv/${player2.socials.twitch}`}
target='_blank'
rel='noopener noreferrer'
>
{player2.name} {player2.name}
</Link> <PlayerAvatar
</DropdownMenuItem> className={'size-16'}
</DropdownMenuContent> playerName={player2.name}
</DropdownMenu> img={player2.picture}
/>
</div>
</h3>
</div>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button className='w-full gap-2 bg-red-600 text-white hover:bg-red-700 md:w-auto'>
<SiTwitch className='h-4 w-4' />
Watch Live
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem asChild>
<Link
href={`https://twitch.tv/${player1.socials.twitch}`}
target='_blank'
rel='noopener noreferrer'
>
{player1.name}
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link
href={`https://twitch.tv/${player2.socials.twitch}`}
target='_blank'
rel='noopener noreferrer'
>
{player2.name}
</Link>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
</div> </div>
</div> </TimeZoneProvider>
) )
} }

18
src/components/timezone-provider.tsx Normal file
View File

@@ -0,0 +1,18 @@
'use client'
import { NextIntlClientProvider, useLocale } from 'next-intl'
import { useEffect, useState } from 'react'
export function TimeZoneProvider({ children }: { children: React.ReactNode }) {
const [timeZone, setTimeZone] = useState<string>()
const locale = useLocale()
useEffect(() => {
setTimeZone(Intl.DateTimeFormat().resolvedOptions().timeZone)
}, [])
return (
<NextIntlClientProvider timeZone={timeZone} locale={locale}>
{children}
</NextIntlClientProvider>
)
}