@unwrapdev/library/slices/TextBlock/index.js

UI Kit + Utils Library.

import React from 'react'
import { PrismicRichText } from '@prismicio/react'
import { twMerge } from 'tailwind-merge'
import { linkResolver } from '../../src/utils/linkResolver'

/**
 * @typedef {import("@prismicio/client").Content.TextBlockSlice} TextBlockSlice
 * @typedef {import("@prismicio/react").SliceComponentProps<TextBlockSlice>} TextBlockProps
 * @param { TextBlockProps }
 */
const TextBlock = ({ slice, classes, linkResolver: customLinkResolver }) => {
    const eyebrowClass = twMerge(
        'pb-2 text-sm font-bold text-blue-600 uppercase',
        classes?.eyebrow
    )
    const headingClass = twMerge('mb-1', classes?.heading)
    const descriptionClass = twMerge('', classes?.description)
    return (
        <div className="text-left">
            {slice.primary.eyebrow && (
                <p className={eyebrowClass}>{slice.primary.eyebrow}</p>
            )}
            <div className={headingClass}>
                {slice.primary.title ? (
                    <PrismicRichText field={slice.primary.title} linkResolver={customLinkResolver ?? linkResolver} />
                ) : (
                    <h2>Template slice, update me!</h2>
                )}
            </div>
            {slice.primary.description ? (
                <div className={descriptionClass}>
                    <PrismicRichText field={slice.primary.description} linkResolver={customLinkResolver ?? linkResolver}  />
                </div>
            ) : (
                <p>start by editing this slice from inside Slice Machine!</p>
            )}
        </div>
    )
}

export default TextBlock