SearchCtrlK

  • ↑↓navigate
  • ↵open
  • escclose

Can’t find it? Contact us

EditorLayout

The frame of a document editor.

Open in a new tab
View code
tsx
<EditorLayout
	back={{ href: "/posts", label: "Posts" }}
	title="Designing a calmer editor"
	status={
		<SaveStatus
			id="post-status"
			editedAt={post.updatedAt}
			form="post-form"
			labels={{ saving: "Saving…", saved: "Saved", failed: "Failed", retry: "Retry", edited: "Edited {time}" }}
		/>
	}
	preview={<LinkButton href={previewUrl} variant="ghost" color="neutral" size="sm">Preview</LinkButton>}
	primary={<Button type="submit" form="post-form" size="sm">Publish</Button>}
	sidebar={
		<>
			<Label htmlFor="post-visibility">Visibility</Label>
			<Select id="post-visibility" name="visibility" form="post-form">…</Select>
			<Label htmlFor="post-slug">Slug</Label>
			<Input id="post-slug" name="slug" form="post-form" defaultValue="designing-a-calmer-editor" />
			<Label htmlFor="post-tags">Tags</Label>
			<Input id="post-tags" name="tags" form="post-form" defaultValue="design, writing" />
		</>
	}
	labels={{ settings: "Settings", closeSettings: "Close settings", sidebar: "Post settings" }}
>
	<form id="post-form" method="post">…</form>
</EditorLayout>

Demo apps

Whole pages built only from @sdxc/ui, each for an invented product with its own palette and type. They open in a new tab.

Every demo, landings and docs sites alike, is listed in the demo gallery.

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

Terminal
npm add @sdxc/ui remix
typescript
import "@sdxc/ui/theme.css";

Usage

typescript
import { EditorLayout } from "@sdxc/ui/app";

Renders the bar, the writing column and the sidebar. The sidebar is one popover element: beside the column on a wide container and a full-screen sheet when narrow, so the sheet opens and closes with no script.

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

PropTypeRequiredDescription
back{ href: string; label: string }NoWhere the back arrow leads, and its accessible name, such as "Posts".
titleRemixNodeYesThe document's name in the bar, such as its title and type.
statusRemixNodeNoThe persistence signal, usually a SaveStatus.
previewRemixNodeNoA Preview link or button, before the primary action.
primaryRemixNodeNoThe publication action, such as a Publish button whose label carries its state.
sidebarRemixNodeNoThe document's properties: status, slug, author, tags.
formstringNoThe id of the document's form, which ⌘S/Ctrl+S submits while focus is in it or in no other form, saving the way the form's own submit does.
labelsLabelsYes

Also accepts everything in Omit<TagProps<"div">, "title">.

@sdxc/ui

Can’t find it? Contact us