Merge pull request #72 from jarrisondev/fix-ticket-details

Fix ticket details

.env.example

@@ -1,3 +1,4 @@
 NEXT_PUBLIC_PROJECT_URL=https://uuljbqkwvruhxomkmxaj.supabase.co
 NEXT_PUBLIC_API_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InV1bGpicWt3dnJ1aHhvbWtteGFqIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MjIzNjA1NTcsImV4cCI6MjAzNzkzNjU1N30.N42cAcYzp2Q7g2prpu1v-43_Dsk_kWwmK_-45eeNauU
 NEXT_PUBLIC_STORAGE_BUCKET=
+NEXT_PUBLIC_BASE_URL = https://aforshow-2024.vercel.app

app/opengraph-image.tsx → app/[userId]/opengraph-image.tsx

@@ -2,23 +2,26 @@ import { createClient } from '@/utils/supabase/server'
 import { ImageResponse } from 'next/og'
 
 
-export const size = { width: 1200, height: 530 }
+export const size = {
+  width: 1200,
+  height: 580,
+}
 export const contentType = 'image/png'
 
 
 
-export default async function Image() {
+export default async function Image({ params: { userId } }) {
   const apiClient = createClient()
-  const user = (await apiClient.auth.getUser()).data.user
+  const { data: user, error } = await apiClient.from('profiles').select('*').eq('id', userId).single()
 
   if(!user) return new ImageResponse(
-    <div style={{display: 'flex', background: '#000000', width:'100%', height: '100%'}}>
-      <img style={{objectFit:'contain'}} src={`${process.env.NEXT_PUBLIC_BASE_URL}/default-og.png`} alt={`Aforshow`} />
+    <div style={{display: 'flex',justifyContent:'center', background: '#000000', width:'100%', height: '100%'}}>
+      <img height='100%' style={{objectFit:'contain'}} src={`${process.env.NEXT_PUBLIC_BASE_URL}/default-og.png`} alt={`Aforshow`} />
     </div>
     , { ...size })
 
   const imageUrl = `https://uuljbqkwvruhxomkmxaj.supabase.co/storage/v1/object/public/aforshow/public/${user.id}.png`
-
+  
   return new ImageResponse(
     <div style={{display: 'flex', background: '#000000', width:'100%', height: '100%'}}>
       <img src={imageUrl} alt={`Aforshow`} />

app/[userId]/page.tsx

@@ -0,0 +1,30 @@
+'use client'
+import { Footer } from "@/components/Footer";
+import Hero from "@/components/Hero";
+import { Sponsors } from "@/components/Sponsors";
+import { Ticket } from "@/components/Ticket";
+import { WelcomeHero } from "@/components/WelcomeHero";
+import { User } from "@/store/useUserStore";
+import { apiClient } from "@/utils/supabase/client";
+
+export default async function Page({ params: { userId } }) {
+  const { data, error } = await apiClient.from('profiles').select('*').eq('id', userId).single();
+  const user = data as User
+
+  return (
+    <div>
+      <div className="bg-caBlurBoxes absolute left-[-100px] top-80 h-[200px] w-[200px] blur-[200px] sm:h-[300px] sm:w-[300px]"></div>
+      <div className="bg-pattern relative flex w-full flex-col gap-[74px] overflow-hidden">
+        <div className="w-full absolute -bottom-20 h-[200px]"></div>
+        <div className="bg-caBlurBoxes absolute right-[-100px] top-20 h-[400px] w-[200px] blur-[200px] sm:h-[300px] sm:w-[300px]"></div>
+        <WelcomeHero variant="ticket">
+          <div className="mt-10">
+             <Ticket name={user?.name} avatar={user?.avatar_url} number={user?.count} />
+          </div>
+        </WelcomeHero>
+        <Sponsors />
+        <Footer />
+      </div>
+    </div>
+  )
+}

app/components/Hero.tsx

@@ -13,7 +13,7 @@ export default function Hero() {
         <div className="w-full absolute -bottom-20 h-[200px]"></div>
         <div className="bg-caBlurBoxes absolute right-[-100px] top-20 h-[400px] w-[200px] blur-[200px] sm:h-[300px] sm:w-[300px]"></div>
         <Nav />
-        <WelcomeHero />
+        <WelcomeHero variant="home" />
         <Sponsors />
       </div>
     </div>

app/components/TicketDownload.tsx

@@ -43,7 +43,7 @@ export const TicketDownload = () => {
     await uploadTicket(user.id, ticketRef.current);
 
     const urlstring = process.env.NEXT_PUBLIC_BASE_URL || 'https://aforshow-2024.vercel.app';
-    const url = `${urlstring}`;
+    const url = `${urlstring}/${user.id}/`;
 
     const message = 'Este es tu ticket exclusivo para el Aforshow, habrá charlas, premios y sorteos. ¡Te esperamos! 🚀🎉';
     const hashtags = ['aforshow'];
@@ -65,8 +65,10 @@ export const TicketDownload = () => {
       </p>
       {user && (
         <>
-          <Ticket ref={ticketRef} name={user?.name} avatar={user?.avatar_url} number={user?.count} />
-          <div className="flex justify-center gap-x-5">
+        <a href={`/${user.id}`} >
+          <Ticket ref={ticketRef} name={user.name} avatar={user.avatar_url} number={user.count} />
+        </a>
+          <div className="flex justify-center gap-x-5 ">
             <Button size="xl" className="flex gap-x-2"
               onClick={shareTwitter}>
               <X className="size-4 ml-2" />
@@ -79,7 +81,7 @@ export const TicketDownload = () => {
               Descargar ticket
             </Button>
           </div>
-        </>
+          </>
 
       )}
 

app/components/WelcomeHero.tsx

@@ -1,10 +1,16 @@
-import { ArrowUpRight } from "lucide-react";
+import { ArrowUpRight, Ticket } from "lucide-react";
 import { Button } from "./ui/button";
 import { Countdown } from "./common/Countdown";
+import { FC, PropsWithChildren } from "react";
+import { cn } from "./utils";
 
-export const WelcomeHero = () => {
+interface Props extends PropsWithChildren<{}> {
+  variant: "home" | "ticket";
+}
+
+export const WelcomeHero: FC<Props> = ({ variant, children }) => {
   return (
-    <section className="mx-auto mt-44 max-w-6xl w-full h-full">
+    <section className={cn("mx-auto max-w-6xl w-full h-full", variant === 'home' ? 'mt-44' : 'mt-20')} >
       <div className="relative z-20 flex flex-col gap-14 items-center text-center">
         <div className="flex flex-col gap-2">
           <h2 className="text-caTextSecondary text-lg md:text-[24px]">
@@ -17,21 +23,36 @@ export const WelcomeHero = () => {
               Aforshow
             </span>
           </p>
+          {children}
         </div>
 
         {/* Wrapper was moved to countdown because its component logic, could be override by className prop */}
         <Countdown startFrom={new Date("2024-09-15")} />
 
         <div className="flex gap-6 pb-12">
-          <Button size="xl">
+
+          {variant === 'home' && (
+            <a href="#ticket">
+              <Button  size="xl">
+                Ver ticket
+                <Ticket className="size-6 ml-3" />
+              </Button>
+            </a>
+          )}
+          {variant === 'ticket' && (
+            <a href="/">
+              <Button  size="xl">
+                Ir al inicio
+                <ArrowUpRight className="size-6 ml-2" />
+              </Button>
+            </a>
+
+          )}
+            <Button variant='secondary' size="xl">
             Inscribirse
             <ArrowUpRight className="size-6 ml-2" />
           </Button>
 
-          <Button variant="secondary" size="xl">
-            Comunidad
-            <ArrowUpRight className="size-6 ml-2" />
-          </Button>
         </div>
       </div>
     </section>

app/components/common/Talk.tsx

@@ -15,9 +15,9 @@ export const Talk = ({ title, author, hour, img, alt }: TalkProps) => {
       <Image
         src={img}
         alt={alt}
-        width={128}
-        height={128}
-        className="rounded-full size-24 md:size-32 mx-auto"
+        width={130}
+        height={130}
+        className="rounded-full size-24 md:size-28 mx-auto"
       />
       <footer className="flex flex-col gap-2 md:row-span-2 lg:row-auto">
         <p className="font-semibold md:text-3xl leading-7 md:leading-10 text-scheduleTitle text-wrap">

app/globals.css

@@ -4,6 +4,7 @@
 
 html {
   background-color: #060606;
+  scroll-behavior: smooth;
 }
 
 @layer components {

app/layout.tsx

@@ -11,6 +11,9 @@ const dmSans = DM_Sans({
 export const metadata: Metadata = {
   title: "Aforshow",
   description: "A spanish programming event of the community making talks",
+  openGraph:{
+    images: `${process.env.NEXT_PUBLIC_BASE_URL}/default-og.png`
+  }
 };
 
 export default function RootLayout({