konnosDashboard
ConnectSheetStep.tsx53 lines · main
1import { PropsWithChildren } from 'react'
2import { cn } from 'ui'
3
4interface ConnectSheetStepProps {
5 number: number
6 title: string
7 description: string
8 className?: string
9}
10
11export const ConnectSheetStep = ({
12 number,
13 title,
14 description,
15 className,
16 children,
17}: PropsWithChildren<ConnectSheetStepProps>) => {
18 return (
19 <div
20 className={cn('group', className)}
21 data-connect-step
22 data-step-title={title}
23 data-step-description={description}
24 >
25 <div className="flex items-start gap-6 self-stretch">
26 <div className="relative self-stretch shrink-0 w-6">
27 <div className="absolute inset-0 flex items-start justify-center">
28 <div
29 aria-hidden="true"
30 className={cn(
31 'absolute left-[calc(50%-1px)] w-px bg-border opacity-60 h-full',
32 'group-last:bg-transparent'
33 )}
34 />
35 <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">
36 {number}
37 </div>
38 </div>
39 </div>
40
41 <div className="grid grid-cols-1 2xl:grid-cols-5 gap-x-6 gap-y-4 pb-12 w-full">
42 <div className="flex flex-col 2xl:col-span-2">
43 <p className="text-sm font-medium text-foreground">{title}</p>
44 <p className="text-sm text-foreground-light">{description}</p>
45 </div>
46 <div className="2xl:col-span-3 [&_pre.code-block]:bg-surface-75!" data-step-content>
47 {children}
48 </div>
49 </div>
50 </div>
51 </div>
52 )
53}