timi's playbench

examples/kitchen-sink/app/host.tsx

@@ -7,7 +7,14 @@ import {
 import {ThreadIframe, ThreadWebWorker} from '@quilted/threads';
 
 import type {SandboxAPI} from './types.ts';
-import {Button, Modal, Stack, Text, ControlPanel} from './host/components.tsx';
+import {
+  Button,
+  Modal,
+  Stack,
+  Text,
+  ControlPanel,
+  Banner,
+} from './host/components.tsx';
 import {createState} from './host/state.ts';
 
 // We will put any remote elements we want to render in this root element.
@@ -42,6 +49,7 @@ const components = new Map([
   ['ui-button', createRemoteComponentRenderer(Button)],
   ['ui-stack', createRemoteComponentRenderer(Stack)],
   ['ui-modal', createRemoteComponentRenderer(Modal)],
+  ['ui-banner', createRemoteComponentRenderer(Banner)],
   // The `remote-fragment` element is a special element created by Remote DOM when
   // it needs an unstyled container for a list of elements. This is primarily used
   // to convert elements passed as a prop to React or Preact components into a slotted

examples/kitchen-sink/app/host/components.tsx

@@ -50,6 +50,29 @@ export function Button({
   );
 }
 
+export function Banner({
+  content,
+  primaryAction,
+}: {
+  content: ComponentChildren;
+  primaryAction: ComponentChildren;
+}) {
+  return (
+    <div
+      style={{
+        background: 'white',
+        color: 'black',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '10px',
+      }}
+    >
+      {content}
+      {primaryAction}
+    </div>
+  );
+}
+
 export function Stack({
   spacing,
   children,

examples/kitchen-sink/app/remote/elements.ts

@@ -46,6 +46,14 @@ export const Modal = createRemoteElement<
   methods: ['open', 'close'],
 });
 
+export const Banner = createRemoteElement<
+  {},
+  {},
+  {content: true; primaryAction: true}
+>({
+  slots: ['content', 'primaryAction'],
+});
+
 export const Stack = createRemoteElement<StackProperties>({
   properties: {
     spacing: {type: Boolean},
@@ -56,13 +64,15 @@ customElements.define('ui-text', Text);
 customElements.define('ui-button', Button);
 customElements.define('ui-modal', Modal);
 customElements.define('ui-stack', Stack);
+customElements.define('ui-banner', Banner);
 
 declare global {
   interface HTMLElementTagNameMap {
     'ui-text': InstanceType<typeof Text>;
     'ui-button': InstanceType<typeof Button>;
     'ui-stack': InstanceType<typeof Stack>;
     'ui-modal': InstanceType<typeof Modal>;
+    'ui-banner': InstanceType<typeof Banner>;
   }
 }
 

examples/kitchen-sink/app/remote/examples/react.tsx

@@ -11,6 +11,7 @@ import {
   Button as ButtonElement,
   Stack as StackElement,
   Modal as ModalElement,
+  Banner as BannerElement,
 } from '../elements.ts';
 
 const Text = createRemoteComponent('ui-text', TextElement);
@@ -26,6 +27,7 @@ const Modal = createRemoteComponent('ui-modal', ModalElement, {
     onClose: {event: 'close'},
   },
 });
+const Banner = createRemoteComponent('ui-banner', BannerElement);
 
 export function renderUsingReact(root: Element, api: RenderAPI) {
   createRoot(root).render(<App api={api} />);
@@ -34,6 +36,14 @@ export function renderUsingReact(root: Element, api: RenderAPI) {
 function App({api}: {api: RenderAPI}) {
   return (
     <Stack spacing>
+      <Banner
+        content="Hi there, I am just playing with a cool banner"
+        primaryAction={
+          <Button onPress={() => api.alert('Hey! you clicked me! ')}>
+            Click me!
+          </Button>
+        }
+      />
       <Text>
         Rendering example: <Text emphasis>{api.example}</Text>
       </Text>