StepsSection.tsx50 lines · main

1	import { cn } from 'ui'
2
3	import type { GoStepsSection } from '../schemas'
4
5	export default function StepsSection({ section }: { section: GoStepsSection }) {
6	return (
7	<div className="max-w-7xl w-full min-w-0 mx-auto px-8">
8	{(section.title || section.description) && (
9	<div className="mb-12">
10	{section.title && (
11	<h2 className="text-2xl sm:text-3xl font-medium text-foreground">{section.title}</h2>
12	)}
13	{section.description && (
14	<p className="text-foreground-lighter mt-3 text-lg">{section.description}</p>
15	)}
16	</div>
17	)}
18	<div className="relative">
19	{section.items.map((item, i) => {
20	const isLast = i === section.items.length - 1
21	return (
22	<div key={i} className="flex gap-4 sm:gap-5">
23	<div className="flex flex-col items-center">
24	<div className="flex items-center justify-center w-9 h-9 rounded-full border border-muted bg-surface-100 text-foreground text-sm font-medium shrink-0">
25	{item.icon ?? i + 1}
26	</div>
27	{!isLast && <div className="w-px flex-1 bg-muted my-2" />}
28	</div>
29	<div
30	className={cn(
31	isLast ? 'flex-1 min-w-0 pb-0' : 'flex-1 min-w-0 pb-8',
32	'-translate-y-1'
33	)}
34	>
35	<h3 className="text-foreground font-medium text-base mt-2">{item.title}</h3>
36	{item.content ? (
37	<div className="mt-2">{item.content}</div>
38	) : item.description ? (
39	<p className="text-foreground-lighter text-sm mt-2 leading-relaxed">
40	{item.description}
41	</p>
42	) : null}
43	</div>
44	</div>
45	)
46	})}
47	</div>
48	</div>
49	)
50	}