diff --git a/src/app/(home)/major-league-balatro/_components/match-card.tsx b/src/app/(home)/major-league-balatro/_components/match-card.tsx new file mode 100644 index 0000000..74dfca6 --- /dev/null +++ b/src/app/(home)/major-league-balatro/_components/match-card.tsx @@ -0,0 +1,153 @@ +import { PlayerAvatar } from '@/app/(home)/major-league-balatro/_components/player-avatar' +import { players } from '@/app/(home)/major-league-balatro/_constants/players' +import type { Match } from '@/app/(home)/major-league-balatro/types' +import { Button } from '@/components/ui/button' +import { Card } from '@/components/ui/card' +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from '@/components/ui/dropdown-menu' +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from '@/components/ui/mobile-tooltip' +import { SiTwitch, SiYoutube } from '@icons-pack/react-simple-icons' +import { TvMinimalPlay } from 'lucide-react' +import { useFormatter } from 'next-intl' +import Link from 'next/link' +import type React from 'react' + +type MatchCardProps = { + match: Match +} +export const MatchCard = ({ match }: MatchCardProps) => { + const formatter = useFormatter() + const { player1Id, player2Id, datetime, completed, vod1, vod2 } = match + const date = formatter.dateTime(datetime, { + month: 'long', + day: 'numeric', + }) + const time = formatter.dateTime(datetime, { + timeStyle: 'short', + }) + const player1 = players[player1Id] + const player2 = players[player2Id] + + if (!player1) { + throw new Error(`Player ${player1Id} not found`) + } + if (!player2) { + throw new Error(`Player ${player2Id} not found`) + } + + return ( + +
+
+
+ + + + + {date} • {time} + + + +
Date and time are shown for your current timezone.
+ + + +
+
+
+
+
+
+ + +
+
+

+ {player1.name} vs {player2.name} +

+
+
+
+ {completed ? ( + <> + + + + + + {vod1 && ( + + + + {player1.name} + + + )} + {vod2 && ( + + + + {player2.name} + + + )} + + + + ) : ( + + + + + + + + {player1.name} + + + + + {player2.name} + + + + + )} +
+
+
+
+ + ) +} diff --git a/src/app/(home)/major-league-balatro/_components/organizer.tsx b/src/app/(home)/major-league-balatro/_components/organizer.tsx index e58872f..697d0bf 100644 --- a/src/app/(home)/major-league-balatro/_components/organizer.tsx +++ b/src/app/(home)/major-league-balatro/_components/organizer.tsx @@ -1,5 +1,7 @@ +import { PlayerAvatar } from '@/app/(home)/major-league-balatro/_components/player-avatar' +import { players } from '@/app/(home)/major-league-balatro/_constants/players' import { Button } from '@/components/ui/button' -import { ExternalLink, Twitch, Users, Youtube } from 'lucide-react' +import { SiTwitch, SiYoutube } from '@icons-pack/react-simple-icons' import Link from 'next/link' export function Organizer() { @@ -14,7 +16,11 @@ export function Organizer() {
- +
@@ -31,7 +37,7 @@ export function Organizer() { rel='noopener noreferrer' > @@ -41,7 +47,7 @@ export function Organizer() { rel='noopener noreferrer' > diff --git a/src/app/(home)/major-league-balatro/_components/schedule.tsx b/src/app/(home)/major-league-balatro/_components/schedule.tsx index a13826e..490450a 100644 --- a/src/app/(home)/major-league-balatro/_components/schedule.tsx +++ b/src/app/(home)/major-league-balatro/_components/schedule.tsx @@ -1,28 +1,9 @@ -import { players } from '@/app/(home)/major-league-balatro/_constants/players' +import { MatchCard } from '@/app/(home)/major-league-balatro/_components/match-card' import { Badge } from '@/components/ui/badge' -import { Button } from '@/components/ui/button' -import { Card } from '@/components/ui/card' -import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuItem, - DropdownMenuTrigger, -} from '@/components/ui/dropdown-menu' import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs' import { cn } from '@/lib/utils' -import { SiTwitch, SiYoutube } from '@icons-pack/react-simple-icons' -import { - Calendar, - Camera, - Clock, - TvMinimalPlay, - Twitch, - Youtube, -} from 'lucide-react' -import Link from 'next/link' import { useMemo } from 'react' import type { BadgeProps, Match, WeekConfig } from '../types' -import { PlayerAvatar } from './player-avatar' const WEEK_CONFIG: Record = { 1: { @@ -110,181 +91,6 @@ type MatchDivisionProps = { division: 'Blue' | 'Red' } -const MatchDivision = ({ division }: MatchDivisionProps) => { - const bgColor = division === 'Blue' ? 'bg-blue-950/20' : 'bg-red-950/20' - const textColor = - division === 'Blue' - ? 'border-blue-500 text-blue-500' - : 'border-red-500 text-red-500' - - return ( -
- - {division} Division - -
- ) -} - -type MatchDateTimeProps = { - date: string - time: string -} - -const MatchDateTime = ({ date, time }: MatchDateTimeProps) => ( -
- - {date} - - {time} -
-) - -type VodButtonProps = { - url: string - player: string -} - -const VodButton = ({ url, player }: VodButtonProps) => ( - - - -) - -type LiveButtonProps = { - username: string -} - -const LiveButton = ({ username }: LiveButtonProps) => ( - - - -) - -type MatchCardProps = { - match: Match -} - -const MatchCard = ({ match }: MatchCardProps) => { - const { player1Id, player2Id, date, time, completed, vod1, vod2 } = match - - const player1 = players[player1Id] - const player2 = players[player2Id] - - if (!player1) { - throw new Error(`Player ${player1Id} not found`) - } - if (!player2) { - throw new Error(`Player ${player2Id} not found`) - } - - return ( - -
-
-
- {date} • {time} -
-
-
-
-
-
- - -
-
-

- {player1.name} vs {player2.name} -

-
-
-
- {completed ? ( - <> - - - - - - {vod1 && ( - - - - {player1.name} - - - )} - {vod2 && ( - - - - {player2.name} - - - )} - - - - ) : ( - - - - - - - - {player1.name} - - - - - {player2.name} - - - - - )} -
-
-
-
- - ) -} - type WeekTabProps = { week: string | number matches: Match[] @@ -339,7 +145,7 @@ export function MlbSchedule({ matches }: MlbScheduleProps) { sortedMatches.find((match) => new Date(match.datetime) > now)?.week || 1 ) }, [sortedMatches]) - console.log(currentWeek) + return (
diff --git a/src/app/(home)/major-league-balatro/_constants/players.ts b/src/app/(home)/major-league-balatro/_constants/players.ts index a2eae7c..f3f9c1c 100644 --- a/src/app/(home)/major-league-balatro/_constants/players.ts +++ b/src/app/(home)/major-league-balatro/_constants/players.ts @@ -1,6 +1,6 @@ import type { Player } from '../types' -export const players: Record = { +export const players = { roffle: { id: 'roffle', name: 'Roffle', @@ -120,4 +120,4 @@ export const players: Record = { youtube: 'seadubbs11', }, }, -} +} satisfies Record diff --git a/src/components/ui/avatar.tsx b/src/components/ui/avatar.tsx index a4578f2..e73a8aa 100644 --- a/src/components/ui/avatar.tsx +++ b/src/components/ui/avatar.tsx @@ -4,6 +4,7 @@ import * as AvatarPrimitive from '@radix-ui/react-avatar' import type * as React from 'react' import { cn } from '@/lib/utils' +import { CDN_URL } from '@/shared/constants' function Avatar({ className, @@ -23,12 +24,16 @@ function Avatar({ function AvatarImage({ className, + src, ...props }: React.ComponentProps) { + const isDev = process.env.NODE_ENV === 'development' + return ( )