LW7: tickets brick wall on scroll

apps/www/components/LaunchWeek/LaunchSection/TicketBrickWall.tsx

@@ -1,8 +1,6 @@
 import React from 'react'
 import { UserData } from '../Ticket/hooks/use-conf-data'
-
-import { TicketBrick } from './TicketBrick'
-import styles from './brick-wall.module.css'
+import { TicketBrickWallRow } from './TicketBrickWallRow'
 
 type user = UserData
 
@@ -13,36 +11,20 @@ interface Props {
 export default function TicketBrickWall({ users }: Props) {
   return (
     <div className="relative py-36">
-      <div
-        className={[
-          'absolute top-[196px] w-[475px] h-[420px] z-10 left-[-130px] rotate-90',
-          styles['brick-wall-mask--left'],
-        ].join(' ')}
-      ></div>
-      <div
-        className={[
-          styles['brick-wall-mask--right'],
-          'absolute top-[196px] w-[475px] h-[420px] z-10 right-[-130px] -rotate-90',
-        ].join(' ')}
-      ></div>
-
-      <div className="mx-auto overflow-hidden bg-[#1C1C1C]">
-        <div className="max-w-[38rem] mx-auto mt-24">
+      <div className="mx-auto bg-[#1C1C1C]">
+        <div className="max-w-[38rem] mx-auto">
           <h2 className="radial-gradient-text-scale-500 text-center">
             Explore the unique tickets generated by our community
           </h2>
         </div>
-        <div className="grid gap-4 -ml-48 -mr-48 my-12 relative">
-          <div className="flex gap-4 justify-center">
-            {users.slice(0, 4).map((user) => (
-              <TicketBrick key={user.username} user={user} />
-            ))}
-          </div>
-          <div className="flex gap-4 justify-center ml-36">
-            {users.slice(4, 8).map((user) => (
-              <TicketBrick key={user.username} user={user} />
-            ))}
-          </div>
+        <div
+          className="grid py-12 relative
+            before:content-[' '] before:absolute before:inset-0 before:right-auto before:w-1/4 before:bg-gradient-to-r before:from-[#1C1C1C] before:to-[#1C1C1C00] before:z-10 before:pointer-events-none
+            after:content-[' '] after:absolute after:inset-0 after:left-auto after:w-1/4 after:bg-gradient-to-l after:from-[#1C1C1C] after:to-[#1C1C1C00] after:z-10 after:pointer-events-none
+          "
+        >
+          <TicketBrickWallRow users={users.slice(0, 5)} />
+          <TicketBrickWallRow users={users.slice(5, 12)} reverse />
         </div>
       </div>
     </div>

apps/www/components/LaunchWeek/LaunchSection/TicketBrickWallRow.tsx

@@ -0,0 +1,57 @@
+import { useRef, useState } from 'react'
+import Image from 'next/image'
+import Link from 'next/link'
+import { motion, useScroll, useTransform } from 'framer-motion'
+import { UserData } from '../Ticket/hooks/use-conf-data'
+
+interface Props {
+  users: UserData[]
+  reverse?: boolean
+  speed?: number
+}
+
+export function TicketBrickWallRow({ users, reverse, speed = 50000 }: Props) {
+  const ref = useRef(null)
+  const { scrollYProgress } = useScroll({
+    target: ref,
+    offset: ['start end', 'end start'],
+  })
+  const STORAGE_URL = 'https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/images/lw7'
+  const getOgUrl = (username: string, isGold: boolean) =>
+    isGold
+      ? `${STORAGE_URL}/tickets/golden/${username}.png`
+      : `${STORAGE_URL}/tickets/${username}.png`
+
+  const x = useTransform(scrollYProgress, [0, 1], reverse ? [-300, 0] : [0, -300])
+
+  console.log(users)
+
+  return (
+    <div ref={ref} className="relative h-[250px] w-full m-0 overflow-hidden py-2.5">
+      <div className="absolute flex h-fit w-fit">
+        <motion.div className="flex gap-5 will-change-transform" style={{ x }}>
+          {users.map((user, i) => (
+            <Link href={`/launch-week/tickets/${user.username}`} key={user.username}>
+              <a className="relative w-[450px] rounded-2xl overflow-hidden transform scale-100 hover:scale-[102%] transition-transform">
+                <div className="relative inset-0 w-full pt-[50%] transform scale-[120%]">
+                  <span className="absolute inset-0 flex items-center justify-center text-white">
+                    {user.username}
+                  </span>
+                  <Image
+                    src={getOgUrl(user.username!, !!user.golden)}
+                    alt={user.username}
+                    layout="fill"
+                    objectFit="cover"
+                    objectPosition="top 50% right 5px"
+                    placeholder="blur"
+                    blurDataURL="/images/blur.png"
+                  />
+                </div>
+              </a>
+            </Link>
+          ))}
+        </motion.div>
+      </div>
+    </div>
+  )
+}

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

@@ -135,7 +135,7 @@ export default function TicketHome({ users }: Props) {
 
 export const getStaticProps: GetStaticProps = async () => {
   // fetch users for the TicketBrickWall
-  const { data: users } = await supabaseAdmin!.from('lw7_tickets').select().limit(8)
+  const { data: users } = await supabaseAdmin!.from('lw7_tickets_golden').select('*').limit(12)
 
   return {
     props: {

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

@@ -113,7 +113,7 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
   let bg_image_id
 
   // fetch users for the TicketBrickWall
-  const { data: users } = await supabaseAdmin!.from('lw7_tickets').select().limit(8)
+  const { data: users } = await supabaseAdmin!.from('lw7_tickets_golden').select().limit(12)
 
   // fetch a specific user
   if (username) {