diff --git a/components/Prose/Prose.tsx b/components/Prose/Prose.tsx index 8279d018..a5e116c8 100644 --- a/components/Prose/Prose.tsx +++ b/components/Prose/Prose.tsx @@ -2,10 +2,13 @@ import type { ReactNode } from "react"; type ProseProps = { children: ReactNode; + lg?: boolean; }; -const Prose = ({ children }: ProseProps) => { - return
{children}
; +const Prose = ({ children, lg = true }: ProseProps) => { + return ( +
{children}
+ ); }; export default Prose; diff --git a/components/eventRow.tsx b/components/eventRow.tsx index 4f05f2df..a3ee80e3 100644 --- a/components/eventRow.tsx +++ b/components/eventRow.tsx @@ -4,6 +4,10 @@ import Date from "./date"; import Link from "next/link"; import { EventInterface } from "../types/shared"; import dayjs from "dayjs"; +import { BiPlus, BiMinus } from "react-icons/bi"; +import { useRef } from "react"; +import { RenderRichTextWithImages } from "../lib/rich-text"; +import Prose from "./Prose"; export default function EventRow({ event, @@ -12,10 +16,29 @@ export default function EventRow({ event: EventInterface; past?: boolean; }) { + const contentRef = useRef(null); + + const handleToggle = (e: React.SyntheticEvent) => { + const details = e.currentTarget; + const content = contentRef.current; + + if (details.open) { + content!.style.height = `${content!.scrollHeight}px`; + setTimeout(() => { + content!.style.height = "auto"; + }, 300); + } else { + content!.style.height = `${content!.scrollHeight}px`; + setTimeout(() => { + content!.style.height = "0px"; + }, 0); + } + }; + return ( -
  • - -
    +
  • +
    +
    {EventDate(event)}
    @@ -26,54 +49,53 @@ export default function EventRow({
    - {/*
    */}

    {event.title}

    - {/*
    */}

    {event.location}

    -
    -
    - {(() => { - if (event.article && event.article?.type == "Article") { - return ( -

    - More info -

    - ); - } else if (event.article && event.article?.type == "Workshop") { - return ( -

    - {event.linkText ? event.linkText : "Apply"} - -

    - ); - } else if (event.ticketLink) { - return ( -

    - {event.linkText ? event.linkText : "Tickets"} - -

    - ); - } else if (event.linkText) { - return ( -

    - {event.linkText} - -

    - ); - } - })()} +
    + + +
    +
    +
    +
    +
    +

    + When:{" "} + {EventDate(event, true)} +

    +

    + Where: {event.location} +

    + {event.price && ( +

    + Entry: {event.price} +

    + )} +

    + {event.description && ( + + {RenderRichTextWithImages(event.description)} + + )} +

    +
    +
    - +
    • ); } -export function EventLink({ event, children }) { +export function FeaturedEventLink({ event, children }) { if (event.article && event.article?.type == "Article") return {children}; if (event.article && event.article?.type == "Workshop") @@ -85,12 +107,93 @@ export function EventLink({ event, children }) { ); } -function EventDate(event) { +function EventLink({ event }) { + if (event.article && event.article?.type == "Article") + return ( + + More info + + ); + else if (event.article && event.article?.type == "Workshop") + return ( + + {event.linkText ? event.linkText : "Apply"} + + + ); + else if (event.ticketLink) + return ( + + {event.linkText ? event.linkText : "Tickets"} + + + ); +} + +function EventDate(event, expanded = false) { + const start = dayjs(event.date); + const end = dayjs(event.endDate); + const isSameDay = start.isSame(end, "day"); + const isSameMonth = start.isSame(end, "month"); return ( {event.endDate ? ( - {sameMonth(event.date, event.endDate) ? ( + {isSameDay ? ( + + + {expanded && ( + <> + {", "} + - + + + )} + + ) : isSameMonth ? ( + + — + + + ) : ( + + + — +
    + +     + )} +     + ) : ( + + )} +     + ); +} + +function EventDateExpanded(event) { + const start = dayjs(event.date); + const end = dayjs(event.endDate); + const isSameDay = start.isSame(end, "day"); + const isSameMonth = start.isSame(end, "month"); + return ( + + {event.endDate ? ( + + {isSameDay ? ( + + + + ) : isSameMonth ? ( — diff --git a/lib/contentful/fragments.ts b/lib/contentful/fragments.ts index 72e4ed85..d6bef6c6 100644 --- a/lib/contentful/fragments.ts +++ b/lib/contentful/fragments.ts @@ -112,6 +112,10 @@ export const EventFragment = /* GraphQL */ ` location ticketLink linkText + description { + json + } + price article { ... on Article { type: __typename diff --git a/styles/globals.css b/styles/globals.css index 049d4d10..01dbac6c 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -411,3 +411,9 @@ transform: translatey(0px); } } + +/* events accordion */ + +.event-accordion > summary::-webkit-details-marker { + display: none; +} diff --git a/types/shared.d.ts b/types/shared.d.ts index 0e320877..cfe698ec 100644 --- a/types/shared.d.ts +++ b/types/shared.d.ts @@ -308,6 +308,8 @@ export interface EventInterface { ticketLink: string; linkText: string; article: Object<{ slug: string }>; + description?: Content; + price?: string; } export interface WorkshopInterface { diff --git a/views/events/featuredEvents.tsx b/views/events/featuredEvents.tsx index 03f32182..e25de851 100644 --- a/views/events/featuredEvents.tsx +++ b/views/events/featuredEvents.tsx @@ -6,7 +6,7 @@ import Date from "../../components/date"; import { EventBadge } from "../../components/badge"; import { Splide, SplideSlide } from "@splidejs/react-splide"; import "@splidejs/react-splide/css/core"; -import { EventLink } from "../../components/eventRow"; +import { FeaturedEventLink } from "../../components/eventRow"; export default function FeaturedEvents({ events, @@ -44,7 +44,7 @@ export default function FeaturedEvents({ }`} key={i} > - +

    - + ))}