Sheet, ErrorBanner, Skeleton and EmptyState (#36)

Co-authored-by: dev_agent <dev_agent@cubecraftlabs.com>
Co-committed-by: dev_agent <dev_agent@cubecraftlabs.com>

web/src/ui/EmptyState.tsx

@@ -0,0 +1,30 @@
+import type { ReactNode } from 'react'
+import { Button } from './Button.tsx'
+import styles from './EmptyState.module.css'
+
+export type EmptyStateAction = {
+  label: string
+  onClick: () => void
+}
+
+export type EmptyStateProps = {
+  title: string
+  children: ReactNode
+  // Optional primary action, rendered as a primary Button.
+  action?: EmptyStateAction
+}
+
+// Bagel title, body text and an optional primary action.
+export function EmptyState({ title, children, action }: EmptyStateProps) {
+  return (
+    <section className={styles.empty}>
+      <h2 className={styles.title}>{title}</h2>
+      <p className={styles.body}>{children}</p>
+      {action && (
+        <Button className={styles.action} onClick={action.onClick}>
+          {action.label}
+        </Button>
+      )}
+    </section>
+  )
+}