#Getting errors

1 messages · Page 1 of 1 (latest)

chilly lotus
# 

// blocks/CoverBlock/fields.ts
import { Block } from 'payload/types';
import { MediaType } from '../../collections/Media';

export type CoverBlockType = {
  blockType: 'content';
  blockName?: string;
  content: unknown;
  image: MediaType;
};

const CoverBlock: Block = {
  slug: 'cover',
  labels: {
    singular: 'Cover',
    plural: 'Covers',
  },
  fields: [
    {
      name: 'content',
      label: 'Heading',
      type: 'richText',
      required: true,
    },
    {
      name: 'feature',
      label: 'Cover Image',
      type: 'relationship',
      relationTo: 'media',
      required: true,
    },
  ],
};

export default CoverBlock;
pine venture
#

Can you send a screenshot so we can see where the squiggles are

chilly lotus
#

Maybe I'm not defining and calling the Types correctly

#

Or do I have to retrieve the data from the headless CMS using getStaticProps? Could that be causing the squigglys?

chilly lotus
#

I've removed the divs and left the 1 div rendering the component:

import { Block } from 'payload/types';
import RichText from "../../components/RichText";
import { CoverBlockType } from "./CoverBlockFields";
import React, { ReactElement } from 'react';

export const getStaticProps = async () => {

  const res = await fetch('http://localhost:3000/api/blocks');
  const data = await res.json();

  return {
props: { blocks: data }
  }
}

const CoverBlockComponent: React.FC<CoverBlockType> = (props) => {
  const { content, image } = props;

  return (
            <RichText
              content={content}
              className="text-4xl font-bold text-center text-white"
            />
  );
};`

export default CoverBlockComponent;

What's wrong with this code?