From 15995a2885012481ffcd1aa768488f5f971ff074 Mon Sep 17 00:00:00 2001 From: appsbytom Date: Thu, 27 Jul 2023 23:13:01 +0100 Subject: [PATCH] update home design --- components/AccordionChevronTrigger.tsx | 6 ++-- components/Activity.tsx | 41 +++++++++++++++++++------ components/EditPreferences.tsx | 6 ++-- components/MigratePreferences.tsx | 4 +-- components/ProvisionalEventActivity.tsx | 15 --------- components/SessionActivity.tsx | 17 +++++----- components/SkeletonWeekList.tsx | 14 ++++----- components/WeekList.tsx | 35 +++++++++++---------- pages/_app.tsx | 4 +-- pages/_document.tsx | 2 +- pages/index.tsx | 18 +++++++---- pages/preferences.tsx | 12 ++++---- 12 files changed, 96 insertions(+), 78 deletions(-) delete mode 100644 components/ProvisionalEventActivity.tsx diff --git a/components/AccordionChevronTrigger.tsx b/components/AccordionChevronTrigger.tsx index 5c45c5a..6534f22 100644 --- a/components/AccordionChevronTrigger.tsx +++ b/components/AccordionChevronTrigger.tsx @@ -1,5 +1,5 @@ -import * as Accordion from '@radix-ui/react-accordion' import { ChevronDownIcon } from '@heroicons/react/20/solid' +import * as Accordion from '@radix-ui/react-accordion' import classNames from 'classnames' import { ReactNode } from 'react' @@ -10,8 +10,8 @@ type Props = { const AccordionChevronTrigger = ({ children, className }: Props) => ( - - + + {children} diff --git a/components/Activity.tsx b/components/Activity.tsx index 087bc8d..2912c8d 100644 --- a/components/Activity.tsx +++ b/components/Activity.tsx @@ -1,18 +1,39 @@ import SERIES_CONFIG, { Series } from '@/series/config' -import { ReactNode } from 'react' type Props = { + date: string + dateUnits?: string + name: string series: Series - children: ReactNode + eventName?: string } -const Activity = ({ series, children }: Props) => ( -
  • -
    -
    - {children} -
    -
    • -) +const Activity = ({ date, dateUnits, series, eventName, name }: Props) => { + const { name: seriesName, colours } = SERIES_CONFIG[series]; + + return ( +
  • +
    +

    {date}

    + {dateUnits &&

    {dateUnits}

    } +
    +
    +

    {name}

    +
    +
    +
    +

    {seriesName}

    +
    + {eventName && ( + <> + · +

    {eventName}

    + + )} +
    +
    +
    • + ) +} export default Activity \ No newline at end of file diff --git a/components/EditPreferences.tsx b/components/EditPreferences.tsx index b38341d..bc0d9df 100644 --- a/components/EditPreferences.tsx +++ b/components/EditPreferences.tsx @@ -61,7 +61,7 @@ const EditPreferences = () => {

    {seriesName}

     - + {sessions.map(({ value: sessionValue, name: sessionName }) => { const id = `${seriesValue}-${sessionValue}` return ( @@ -82,7 +82,7 @@ const EditPreferences = () => { ) })} -
    +
    {
    -
    +
    )}
    - +
    ) } diff --git a/components/ProvisionalEventActivity.tsx b/components/ProvisionalEventActivity.tsx deleted file mode 100644 index 8b8cbc8..0000000 --- a/components/ProvisionalEventActivity.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import Event from '@/types/event' -import Activity from './Activity' - -type Props = { - event: Event -} - -const ProvisionalEventActivity = ({ event }: Props) => ( - -

    {event.name}

    - (TBC) -     -) - -export default ProvisionalEventActivity \ No newline at end of file diff --git a/components/SessionActivity.tsx b/components/SessionActivity.tsx index f0d8fa6..df57afa 100644 --- a/components/SessionActivity.tsx +++ b/components/SessionActivity.tsx @@ -7,16 +7,19 @@ type Props = { session: GroupedSession } -const SessionActivity = ({ session }: Props) => { +const SessionActivity = ({ session: { series, eventName, startTime, name, unconfirmed } }: Props) => { const { timezone, use24HourFormat } = usePreferences() + const date = dayjs(startTime).tz(timezone) + return ( - -

    {session.eventName}: {session.name}

    - - {dayjs(session.startTime).tz(timezone).format(use24HourFormat ? 'HH:mm' : 'h:mm A')} {session.unconfirmed && (TBC)} - -     + ) } diff --git a/components/SkeletonWeekList.tsx b/components/SkeletonWeekList.tsx index 9df6ec2..d8d4444 100644 --- a/components/SkeletonWeekList.tsx +++ b/components/SkeletonWeekList.tsx @@ -1,14 +1,14 @@ const SkeletonWeekList = ({ activityCounts }: { activityCounts: number[] }) => ( -
      +
        {activityCounts.map((numOfActivities, i) => (
      • -
        -
        +
        +
        {Array.from({ length: numOfActivities }).map((_, i) => ( -
        -
        -
        -
        +
        +
        +
        +
        ))} diff --git a/components/WeekList.tsx b/components/WeekList.tsx index 5429dbe..ecfa0c3 100644 --- a/components/WeekList.tsx +++ b/components/WeekList.tsx @@ -1,14 +1,14 @@ +import AccordionChevronTrigger from '@/components/AccordionChevronTrigger' import Week from '@/types/week' import { getSeriesNames } from '@/utils/series' +import * as Accordion from '@radix-ui/react-accordion' import dayjs from 'dayjs' +import { useEffect, useState } from 'react' +import Activity from './Activity' import { usePreferences } from './PreferencesContext/PreferencesContext' -import ProvisionalEventActivity from './ProvisionalEventActivity' import SessionActivity from './SessionActivity' -import { useEffect, useState } from 'react' -import * as Accordion from '@radix-ui/react-accordion' -import AccordionChevronTrigger from '@/components/AccordionChevronTrigger'; -const format = (date: dayjs.Dayjs) => date.format('D MMMM') +const format = (date: dayjs.Dayjs) => date.format('D MMM') type Props = { weeks: Week[] @@ -24,10 +24,11 @@ const WeekList = ({ weeks }: Props) => { return ( -
          +
            {weeks.map(({ date, weekNumber, days }) => { const { 0: { date: firstDayDate }, [days.length - 1]: { date: lastDayDate }} = days - const firstDayFormatted = format(dayjs(firstDayDate).tz(timezone)) + const firstDay = dayjs(firstDayDate).tz(timezone) + const lastDay = dayjs(lastDayDate).tz(timezone) const includedSeries = days.flatMap(day => [...day.sessions.map(session => session.series), ...day.provisionalEvents.map(event => event.series)]) @@ -38,24 +39,26 @@ const WeekList = ({ weeks }: Props) => { {weekNumber === dayjs().tz(timezone).isoWeek() ? (
            -
            -
            +
            +
            -

            It's race week!

            +

            It's race week!

            ) : ( -

            {days.length > 1 ? `${firstDayFormatted} - ${format(dayjs(lastDayDate).tz(timezone))}` : firstDayFormatted}

            +

            + {days.length > 1 ? `${firstDay.month() === lastDay.month() ? firstDay.format('D') : format(firstDay)} - ${format(lastDay)}` : format(firstDay)} +

            )} - {getSeriesNames(series => includedSeries.includes(series.value))} +

            {getSeriesNames(series => includedSeries.includes(series.value))}

            -
              +
                {days.map(({ date, sessions, provisionalEvents }) => (
              1. -

                {dayjs(date).format('dddd')}

                -
                  +

                  {dayjs(date).format('dddd')}

                  +
                    {sessions.map(session => )} - {provisionalEvents.map(event => )} + {provisionalEvents.map(event => )}
                  ))} diff --git a/pages/_app.tsx b/pages/_app.tsx index d732d38..8bfd07c 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,4 +1,4 @@ -import Nav from '@/components/Nav'; +import Nav from '@/components/Nav' import PreferencesProvider from '@/components/PreferencesContext/PreferencesContext' import { Analytics } from '@vercel/analytics/react' import dayjs from 'dayjs' @@ -26,7 +26,7 @@ const MyApp = ({ Component, pageProps: { session, ...pageProps } }: AppProps) =>