Template the Slice and Structured Fields

[00:00] Now its time to code the Slice you built. Navigate to your slices folder. Here you will see the folder for the Slice that was created for you by Slice Machine in the previous lesson. This should be called TextSlice.

[00:11] In that folder, you will have 3 files. index.js which contains your component code, model.json, which is the content model used by Prismic and mocks.json, which we'll learn more about later.

[00:24] Open the index.js file in your IDE. You'll see here that this default field has some placeholder text. Replace this placeholder with the code from the TextCenter.jsx file in the components folder. Copy everything from inside the return function. Back in Slice Machine, the code needed here has been created for you. Navigate to the Text Slice and click the Show code snippets button to reveal the Rich Text component code already configured with the API ID of the field. Get the code by clicking the Copy button.

<PrismicRichText field={slice.primary.text_field} />

[00:57] In the index.js file, replace the h2 and p tags with the component snippet.

<section
  data-slice-type={slice.slice_type}
  data-slice-variation={slice.variation}
>
  <div className="py-24 gap-16 inline-flex flex-col items-center text-center w-screen bg-greenGrey">
    <div className="container gap-6 flex flex-col items-center">
      <PrismicRichText field={slice.primary.text_field} />
    </div>
  </div>
</section>

[01:01] For this code to work you will need to import the PrismicRichText helper component. So at the top of the file, do this import.

import { PrismicRichText } from '@prismicio/react'

[01:10] One last thing to do is make sure to update the tailwind.config.js file to target the Slices files.

content: ['./app/**/*.{js,jsx}', './components/**/*.{js,jsx}', './slices/**/*.{js,jsx}'],

[01:18] Without this your styling won't work.