+ The page you're looking for doesn't exist or has been moved.
+
+
+
+
+
+
+
+ ),
+}
+
+export const Onboarding: Story = {
+ name: 'Onboarding step',
+ render: () => (
+ } />}
+ maxWidth="lg"
+ >
+
+
+ Welcome to the platform
+ Let's set up your workspace. This will only take a minute.
+
+
+
+ Tell us about your organisation so we can customise your experience.
+
+
+
+
+
+
+
+
+
+
+
+
+ ),
+}
diff --git a/src/components/templates/CenteredPage/CenteredPage.tsx b/src/components/templates/CenteredPage/CenteredPage.tsx
new file mode 100644
index 0000000..23fc4cc
--- /dev/null
+++ b/src/components/templates/CenteredPage/CenteredPage.tsx
@@ -0,0 +1,35 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react'
+import { cn } from '@/lib/utils'
+
+export interface CenteredPageProps extends HTMLAttributes {
+ /** TopBar component rendered fixed at the top */
+ topBar?: ReactNode
+ /** Horizontally and vertically centered content */
+ children: ReactNode
+ /** Max width of the content area */
+ maxWidth?: 'sm' | 'md' | 'lg' | 'xl'
+}
+
+const maxWidthStyles = {
+ sm: 'max-w-md',
+ md: 'max-w-xl',
+ lg: 'max-w-2xl',
+ xl: 'max-w-4xl',
+}
+
+export const CenteredPage = forwardRef(
+ ({ topBar, maxWidth = 'md', className, children, ...props }, ref) => {
+ return (
+
+ {topBar &&
{topBar}
}
+
+
+
+ {children}
+
+
+
+ )
+ },
+)
+CenteredPage.displayName = 'CenteredPage'
diff --git a/src/components/templates/CenteredPage/index.ts b/src/components/templates/CenteredPage/index.ts
new file mode 100644
index 0000000..3b6501c
--- /dev/null
+++ b/src/components/templates/CenteredPage/index.ts
@@ -0,0 +1,2 @@
+export { CenteredPage } from './CenteredPage'
+export type { CenteredPageProps } from './CenteredPage'