ui for onboarding

apps/dashboard/src/app/(onboarding)/onboarding-layout.tsx

@@ -0,0 +1,37 @@
+import { cn } from '@/utils/cn';
+
+type Props = {
+  children: React.ReactNode;
+  className?: string;
+  title: string;
+  description?: React.ReactNode;
+};
+
+export const OnboardingDescription = ({
+  children,
+  className,
+}: Pick<Props, 'children' | 'className'>) => (
+  <div className={cn('font-medium text-muted-foreground', className)}>
+    {children}
+  </div>
+);
+
+const OnboardingLayout = ({
+  title,
+  description,
+  children,
+  className,
+}: Props) => {
+  return (
+    <div className={cn('flex max-w-3xl flex-col gap-4', className)}>
+      <div className="mb-4">
+        <h1 className="text-2xl font-medium">{title}</h1>
+        {description}
+      </div>
+
+      {children}
+    </div>
+  );
+};
+
+export default OnboardingLayout;