page ISR

gistfile1.txt

import { fontTitles } from "@/app/fonts";
import BackButton from "@/components/BackButton";
import ImageGenerator from "@/components/ImageGenerator";
import Loading from "@/components/Loading";
import PhoneNumber from "@/components/PhoneNumber";
import { AspectRatio } from "@/components/ui/aspect-ratio";
import getIcon from "@/utils/getIcon";
import { getImageUrl } from "@/utils/getImage";
import { createClient } from '@/utils/supabase/client';
import { MapPin } from "lucide-react";
import Image from "next/image";

// ISR setup in Next.js 13 using `revalidate`
export const revalidate = 60;

async function getData(id: string) {
    const supabase = createClient();

    const { data } = await supabase.from('extravios').select().match({ id }).single();

    if (!data) {
        return null;
    }

    const imageSrc = data?.images?.length ? await getImageUrl(data?.images[0]?.path) : '';

    return {
        data,
        imageSrc,
    };
}

export default async function Page({ params: { id } }: { params: { id: string } }) {
    const result = await getData(id);

    if (!result) {
        return <Loading small />;
    }

    const { data, imageSrc } = result;

    return (
        <div className="mt-24 flex flex-col gap-8 justify-center items-center p-4 w-full md:max-w-[720px]">
            {data?.images?.length > 0 ?
                <AspectRatio ratio={16 / 9} className="bg-muted">
                    <Image
                        src={imageSrc}
                        alt={`Extravío ${data.title}`}
                        fill
                        sizes="20x20"
                        priority
                        className="rounded-md object-cover"
                        quality="90"
                        placeholder="blur"
                        blurDataURL="L-N0eM-Vou?X~VxWs+xY%3RiRjjc"
                    />
                </AspectRatio>
                : null}

            <div className="min-h-[250px] flex flex-col w-full gap-6 mb-2" key={data.id}>
                {getIcon(data.lost_type_id)}

                <h3 className={`${fontTitles.className} text-2xl font-semibold mb-4`}>{data.title}</h3>
                <p className="text-muted-foreground text-xl mb-2">
                    {data.description}
                </p>
                {data.street_name ?
                    <div className="flex gap-1 text-muted-foreground text-base">
                        <MapPin /> <a href={`https://www.google.com/maps/search/?api=1&query=${data.street_name}+${data.street_number}, Pergamino, Buenos Aires`} target="_blank" rel="noreferrer" className="underline text-blue-600">{data.street_name} {data.street_number}</a>
                    </div>
                    : null}
                <PhoneNumber phone_number={data.phone_number} hasWhatsApp={data.whatsApp} title={data.title} />
            </div>

            <div className="w-full flex flex-col gap-12 md:gap-16 justify-between mt-4 px-4 items-center">
                <ImageGenerator textToShare={`${data.title}\n\n\n${data.description}\n\n\n\n\n\n${data.phone_number ? 'WhatsApp' : 'Teléfono'}: ${data.phone_number}`} image={data?.images?.length > 0 ? data?.images[0]?.path : ''} />
                <BackButton className="w-full">Volver</BackButton>
            </div>
        </div>
    );
}