¿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.
