News page layout

Introduction

In this guide, we will update the layout of the NewsCategoryPage page by adding some dummy news story summary areas.

These will be simple coloured rectangles at the moment to get a general idea of layout. We will add real data to them later.

Getting started

Use the code below as a quick wireframe component.

Copy and paste it into your app/routes/news.$category.tsx file, directly above the NewsCategoryPage component:

Red underline

Ignore the red line under WireframeBlock that appears when you paste the code below - this is because we haven’t actually called the component yet.

We will do this in the next step.

app/routes/news.$category.tsx

import { invariant } from '@epic-web/invariant'
import { type LoaderFunctionArgs, json } from '@remix-run/node'
import { useLoaderData } from '@remix-run/react'
import { toTitleCase } from '~/utils/stringUtils.ts'

export async function loader({ params }: LoaderFunctionArgs) {
  const { category } = params

  invariant(typeof category === 'string', 'Category not found')
  const categoryTitle = toTitleCase(category)

  return json({ categoryTitle })
}

const WireframeBlock = () => {
  return (
    <div className="h-72 animate-pulse rounded-lg bg-gray-200 dark:bg-gray-700" />
  )
}

export default function NewsCategoryPage() {
  const { categoryTitle } = useLoaderData<typeof loader>()

  return (
    <div className="container py-16">
      <h2 className="text-h2">{categoryTitle}</h2>
    </div>
  )
}

You can then call this component multiple times in your NewsCategoryPage to create a wireframe layout. For example, if you wanted a five column layout, you could do this:

<div className="grid grid-cols-5 gap-6">
  <WireframeBlock />
  <WireframeBlock />
  <WireframeBlock />
  <WireframeBlock />
  <WireframeBlock />
</div>

This will create a layout with five columns, each containing a wireframe block:

Challenge

Wireframe layout

1. Can you add some space between the page title and the wireframe blocks underneath?

2. Can you add a second row of wireframe blocks to your layout?

🚀🚀 Extra Credit

3. Can you use Tailwind’s responsive class prefixes to make your layout responsive?

   • On small screens, you should only show two columns
   • On medium screens there should be three columns
   • On large screens you should show five columns

Summary

In this step, we:

• Created a wireframe layout for the NewsCategoryPage using Tailwind CSS.
• Added a WireframeBlock component to create a simple coloured rectangle to represent a news story summary.
• Completed a challenge to create a wireframe layout for the NewsCategoryPage using Tailwind CSS.

Next steps

Our site is beginning to take shape!

We have a home page and a shared layout for our news category page.

In the next step, we will work on the database for our website.