Uso de layouts

¿Qué son los layouts?

Los layouts en programación HTML se refieren a la estructura y organización visual de una página web. Estos definen cómo se distribuyen y presentan los elementos como texto, imágenes y otros contenidos en la interfaz del usuario. Utilizando etiquetas HTML y estilos CSS, los desarrolladores pueden crear diseños que sean atractivos y funcionales.

Los layouts pueden variar desde simples estructuras de una columna hasta diseños más complejos de varias columnas y secciones. Los elementos como encabezados, navegación, contenido principal y pie de página se combinan estratégicamente para proporcionar una experiencia coherente y fácil de usar.

El uso de frameworks ha simplificado la creación de layouts receptivos y adaptables a diferentes dispositivos. Los layouts eficientes mejoran la legibilidad, la navegación y la estética, contribuyendo así a una experiencia en línea exitosa.

Crear un layout para el proyecto

Creamos un nuevo archivo para el layout en src/components/layout.tsx, este contendrá las etiquetas y estilos comunes que engloban las diferentes páginas.

import type { PropsWithChildren } from 'react'

export const PageLayout = (props: PropsWithChildren) => {
    return (
        <main className="flex h-screen justify-center">
            <div className="h-full w-full border-slate-400 md:max-w-2xl">
                <div className="border-x border-b border-slate-400">
                    {props.children}
                </div>
            </div>
        </main>
    )
}

Ahora vamos a utilizar este layout sobre el page Home.

export default function Home() {
    const { isLoaded: isUserLoaded, isSignedIn: isUserSignedIn } = useUser()

    if (!isUserLoaded) {
        return <LoadingPage />
    }

    return (
        <>
            <Head>
                <title>Home Page</title>
            </Head>
            <PageLayout>
                {isUserSignedIn ? (
                    <>
                        <div className="border-b p-8">
                            <CreatePostWizard />
                        </div>
                        <Feed />
                        <div className="p-8">
                            <SignOutButton />
                        </div>
                    </>
                ) : (
                    <SignIn />
                )}
            </PageLayout>
        </>
    )
}

Aprovechamos para aplicarlo en la página del profile, y agregamos unos estilos para darle espaciado y mostrar la imagen.

export default function ProfilePage(props: PageProps) {
    const { data, isLoading } = api.profile.getUserByUsername.useQuery({
        username: props.username,
    })

    if (isLoading) {
        return <LoadingPage />
    }

    if (!data) {
        return <div>Not Found</div>
    }

    return (
        <>
            <Head>
                <title>Profile Page</title>
            </Head>
            <PageLayout>
                <div className="relative h-48 bg-slate-600">
                    <Image
                        src={data.imageUrl}
                        alt={`${data.username} profile pic`}
                        width={128}
                        height={128}
                        className="absolute bottom-0 left-0 -mb-[64px] ml-4 rounded-full border-2 border-black"
                    />
                </div>
                <div className="h-[90px]"></div>
                <div className="p-4 text-2xl font-bold">@{data.username}</div>
            </PageLayout>
        </>
    )
}

Refrescamos la página y ahora podemos ver como el layout se ha aplicado en ambos casos.