CreateAppSheetStep.tsx43 lines · main

1	import { PropsWithChildren } from 'react'
2
3	interface StepProps {
4	number: number
5	title: string
6	description: string
7	isLast?: boolean
8	disabled?: boolean
9	}
10
11	export function CreateAppSheetStep({
12	number,
13	title,
14	description,
15	isLast = false,
16	disabled = false,
17	children,
18	}: PropsWithChildren<StepProps>) {
19	return (
20	<div
21	className={`flex items-start gap-6 self-stretch transition-opacity ${disabled ? 'opacity-40 pointer-events-none' : ''}`}
22	>
23	<div className="relative self-stretch shrink-0 w-6">
24	<div className="absolute inset-0 flex items-start justify-center">
25	{!isLast && (
26	<div
27	aria-hidden
28	className="absolute left-[calc(50%-1px)] w-px bg-border opacity-60 h-full"
29	/>
30	)}
31	<div className="relative z-10 flex font-mono text-xs items-center justify-center min-w-6 w-6 h-6 border border-default rounded-md bg-surface-100 text-foreground-light">
32	{number}
33	</div>
34	</div>
35	</div>
36	<div className={`w-full ${isLast ? '' : 'pb-10'}`}>
37	<p className="text-sm font-medium text-foreground mb-1">{title}</p>
38	<p className="text-sm text-foreground-light mb-4">{description}</p>
39	{children}
40	</div>
41	</div>
42	)
43	}