Skip to main content

Create components

The front-end is broken down into different components. You need to create these components.

Add the following file:

/src/components/Navigation.jsx
import Link from "next/link";

export default function Navigation({ content }) {
  const links = content.filter((c) => c.url);
  return (
    <div>
      {links.map((e, i) => {
        const separator = i > 0 ? " :: " : null;
        return (
          <span key={e.id}>
            {separator}
            <Link href={e.url}>{e.fields.title}</Link>
          </span>
        );
      })}
    </div>
  );
}
About this component

The navigation component represents the navigation bar. Links in the navigation bar are separated with the characters ::

Body​

Add the following file:

/src/components/Body.jsx
import Navigation from "./Navigation";

import content from "../../lib/content.json";

export default function Body(props) {
  const { fields } = props;
  const title = fields?.title;
  const description = fields?.description;
  return (
    <main className="main">
      <Navigation content={content} />
      <h1 className="title">{title}</h1>
      <p className="description">{description}</p>
    </main>
  );
}
About this component

The body component represents the main section of the app. It displays two things: the navigation component & content.

Add the following file:

/src/components/Footer.jsx
export default function Footer() {
  return (
    <footer className="footer">
      <a href="https://uniform.dev" target="_blank" rel="noopener noreferrer">
        Powered by Uniform
      </a>
    </footer>
  );
}
About this component

The footer component displays a link to the Uniform website.

Layout​

Add the following file:

/src/components/Layout.jsx
import Head from "next/head";

import Body from "./Body";
import Footer from "./Footer";

export default function Layout({ fields, content }) {
  const { title } = fields;
  return (
    <div className="container">
      <Head>
        <title>{title}</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Body fields={fields} content={content} />
      <Footer />
    </div>
  );
}
About this component

The layout component handles the arrangement of components on a page, allowing multiple pages to have the same presentation.