lw8: add meetups section

apps/www/components/LaunchWeek/8/LW8Meetups.tsx

@@ -0,0 +1,111 @@
+import Link from 'next/link'
+import React, { useEffect, useState } from 'react'
+import { Badge } from 'ui'
+import useConfData from '../hooks/use-conf-data'
+
+export interface Meetup {
+  id?: any
+  title: string
+  isLive: boolean
+  link: string
+  display_info: string
+  start_at: string
+}
+
+const LW8Meetups = ({ meetups }: { meetups?: Meetup[] }) => {
+  const { supabase } = useConfData()
+  const [meets, setMeets] = useState<Meetup[]>(meetups ?? [])
+  const [realtimeChannel, setRealtimeChannel] = useState<ReturnType<
+    (typeof supabase)['channel']
+  > | null>(null)
+
+  useEffect(() => {
+    // Listen to realtime changes
+    if (supabase && !realtimeChannel) {
+      const channel = supabase
+        .channel('changes')
+        .on(
+          'postgres_changes',
+          {
+            event: 'UPDATE',
+            schema: 'public',
+            table: 'lw8_meetups',
+          },
+          async () => {
+            const { data: newMeets, error } = await supabase.from('lw8_meetups').select('*')
+            console.log('newMeets error', error)
+            console.log('newMeets', newMeets)
+            setMeets(newMeets)
+          }
+        )
+        .subscribe()
+      setRealtimeChannel(channel)
+    }
+
+    return () => {
+      // Cleanup realtime subscription on unmount
+      realtimeChannel?.unsubscribe()
+    }
+  }, [])
+
+  useEffect(() => {
+    console.log('meetups', meets)
+  }, [meets])
+
+  return (
+    <div className="max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-8">
+      <div className="col-span-1 lg:col-span-4 flex flex-col justify-center">
+        <h2 className="text-2xl sm:text-3xl xl:text-4xl tracking-[-.5px]">Join us live</h2>
+        <p className="text-scale-1000 text-xs sm:text-sm lg:text-base py-3 lg:max-w-md">
+          Celebrate LW8 with us at our first-ever live meetups across various locations. Join the
+          fun, grab some swag, and be a part of the Supabase community.
+        </p>
+      </div>
+      <div className="col-span-1 lg:col-span-7 lg:col-start-6 w-full max-w-4xl flex flex-col justify-between items-stretch">
+        {meets &&
+          meets
+            ?.sort((a, b) => (new Date(a.start_at) > new Date(b.start_at) ? 1 : -1))
+            .map(({ display_info, link, isLive, title }: Meetup) => (
+              <Link href={link ?? '#'}>
+                <a
+                  target="_blank"
+                  className={[
+                    'w-full group py-0 flex items-center gap-2 md:gap-4 text-lg sm:text-2xl lg:text-4xl border-b border-[#111718]',
+                    'hover:text-brand',
+                    isLive ? 'text-scale-1100' : 'text-scale-800',
+                    !link && 'pointer-events-none',
+                  ].join(' ')}
+                >
+                  <div className="flex items-center gap-2 md:gap-4">
+                    <span>{title}</span>
+                    {isLive && <Badge>Live now</Badge>}
+                    <span className="opacity-0 -translate-x-2 transition-all md:group-hover:opacity-100 group-hover:translate-x-0">
+                      <svg
+                        width="47"
+                        height="47"
+                        viewBox="0 0 47 47"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M33.0387 16.2422L40.6691 23.8727M40.6691 23.8727L33.0387 31.5031M40.6691 23.8727L6.33203 23.8727"
+                          stroke="currentColor"
+                          strokeWidth="2"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                        />
+                      </svg>
+                    </span>
+                  </div>
+                  {display_info && (
+                    <span className="text-sm text-right flex-1">{display_info}</span>
+                  )}
+                </a>
+              </Link>
+            ))}
+      </div>
+    </div>
+  )
+}
+
+export default LW8Meetups

apps/www/pages/launch-week/index.tsx

@@ -11,6 +11,7 @@ import { PageState, ConfDataContext, UserData } from '~/components/LaunchWeek/ho
 import DefaultLayout from '~/components/Layouts/Default'
 import SectionContainer from '~/components/Layouts/SectionContainer'
 import { LaunchWeekLogoHeader } from '~/components/LaunchWeek/8/LaunchWeekLogoHeader'
+import { Meetup } from '~/components/LaunchWeek/8/LW8Meetups'
 
 import { useTheme } from 'common/Providers'
 
@@ -21,6 +22,7 @@ const AnimatedParticles = dynamic(
   () => import('~/components/LaunchWeek/8/AnimatedParticles/ParticlesCanvas')
 )
 const TicketContainer = dynamic(() => import('~/components/LaunchWeek/8/Ticket/TicketContainer'))
+const LW8Meetups = dynamic(() => import('~/components/LaunchWeek/8/LW8Meetups'))
 const LaunchWeekPrizeSection = dynamic(
   () => import('~/components/LaunchWeek/8/LaunchWeekPrizeSection')
 )
@@ -29,6 +31,7 @@ const CTABanner = dynamic(() => import('~/components/CTABanner'))
 
 interface Props {
   users?: UserData[]
+  meetups?: Meetup[]
 }
 
 const supabaseAdmin = createClient(
@@ -39,7 +42,7 @@ const supabaseAdmin = createClient(
     'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im9idWxkYW5ycHRsb2t0eGNmZnZuIiwicm9sZSI6ImFub24iLCJpYXQiOjE2Njk3MjcwMTIsImV4cCI6MTk4NTMwMzAxMn0.SZLqryz_-stF8dgzeVXmzZWPOqdOrBwqJROlFES8v3I'
 )
 
-export default function TicketHome({ users }: Props) {
+export default function TicketHome({ users, meetups }: Props) {
   const { query } = useRouter()
 
   const TITLE = 'Supabase LaunchWeek 8'
@@ -149,7 +152,7 @@ export default function TicketHome({ users }: Props) {
                     />
                   </div>
                 </SectionContainer>
-                <div className="absolute w-full aspect-[1/1] md:aspect-[1.5/1] lg:aspect-[2.5/1] inset-0 z-0">
+                <div className="absolute w-full aspect-[1/1] md:aspect-[1.5/1] lg:aspect-[2.5/1] inset-0 z-0 pointer-events-none">
                   <Image
                     src="/images/launchweek/8/LW8-gradient.png"
                     layout="fill"
@@ -162,6 +165,10 @@ export default function TicketHome({ users }: Props) {
               </div>
             </div>
 
+            <SectionContainer>
+              <LW8Meetups meetups={meetups} />
+            </SectionContainer>
+
             <div className="relative !w-full max-w-[100vw] min-h-[400px] !px-4 sm:max-w-xl md:max-w-4xl lg:max-w-7xl z-20 flex flex-col justify-around items-center !py-4 md:!py-8 lg:!pb-0 gap-2 md:gap-4 !mx-auto">
               {supabase && (
                 <div className="w-full max-w-[100vw] px-4 flex justify-center py-8 md:py-20">
@@ -191,9 +198,12 @@ export const getServerSideProps: GetServerSideProps = async ({ req, res }) => {
     .from('lw8_tickets_golden')
     .select('username, golden', { count: 'exact' })
 
+  const { data: meetups } = await supabaseAdmin!.from('lw8_meetups').select('*')
+
   return {
     props: {
       users,
+      meetups,
     },
   }
 }

apps/www/pages/launch-week/tickets/[username].tsx

@@ -114,7 +114,7 @@ export default function UsernamePage({ user, users, ogImageUrl }: Props) {
                     )}
                   </div>
                 </SectionContainer>
-                <div className="absolute w-full aspect-[1/1] md:aspect-[1.5/1] lg:aspect-[2.5/1] inset-0 z-0">
+                <div className="absolute w-full aspect-[1/1] md:aspect-[1.5/1] lg:aspect-[2.5/1] inset-0 z-0 pointer-events-none">
                   <Image
                     src="/images/launchweek/8/LW8-gradient.png"
                     layout="fill"

apps/www/pages/launch-week/tickets/index.tsx

@@ -154,7 +154,7 @@ export default function TicketsPage({ users }: Props) {
               />
             </div>
           </SectionContainer>
-          <div className="absolute w-full aspect-[1/1] md:aspect-[1.5/1] lg:aspect-[2.5/1] inset-0 z-0">
+          <div className="absolute w-full aspect-[1/1] md:aspect-[1.5/1] lg:aspect-[2.5/1] inset-0 z-0 pointer-events-none">
             <Image
               src="/images/launchweek/8/LW8-gradient.png"
               layout="fill"