Block

The wrapper element for a extension, creates a block with spacing.

The Block component is the wrapper element for a extension. It creates a block with spacing. Use this component to create a dedicated space for your extension. Each extension can only have one Block component.

API Reference

Props

Name	Type	Default	Description
children*	React.ReactElement<ListProps | ButtonProps | CardsProps | PillsProps | HeaderProps> | React.ReactElement<ListProps | ButtonProps | CardsProps | PillsProps | HeaderProps>[]		The content of the block.
size*	1 | 2 | 3		The initial size of the block.
actions	ActionsProps		The actions for the block.
imagePath	string		The image of the block.
title	string		The title of the block.
isEditable	boolean		Whether the block is editable.
handleTitleChange	(title: string) => void		The callback for when the title changes.
handleSizeChange	(size: number) => void		The callback for when the size changes.

Examples

Basic with List

import { Block, List } from "@stagehq/ui";

export default function Extension() {
  return (
    <Block
      title="Title"
      imagePath="https://source.unsplash.com/random/400x200"
      actions={link: { url="https://getstage.app" }}
      size={2}
    >
      <List>
        <List.Item type="text" title="Item 1" subtitle="This is a subtitle" />
        <List.Item type="text" title="Item 2" subtitle="This is a subtitle" />
        <List.Item type="text" title="Item 3" subtitle="This is a subtitle" />
      </List>
    </Block>
  );
}

With title and Cards

import { Section, Cards } from "@stagehq/ui";

export default function Extension() {
  return (
    <Block
      title="Title"
      imagePath="https://source.unsplash.com/random/400x200"
      actions={link: { url="https://getstage.app" }}
      size={1}
    >
      <Cards>
        <Cards.Item title="Item 1" />
        <Cards.Item title="Item 2" />
        <Cards.Item title="Item 3" />
      </Cards>
    </Block>
  );
}