From 9e81f4c3174cb084db43f6ac689d55172b4e02ae Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Mon, 28 Apr 2025 22:10:43 +0200 Subject: [PATCH 1/7] Add GetYourTicket section --- .../2025/components/get-your-ticket/index.tsx | 29 +++++++++++ .../get-your-ticket/ticket-period.tsx | 40 +++++++++++++++ .../get-your-ticket/ticket-periods.tsx | 51 +++++++++++++++++++ src/app/conf/2025/page.tsx | 4 +- 4 files changed, 123 insertions(+), 1 deletion(-) create mode 100644 src/app/conf/2025/components/get-your-ticket/index.tsx create mode 100644 src/app/conf/2025/components/get-your-ticket/ticket-period.tsx create mode 100644 src/app/conf/2025/components/get-your-ticket/ticket-periods.tsx diff --git a/src/app/conf/2025/components/get-your-ticket/index.tsx b/src/app/conf/2025/components/get-your-ticket/index.tsx new file mode 100644 index 0000000000..d53ab6e7f8 --- /dev/null +++ b/src/app/conf/2025/components/get-your-ticket/index.tsx @@ -0,0 +1,29 @@ +import { clsx } from "clsx" +import { TicketPeriods } from "./ticket-periods" + +export function GetYourTicket({ className }: { className?: string }) { + return ( +
+
+
+

+ Get your ticket now +

+

+ The registration deadline is 23:59 Central European Time on the + respective date. +

+
+ +
+ +
+
+
+ ) +} diff --git a/src/app/conf/2025/components/get-your-ticket/ticket-period.tsx b/src/app/conf/2025/components/get-your-ticket/ticket-period.tsx new file mode 100644 index 0000000000..3b5ab17f69 --- /dev/null +++ b/src/app/conf/2025/components/get-your-ticket/ticket-period.tsx @@ -0,0 +1,40 @@ +import { Button } from "@/app/conf/_design-system/button" +import { clsx } from "clsx" + +export interface TicketPeriodProps { + price: string + date: string + disabled?: boolean + name: string +} + +export function TicketPeriod({ + price, + date, + disabled, + name, +}: TicketPeriodProps) { + return ( +
+
+

{name}

+
+
+
+ {price} + {date} +
+ +
+
+ ) +} diff --git a/src/app/conf/2025/components/get-your-ticket/ticket-periods.tsx b/src/app/conf/2025/components/get-your-ticket/ticket-periods.tsx new file mode 100644 index 0000000000..55f6c82612 --- /dev/null +++ b/src/app/conf/2025/components/get-your-ticket/ticket-periods.tsx @@ -0,0 +1,51 @@ +"use client" + +import { useState } from "react" +import { useEffect } from "react" +import { TicketPeriod } from "./ticket-period" +import { useSyncExternalStore } from "react" + +// The registration deadline is 23:59 Central European Time on the respective date. +// Ticket period end dates (using zero-indexed months) +const EARLY_BIRD_END_DATE = new Date(2025, 6, 13, 23, 59) // July 13th +const STANDARD_END_DATE = new Date(2025, 7, 31, 23, 59) // August 31st +const LATE_END_DATE = new Date(2025, 8, 10, 23, 59) // September 10th + +export function TicketPeriods() { + const now = useCurrentDate() + + return ( + <> + EARLY_BIRD_END_DATE} + /> + STANDARD_END_DATE || now < EARLY_BIRD_END_DATE} + /> + LATE_END_DATE || now < STANDARD_END_DATE} + /> + + ) +} + +const DEFAULT_DATE = new Date(2025, 8, 12) + +function useCurrentDate() { + const [date, setDate] = useState(DEFAULT_DATE) + + useEffect(() => { + setDate(new Date()) + }, []) + + return date +} diff --git a/src/app/conf/2025/page.tsx b/src/app/conf/2025/page.tsx index 16cfc47bd3..dde9ca886b 100644 --- a/src/app/conf/2025/page.tsx +++ b/src/app/conf/2025/page.tsx @@ -11,7 +11,7 @@ import { RegisterToday } from "./components/register-today" import { Hero } from "./components/hero" import WhatToExpectSection from "./components/what-to-expect" import TopMindsSection from "./components/top-minds" - +import { GetYourTicket } from "./components/get-your-ticket" export const metadata: Metadata = { title: "GraphQLConf 2025 — Sept 08-10", } @@ -25,6 +25,8 @@ export default function Page() { + +
From cc5b1ed318bbd3de49f27ee946326c6f79288519 Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Mon, 28 Apr 2025 22:59:35 +0200 Subject: [PATCH 2/7] Improve GetYourTicket styles --- package.json | 1 + pnpm-lock.yaml | 12 +++++ src/app/colors.css | 5 +- .../2025/components/get-your-ticket/index.tsx | 6 +-- .../get-your-ticket/ticket-period.tsx | 53 +++++++++++++++---- .../get-your-ticket/ticket-periods.tsx | 12 ++--- src/app/conf/2025/components/navbar.tsx | 4 +- .../2025/components/register-today/index.tsx | 2 +- .../conf/2025/components/top-minds/index.tsx | 2 +- .../conf/2025/components/what-to-expect.tsx | 5 +- src/app/conf/2025/page.tsx | 4 +- src/app/conf/_design-system/button.tsx | 12 +++-- src/globals.css | 4 ++ tailwind.config.ts | 6 ++- 14 files changed, 92 insertions(+), 36 deletions(-) diff --git a/package.json b/package.json index 4b92b8bf88..666c05e949 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "@graphql-tools/schema": "10.0.15", "@headlessui/react": "^1.7.17", "@radix-ui/react-radio-group": "^1.1.3", + "@tailwindcss/container-queries": "^0.1.1", "@tailwindcss/nesting": "0.0.0-insiders.565cd3e", "@tailwindcss/typography": "^0.5.10", "autoprefixer": "^10.4.17", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c830a6cbd2..b0477dc0f0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -22,6 +22,9 @@ importers: '@radix-ui/react-radio-group': specifier: ^1.1.3 version: 1.2.2(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@tailwindcss/container-queries': + specifier: ^0.1.1 + version: 0.1.1(tailwindcss@3.4.17) '@tailwindcss/nesting': specifier: 0.0.0-insiders.565cd3e version: 0.0.0-insiders.565cd3e(postcss@8.4.49) @@ -1703,6 +1706,11 @@ packages: '@swc/helpers@0.5.5': resolution: {integrity: sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==} + '@tailwindcss/container-queries@0.1.1': + resolution: {integrity: sha512-p18dswChx6WnTSaJCSGx6lTmrGzNNvm2FtXmiO6AuA1V4U5REyoqwmT6kgAsIMdjo07QdAfYXHJ4hnMtfHzWgA==} + peerDependencies: + tailwindcss: '>=3.2.0' + '@tailwindcss/nesting@0.0.0-insiders.565cd3e': resolution: {integrity: sha512-WhHoFBx19TnH/c+xLwT/sxei6+4RpdfiyG3MYXfmLaMsADmVqBkF7B6lDalgZD9YdM459MF7DtxVbWkOrV7IaQ==} peerDependencies: @@ -6456,6 +6464,10 @@ snapshots: '@swc/counter': 0.1.3 tslib: 2.8.1 + '@tailwindcss/container-queries@0.1.1(tailwindcss@3.4.17)': + dependencies: + tailwindcss: 3.4.17 + '@tailwindcss/nesting@0.0.0-insiders.565cd3e(postcss@8.4.49)': dependencies: postcss: 8.4.49 diff --git a/src/app/colors.css b/src/app/colors.css index a3ca69e689..39c02c2b22 100644 --- a/src/app/colors.css +++ b/src/app/colors.css @@ -1,4 +1,5 @@ -:root { +:root, +.light { --color-pri-lighter: 319 100% 90%; --color-pri-light: 319 100% 90%; --color-pri-base: 319 100% 44%; @@ -24,7 +25,7 @@ --color-neu-900: 75 15% 5%; } -html.dark { +.dark { --color-neu-900: 0 0% 100%; --color-neu-800: 75 57% 97%; --color-neu-700: 75 15% 95%; diff --git a/src/app/conf/2025/components/get-your-ticket/index.tsx b/src/app/conf/2025/components/get-your-ticket/index.tsx index d53ab6e7f8..dd0b1f2caf 100644 --- a/src/app/conf/2025/components/get-your-ticket/index.tsx +++ b/src/app/conf/2025/components/get-your-ticket/index.tsx @@ -5,14 +5,14 @@ export function GetYourTicket({ className }: { className?: string }) { return (

- Get your ticket now + Get your ticket

The registration deadline is 23:59 Central European Time on the @@ -20,7 +20,7 @@ export function GetYourTicket({ className }: { className?: string }) {

-
+
diff --git a/src/app/conf/2025/components/get-your-ticket/ticket-period.tsx b/src/app/conf/2025/components/get-your-ticket/ticket-period.tsx index 3b5ab17f69..06f3068780 100644 --- a/src/app/conf/2025/components/get-your-ticket/ticket-period.tsx +++ b/src/app/conf/2025/components/get-your-ticket/ticket-period.tsx @@ -1,9 +1,10 @@ import { Button } from "@/app/conf/_design-system/button" import { clsx } from "clsx" +import { GET_TICKETS_LINK } from "../../links" export interface TicketPeriodProps { price: string - date: string + date: Date | [Date, Date] disabled?: boolean name: string } @@ -17,24 +18,56 @@ export function TicketPeriod({ return (
-
+

{name}

-
+
- {price} - {date} + + {price} + + {/* eslint-disable-next-line tailwindcss/no-custom-classname */} + + {Array.isArray(date) ? ( + <> +
-
) } + +function Time({ date }: { date: Date }) { + return ( +