Creating a field in Sanity for a blog and generating an excerpt, with discussion on previewing references and using a renderer component.

import { BsTypeH1 } from "react-icons/bs";
import React from 'react'

const Preview = ({ value }) => {
    const { headline, subline, body } = value;

//This is just so I dont have to use types in this example, In my code I have a preview component in src-folder
    let subline2;
    subline ? subline2 = subline.slice(0, 20) : subline2 = null;

    let body2;
    body ? body2 = body.slice(0, 90) : body2 = null;


    return (
        <div style={{ display: 'flex', alignItems: 'center' }}>

            <BsTypeH1 style={{ verticalAlign: 'middle', fontSize: '1.5em', padding: '0 10px' }} />


            <p>
                Text Header Section: <strong>{headline}</strong> <br />
                <span>{subline2}</span><br />
                {body && <small>{body2}...</small>}
            </p>
        </div>
    )
}


export default {
    name: 'headerSection',
    title: 'Text Header Section',
    type: 'object',
    icon: BsTypeH1,
    fields: [

        {
            name: 'headline',
            type: 'string',
            rows: 2,
        },
        {
            name: 'subline',
            title: 'Subline',
            type: 'text',
            rows: 1,
        },
        {
            name: 'body',
            title: 'Body',
            type: 'richText',
        },
    ],
    preview: {
        select: {
            headline: 'headline',
            subline: 'subline',
            body: 'body',
            media: 'icon'
        },
        component: Preview

    }
}