` is where all your content goes.
36 | */
37 | .content {
38 | margin: 0 auto;
39 | padding: 0 2em;
40 | max-width: 800px;
41 | margin-bottom: 50px;
42 | line-height: 1.6em;
43 | }
44 |
45 | .header {
46 | margin: 0;
47 | color: var(--off-white);
48 | text-align: center;
49 | padding: 2.5em 2em 0;
50 | border-bottom: 1px solid #eee;
51 | }
52 | .header h1 {
53 | margin: 0.2em 0;
54 | font-size: 3em;
55 | font-weight: 300;
56 | }
57 | .header h2 {
58 | font-weight: 300;
59 | color: #ccc;
60 | padding: 0;
61 | margin-top: 0;
62 | }
63 |
64 | .content-subhead {
65 | margin: 50px 0 20px 0;
66 | font-weight: 300;
67 | color: #888;
68 | }
69 |
70 |
71 |
72 | /*
73 | The `#menu` `
` is the parent `
` that contains the `.pure-menu` that
74 | appears on the left side of the page.
75 | */
76 |
77 | #menu {
78 | margin-left: -190px; /* "#menu" width */
79 | width: 190px;
80 | position: fixed;
81 | top: 2.1em;
82 | left: 0;
83 | bottom: 0;
84 | z-index: 1000; /* so the menu or its navicon stays above all content */
85 | background: var(--egyptian-blue);
86 | overflow-y: auto;
87 | }
88 | /*
89 | All anchors inside the menu should be styled like this.
90 | */
91 | #menu a {
92 | color: var(--off-white);
93 | border: none;
94 | padding: 0.6em 0 0.6em 0.6em;
95 | }
96 |
97 | /*
98 | Remove all background/borders, since we are applying them to #menu.
99 | */
100 | #menu .pure-menu,
101 | #menu .pure-menu ul {
102 | border: none;
103 | background: transparent;
104 | }
105 |
106 | /*
107 | Add that light border to separate items into groups.
108 | */
109 | #menu .pure-menu ul,
110 | #menu .pure-menu .menu-item-divided {
111 | border-top: 1px solid var(--off-white);
112 | }
113 | /*
114 | Change color of the anchor links on hover/focus.
115 | */
116 | #menu .pure-menu li a:hover,
117 | #menu .pure-menu li a:focus {
118 | background: var(--light-blue);
119 | color: var(--black);
120 | }
121 |
122 | /*
123 | This styles the selected menu item `
`.
124 | */
125 | #menu .pure-menu-selected,
126 | #menu .pure-menu-heading {
127 | background: var(--pink-lavender);
128 | color: var(--black);
129 | }
130 | /*
131 | This styles a link within a selected menu item ``.
132 | */
133 | #menu .pure-menu-selected a {
134 | color: var(--black);
135 | }
136 |
137 | /*
138 | This styles the menu heading.
139 | */
140 | #menu .pure-menu-heading {
141 | font-size: 110%;
142 | color: var(--white);
143 | margin: 0;
144 | }
145 |
146 | /* -- Dynamic Button For Responsive Menu -------------------------------------*/
147 |
148 | /*
149 | The button to open/close the Menu is custom-made and not part of Pure. Here's
150 | how it works:
151 | */
152 |
153 | /*
154 | `.menu-link` represents the responsive menu toggle that shows/hides on
155 | small screens.
156 | */
157 | .menu-link {
158 | position: fixed;
159 | display: block; /* show this only on small screens */
160 | top: 3.4em;
161 | left: 0; /* "#menu width" */
162 | background: var(--black);
163 | background: rgba(0,0,0,0.7);
164 | font-size: 10px; /* change this value to increase/decrease button size */
165 | z-index: 10;
166 | width: 2em;
167 | height: auto;
168 | padding: 2.1em 1.6em;
169 | }
170 |
171 | .menu-link:hover,
172 | .menu-link:focus {
173 | background: var(--black);
174 | }
175 |
176 | .menu-link span {
177 | position: relative;
178 | display: block;
179 | }
180 |
181 | .menu-link span,
182 | .menu-link span:before,
183 | .menu-link span:after {
184 | background-color: var(--white);
185 | pointer-events: none;
186 | width: 100%;
187 | height: 0.2em;
188 | }
189 |
190 | .menu-link span:before,
191 | .menu-link span:after {
192 | position: absolute;
193 | margin-top: -0.6em;
194 | content: " ";
195 | }
196 |
197 | .menu-link span:after {
198 | margin-top: 0.6em;
199 | }
200 |
201 |
202 | /* -- Responsive Styles (Media Queries) ------------------------------------- */
203 |
204 | /*
205 | Hides the menu at `48em`, but modify this based on your app's needs.
206 | */
207 | @media (min-width: 48em) {
208 |
209 | .header,
210 | .content {
211 | padding-left: 2em;
212 | padding-right: 2em;
213 | }
214 |
215 | #layout {
216 | padding-left: 95px; /* left col width "#menu" */
217 | left: 0;
218 | background-color: var(--off-white);
219 | }
220 | #menu {
221 | left: 190px;
222 | }
223 |
224 | .menu-link {
225 | position: fixed;
226 | left: 190px;
227 | display: none;
228 | }
229 |
230 | #layout.active .menu-link {
231 | left: 190px;
232 | }
233 | }
234 |
235 | @media (max-width: 48em) {
236 | /* Only apply this when the window is small. Otherwise, the following
237 | case results in extra padding on the left:
238 | * Make the window small.
239 | * Tap the menu to trigger the active state.
240 | * Make the window large again.
241 | */
242 | #layout.active {
243 | position: relative;
244 | left: 190px;
245 | }
246 | }
--------------------------------------------------------------------------------
/src/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import { Inter } from 'next/font/google'
2 | import TopBar from '@/ui/top-bar/top-bar'
3 | import { UserProvider } from '@auth0/nextjs-auth0/client'
4 | import React from 'react'
5 | import { Analytics } from '@vercel/analytics/react'
6 | import { getClient } from '@/lib/client'
7 | import { MeDocument } from '@/gql/documents.generated'
8 | import { User } from '@/gql/types.generated'
9 | import { redirect } from 'next/navigation'
10 | import './global-layout.css'
11 | import './design-tokens.css'
12 | import './utilities.css'
13 | import { fetchAccessToken } from '@/lib/util'
14 |
15 | const inter = Inter({ subsets: ['latin'] })
16 |
17 | export const metadata = {
18 | title: 'Parabolic Bet',
19 | description: 'Where your bet gains go parabolic',
20 | }
21 |
22 | async function getBettingUser(accessToken: string | undefined | null): Promise {
23 | try {
24 | const response = accessToken
25 | ? await getClient(true).query({
26 | query: MeDocument,
27 | context: {
28 | headers: {
29 | authorization: `Bearer ${accessToken}`,
30 | },
31 | },
32 | })
33 | : null
34 | return response?.data?.me ?? null
35 | } catch (e) {
36 | console.error(e)
37 | return null
38 | }
39 | }
40 |
41 | // @ts-ignore
42 | export default async function RootLayout({ children }: { children: React.ReactNode }) {
43 | const accessToken = await fetchAccessToken()
44 | const me = accessToken ? await getBettingUser(accessToken) : null
45 |
46 | if (accessToken && !me) {
47 | console.info('redirecting to login')
48 | redirect('/api/auth/login')
49 | }
50 |
51 | return (
52 |
53 |
54 | Parabolic Bet
55 |
59 |
65 |
69 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
{children}
80 |
81 |
41 |
setIsOpen(true)}
44 | >
45 |
46 | {getSlipTitle()}
47 |
Show selections ^
48 |
49 |
50 |
51 |
55 |
56 |
59 |
124 |
125 |
126 |
127 | {option.name} {getOptionPointLabel(option, option.market?.name ?? '')}
128 |
129 |
{option.odds.toFixed(2)}
130 |
131 |
132 |
133 |
{option.marketName}
134 |
{renderEventInfo()}
135 |
136 |
168 | {createdBetsCount > 1 ? createdBetsCount : 'Your'} bet
169 | {createdBetsCount > 1 ? 's were' : ' was'} placed!
170 |
171 | )
172 | }
173 | if (!slipState?.options) return null
174 | return (
175 | <>
176 |
177 | {slipState?.options.map((option: BetSlipOption) => (
178 | -
179 |
180 |
181 |
182 |
183 | ))}
184 |
185 |
208 |
209 | )
210 | }
211 |
--------------------------------------------------------------------------------
/src/ui/bet-slip/remove-slip-option-form.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { MarketOption } from '@/gql/types.generated'
4 | // @ts-ignore
5 | import { useFormStatus } from 'react-dom'
6 | import styles from '@/ui/bet-slip/bet-slip.module.css'
7 | import { useContext } from 'react'
8 | import { SlipContext } from '@/lib/slip-context'
9 |
10 | const initialSlipFormState = {
11 | message: null,
12 | }
13 |
14 | type Props = {
15 | option: MarketOption
16 | }
17 |
18 | function DeleteButton() {
19 | const { pending } = useFormStatus()
20 | return (
21 |
24 | )
25 | }
26 |
27 | export function RemoveSlipOptionForm({ option }: Props) {
28 | const slipSate = useContext(SlipContext)
29 | if (!slipSate) return null
30 | const { removeOption } = slipSate
31 |
32 | return (
33 |
40 | )
41 | }
42 |
--------------------------------------------------------------------------------
/src/ui/card/card-actions.module.css:
--------------------------------------------------------------------------------
1 | .actions {
2 | padding: var(--spacing-medium);
3 | display: flex;
4 | justify-content: flex-end;
5 | border-top: 1px solid var(--salmon);
6 | }
7 |
--------------------------------------------------------------------------------
/src/ui/card/card-actions.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import styles from './CardActions.module.css'
3 | import classnames from 'classnames'
4 |
5 | export type CardActionsProps = {
6 | children: React.ReactNode
7 | className?: string
8 | }
9 |
10 | export function CardActions({ children, className }: CardActionsProps) {
11 | return {children}
12 | }
13 |
--------------------------------------------------------------------------------
/src/ui/card/card-content.module.css:
--------------------------------------------------------------------------------
1 | .content {
2 | padding: var(--spacing-large);
3 | }
4 |
--------------------------------------------------------------------------------
/src/ui/card/card-content.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import styles from './card-content.module.css'
3 | import classnames from 'classnames'
4 |
5 | export type CardContentProps = {
6 | children: React.ReactNode
7 | className?: string
8 | }
9 |
10 | export function CardContent({ children, className }: CardContentProps) {
11 | return {children}
12 | }
13 |
--------------------------------------------------------------------------------
/src/ui/card/card-header.module.css:
--------------------------------------------------------------------------------
1 | .cardHeader {
2 | display: flex;
3 | align-items: center;
4 | padding: var(--spacing-x-large);
5 | background-color: var(--egyptian-blue);
6 | margin: var(--spacing-large-minus);
7 | color: var(--white);
8 | border-radius: var(--radius-large) var(--radius-large) 0 0;
9 | }
10 |
11 | .avatar {
12 | margin-right: var(--spacing-large);
13 | /* Adjust size as needed, or make it flexible based on content */
14 | }
15 |
16 | .headerContent {
17 | flex: 1;
18 | }
19 |
20 | .title {
21 | font-size: 1.25rem;
22 | font-weight: bold;
23 | margin: var(--spacing-small) var(--spacing-large);
24 | }
25 |
26 | .subheader {
27 | font-size: 0.875rem;
28 | color: var(--dark-grey);
29 | }
30 |
--------------------------------------------------------------------------------
/src/ui/card/card-header.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import styles from './card-header.module.css'
3 | import classnames from 'classnames'
4 |
5 | export type CardHeaderProps = {
6 | avatar?: React.ReactNode // Optional avatar or icon
7 | title: React.ReactNode
8 | subheader?: React.ReactNode
9 | className?: string
10 | children?: React.ReactNode
11 | }
12 |
13 | function CardHeader({ avatar, title, subheader, className, children }: CardHeaderProps) {
14 | return (
15 |
16 | {avatar &&
{avatar}
}
17 |
18 |
{title}
19 | {subheader &&
{subheader}
}
20 |
21 | {children}
22 |
32 |
40 | {children &&
{children}
}
41 |
{children}
12 | }
13 |
--------------------------------------------------------------------------------
/src/ui/date-util.ts:
--------------------------------------------------------------------------------
1 | import { DateTime } from 'luxon'
2 |
3 | export function formatTime(date: Date) {
4 | return DateTime.fromJSDate(date).toLocaleString({
5 | day: '2-digit',
6 | month: '2-digit',
7 | hour: '2-digit',
8 | minute: '2-digit',
9 | })
10 | }
11 |
--------------------------------------------------------------------------------
/src/ui/event-list/add-slip-option-form.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { Market, MarketOption } from '@/gql/types.generated'
4 | // @ts-ignore
5 | import styles from './event-list.module.css'
6 | import { useUser } from '@auth0/nextjs-auth0/client'
7 | import { EventFragment } from '@/gql/documents.generated'
8 | import { BetSlipOption } from '@/ui/bet-slip/bet-slip'
9 | import { useContext } from 'react'
10 | import { SlipContext } from '@/lib/slip-context'
11 |
12 | const initialSlipFormState = {
13 | message: null,
14 | }
15 |
16 | type Props = {
17 | option: MarketOption
18 | event: EventFragment
19 | market: Market
20 | }
21 |
22 | export function AddSlipOptionForm({ option, event, market }: Props) {
23 | const { user } = useUser()
24 | const slipSate = useContext(SlipContext)
25 |
26 | function handleClick(e: { preventDefault: () => void; stopPropagation: () => void }) {
27 | if (!user) {
28 | e.preventDefault()
29 | e.stopPropagation()
30 | console.log('redirecting to login')
31 | return (window.location.href = '/api/auth/login')
32 | }
33 | }
34 | if (!slipSate) return null
35 | return (
36 |
50 | )
51 | }
52 |
--------------------------------------------------------------------------------
/src/ui/event-list/elapsed-time.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 | import { formatTime } from '@/ui/date-util'
3 | import { useEffect, useState } from 'react'
4 |
5 | function elapsedTime(startTime: string) {
6 | const start = new Date(`${startTime}Z`)
7 | const now = new Date()
8 | return now.getTime() - start.getTime()
9 | }
10 |
11 | function formatStartTime(startTime: string) {
12 | const start = new Date(`${startTime}Z`)
13 | return formatTime(start)
14 | }
15 |
16 | export function ElapsedTime({ live, startTime }: { live: boolean; startTime: string }) {
17 | const [elapsed, setElapsed] = useState(elapsedTime(startTime))
18 |
19 | function formatDuration(ms: number): string {
20 | const padWithZero = (n: number): string => (n < 10 ? '0' + n : n.toString())
21 |
22 | const seconds = Math.floor(ms / 1000)
23 | const minutes = Math.floor(seconds / 60)
24 | const hours = Math.floor(minutes / 60)
25 |
26 | const remainingSeconds = seconds - minutes * 60
27 | const remainingMinutes = minutes - hours * 60
28 |
29 | return (
30 | (hours > 0 ? padWithZero(hours) + ':' : '') +
31 | (minutes > 0 || hours > 0 ? padWithZero(remainingMinutes) + ':' : '') +
32 | padWithZero(remainingSeconds)
33 | )
34 | }
35 |
36 | useEffect(() => {
37 | const interval = setInterval(() => {
38 | setElapsed(elapsedTime(startTime))
39 | }, 1000)
40 |
41 | return () => clearInterval(interval)
42 | }, [startTime])
43 |
44 | return {live ? formatDuration(elapsed) : formatStartTime(startTime)}
45 | }
46 |
--------------------------------------------------------------------------------
/src/ui/event-list/event-list.module.css:
--------------------------------------------------------------------------------
1 | .noEventsNote {
2 | text-align: center;
3 | }
4 |
5 | .noEventsNote > a {
6 | color: #be8ec4;
7 | font-weight: bold;
8 | }
9 |
10 | .content {
11 | margin-bottom: 1em;
12 | }
13 |
14 |
15 | .events {
16 | display: flex;
17 | flex-direction: row;
18 | width: 100%;
19 | flex-wrap: wrap;
20 | margin-top: 1em;
21 | gap: var(--spacing-medium);
22 | margin-bottom: 1em;
23 |
24 | justify-content: center;
25 | @media screen and (min-width: 80em) {
26 | justify-content: flex-start;
27 | }
28 | }
29 |
30 | @keyframes flash {
31 | from {
32 | background-color: hotpink;
33 | }
34 | to {
35 | background-color: initial;
36 | }
37 | }
38 |
39 | .eventWrapper {
40 | display: flex;
41 | flex-direction: column;
42 | border: 1px solid #ccc;
43 | border-radius: var(--radius-large);
44 | color: black;
45 | width: 430px;
46 | height: 235px;
47 | background-color: var(--off-white);
48 | }
49 |
50 | .eventWrapper.flash {
51 | animation: flash 2s;
52 | }
53 |
54 | .eventHeader {
55 | display: flex;
56 | flex-direction: row;
57 | justify-content: center;
58 | /*font-weight: 600;*/
59 | color: var(--black);
60 | background-color: var(--peach-yellow);
61 | margin-bottom: 1em;
62 | padding: .5em 1em;
63 | border-top-left-radius: var(--radius-large);
64 | border-top-right-radius: var(--radius-large);
65 | }
66 |
67 | .headerItem {
68 | display: flex;
69 | flex-direction: row;
70 | gap: 0.5em;
71 | text-align: center;
72 | max-width: 200px;
73 | }
74 |
75 | .headerSubItem {
76 | padding: 0.3em;
77 | }
78 |
79 | .headerSubItem2 {
80 | padding: 0.3em;
81 | background-color: var(--off-white);
82 | }
83 |
84 | .oddsWrapper {
85 | display: flex;
86 | flex-direction: row;
87 | justify-content: space-between;
88 | align-items: flex-end;
89 | padding: 0 2em;
90 | }
91 |
92 | .market {
93 | display: flex;
94 | flex-direction: column;
95 | width: 100%;
96 | text-align: center;
97 | }
98 |
99 | .eventName {
100 | display: flex;
101 | align-items: center;
102 | justify-content: center;
103 | height: 2em;
104 | font-size: 1.2rem;
105 | font-weight: 400;
106 | color: var(--black);
107 | text-align: center;
108 | min-height: 1.5rem;
109 | max-width: 400px;
110 | word-wrap: break-word;
111 | }
112 |
113 | .oddsBox {
114 | display: flex;
115 | flex-direction: row;
116 | justify-content: space-between;
117 | border-top: 2px solid var(--pink-lavender);
118 | margin-top: 1em;
119 | padding-top: 1em;
120 | }
121 |
122 | .oddsValue {
123 | margin-top: 8px;
124 | font-weight: bold;
125 | border-radius: 5px;
126 | }
127 |
128 | .optionName {
129 | font-size: 1rem;
130 | color: #222;
131 | text-align: center;
132 | min-height: 1.5rem;
133 |
134 | .point {
135 | font-weight: 600;
136 | font-size: 0.8rem;
137 | }
138 | }
139 |
140 | .oddsHistory {
141 | font-size: 10px;
142 | color: #666;
143 | height: 10px;
144 | padding-bottom: 2px;
145 | }
146 |
147 | .addSlipOptionButton {
148 | cursor: pointer;
149 | padding: 0.5em 2em 0.5em 2em;
150 | background-color: var(--pink-lavender);
151 | color: black;
152 | border: none;
153 |
154 | @media screen and (max-width: 60em) {
155 | padding: 0.5em 1.4em;
156 | }
157 | }
158 |
159 | .addSlipOptionButton:hover {
160 | background-color: rgb(255, 105, 180, 0.7);
161 | box-shadow: -2px 2px 10px rgba(100, 100, 100, 0.3);
162 | }
163 |
--------------------------------------------------------------------------------
/src/ui/event-list/event-list.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { EventFragment, MarketFragment } from '@/gql/documents.generated'
4 | import { MarketOption } from '@/gql/types.generated'
5 | import { CSSTransition } from 'react-transition-group'
6 | import styles from './event-list.module.css'
7 | import { ElapsedTime } from '@/ui/event-list/elapsed-time'
8 | import { renderScore } from '@/ui/event-util'
9 | import { Market } from './market'
10 | import React from 'react'
11 |
12 | export type MarketOptionWithHistory = MarketOption & { history: string }
13 |
14 | const eventCompare = (live: boolean) => (a: EventFragment, b: EventFragment) => {
15 | const startA = new Date(a.startTime)
16 | const startB = new Date(b.startTime)
17 | if (startA < startB) return live ? 1 : -1
18 | if (startA > startB) return live ? -1 : 1
19 | return 0
20 | }
21 |
22 | export function EventList({
23 | events,
24 | marketName,
25 | live = false,
26 | updatedEvents = [],
27 | }: {
28 | events: EventFragment[]
29 | marketName: string
30 | live?: boolean
31 | updatedEvents?: string[]
32 | }) {
33 | if (events.length === 0)
34 | return (
35 |
36 | {events.length === 0 &&
37 | (live ? 'No live events at the moment.' : 'No upcoming events at the moment.')}
38 |
39 | )
40 |
41 | return (
42 |
43 |
{live ? 'Live now' : 'Upcoming'}
44 |
45 | {events.sort(eventCompare(live)).map((event: EventFragment) => {
46 | if (!event) return null
47 | const selectedMarket = event?.markets?.find(
48 | (market) =>
49 | market?.name === marketName &&
50 | (market.name === 'spreads'
51 | ? market.options?.find((option) => option?.point !== 0)
52 | : true)
53 | )
54 |
55 | if (!selectedMarket?.options) {
56 | console.log(`Event '${event.name}' market '${marketName}' has no options`)
57 | return null
58 | }
59 |
60 | return (
61 |
62 |
67 |
68 |
69 |
{event.sport.title}
70 | {/*
{event.name}
*/}
71 |
72 |
73 |
74 |
75 |
76 | {live && !event.sport.key.startsWith('tennis') && (
77 |
{renderScore(event)}
78 | )}
79 |
80 |
81 |
82 |
83 |
84 |
86 | )
87 | })}
88 |
89 |
36 |
{event.name}
37 |
{options}
38 |
46 | {market.name === 'spreads' ? getOptionPointLabel(option, market.name) : h2hOptions[i]}
47 |
48 | {live && (
49 |
50 | {(option as MarketOptionWithHistory).history ?? ''}
51 |
52 | )}
53 |
60 |
61 | {option?.name} {option?.point}
62 |
63 |
64 | {live && (
65 |
66 | {(option as MarketOptionWithHistory).history ?? ''}
67 |
68 | )}
69 |
67 | -
68 |
75 |
76 | -
77 |
84 |
85 |
86 | )
87 | }
88 |
--------------------------------------------------------------------------------
/src/ui/side-menu/side-menu.tsx:
--------------------------------------------------------------------------------
1 | import { Sport } from '@/gql/types.generated'
2 | import Link from 'next/link'
3 | import { usePathname } from 'next/navigation'
4 |
5 | export type Props = {
6 | sports: Sport[]
7 | }
8 |
9 | export function SideMenu({ sports }: Props) {
10 | const groups: Map = sports.reduce((acc, sport) => {
11 | const sports = acc.get(sport.group) || []
12 | sports.push(sport)
13 | acc.set(sport.group, sports)
14 | return acc
15 | }, new Map())
16 |
17 | return (
18 | <>
19 |
22 |
23 |
42 |
43 | )
44 | }
45 |
--------------------------------------------------------------------------------
/src/ui/sport-list/sport-list.module.css:
--------------------------------------------------------------------------------
1 | .groupTitle {
2 | color: var(--egyptian-blue);
3 | }
4 |
5 | .container {
6 | display: flex;
7 | flex-direction: column;
8 | gap: var(--spacing-large);
9 | margin-top: 80px
10 | }
11 |
12 | .closedMarketContent {
13 | color: var(--egyptian-blue)
14 | }
--------------------------------------------------------------------------------
/src/ui/sport-list/sport-list.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { EventFragment, SportWithEventsFragment } from '@/gql/documents.generated'
4 | import { LiveEventList } from '@/ui/event-list/live-event-list'
5 | import { EventList } from '@/ui/event-list/event-list'
6 | import React from 'react'
7 | import { Card } from '@/ui/card/card'
8 | import CardHeader from '@/ui/card/card-header'
9 | import { CardContent } from '@/ui/card/card-content'
10 | import styles from './sport-list.module.css'
11 | import { SlipProvider } from '@/lib/slip-context'
12 | import BetSlip from '@/ui/bet-slip/bet-slip'
13 |
14 | const eventHasOptionsInMarket =
15 | (market: string) =>
16 | (event: EventFragment): boolean => {
17 | const selectedMarket = event?.markets?.find(
18 | (m) =>
19 | m?.name === market && (m.name === 'spreads' ? m.options?.find((o) => o?.point !== 0) : true)
20 | )
21 | return Number(selectedMarket?.options?.length) > 0
22 | }
23 |
24 | export type SportListProps = {
25 | group: string
26 | sports: SportWithEventsFragment[]
27 | market: string
28 | }
29 | function SportListPlain({ group, sports, market }: SportListProps) {
30 | const sportsWithEvents = sports.filter((sport) => sport?.events?.length)
31 | const sportsWithoutEvents = sports.filter((sport) => !sport?.events?.length)
32 |
33 | return (
34 |
35 |
36 | {(group ?? 'all') === 'all' ? 'All Sports' : decodeURIComponent(group)}
37 |
38 | {[...sportsWithEvents, ...sportsWithoutEvents].map((sport) => {
39 | const liveEvents = (
40 | sport.events?.filter((event) => event?.isLive) as EventFragment[]
41 | ).filter(eventHasOptionsInMarket(market))
42 | const upcomingEvents = (
43 | sport.events?.filter((event) => !event?.isLive) as EventFragment[]
44 | ).filter(eventHasOptionsInMarket(market))
45 |
46 | if (!liveEvents.length && !upcomingEvents.length)
47 | return (
48 |
49 |
50 |
51 | Market closed.
52 |
53 |
54 | )
55 |
56 | return (
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 | )
65 | })}
66 |
124 | )
125 | }
126 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES6",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "strict": true,
8 | "forceConsistentCasingInFileNames": true,
9 | "noEmit": true,
10 | "esModuleInterop": true,
11 | "module": "esnext",
12 | "moduleResolution": "node",
13 | "resolveJsonModule": true,
14 | "isolatedModules": true,
15 | "jsx": "preserve",
16 | "incremental": true,
17 | "plugins": [
18 | {
19 | "name": "next"
20 | }
21 | ],
22 | "paths": {
23 | "@/*": ["./src/*"]
24 | }
25 | },
26 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
27 | "exclude": ["node_modules"]
28 | }
29 |
--------------------------------------------------------------------------------