Blocks_ger at

Table of Contents

• Beschreibung
• Code
• Code Sandbox

Beschreibung

Der Block ist der Baustein, der das StreamField ermöglicht. Mithilfe von Blöcken können Sie komplexe editierbate React Komponenten bauen.

Code

import { blocks, fields } from "@snek-at/jaen-pages";
import { ImageType } from "@snek-at/jaen-pages/src/containers/JaenImage";

type BlockType = {
  cardtitle: string,
  cardimg: ImageType,
};

const CardBlock: blocks.BC<BlockType> = ({ values }) => {
  return (
    <div className="card">
      <h1>{values.cardtitle}</h1>
      {values.cardimg}
    </div>
  );
};

CardBlock.BlockType = "CardBlock";
CardBlock.BlockFields = {
  image: fields.ImageField,
  title: fields.TextField,
};
CardBlock.defaultValues = {
  cardtitle: "This is your title.",
  cardimg: { src: "path/to/img", alt: "yourAlt", title: "yourTitle" },
};

export default CardBlock;

Code Sandbox

WIP