Steps

1"use client"
2 
3import {
4  Collapsible,
5  CollapsibleContent,
6  CollapsibleTrigger,
7} from "@/components/ui/collapsible"
8import { cn } from "@/lib/utils"
9import { ChevronDown } from "lucide-react"
10 
11export type StepsItemProps = React.ComponentProps<"div">
12 
13export const StepsItem = ({
14  children,
15  className,
16  ...props
17}: StepsItemProps) => (
18  <div className={cn("text-muted-foreground text-sm", className)} {...props}>
19    {children}
20  </div>
21)
22 
23export type StepsTriggerProps = React.ComponentProps<
24  typeof CollapsibleTrigger
25> & {
26  leftIcon?: React.ReactNode
27  swapIconOnHover?: boolean
28}
29 
30export const StepsTrigger = ({
31  children,
32  className,
33  leftIcon,
34  swapIconOnHover = true,
35  ...props
36}: StepsTriggerProps) => (
37  <CollapsibleTrigger
38    className={cn(
39      "group text-muted-foreground hover:text-foreground flex w-full cursor-pointer items-center justify-start gap-1 text-sm transition-colors",
40      className
41    )}
42    {...props}
43  >
44    <div className="flex items-center gap-2">
45      {leftIcon ? (
46        <span className="relative inline-flex size-4 items-center justify-center">
47          <span
48            className={cn(
49              "transition-opacity",
50              swapIconOnHover && "group-hover:opacity-0"
51            )}
52          >
53            {leftIcon}
54          </span>
55          {swapIconOnHover && (
56            <ChevronDown className="absolute size-4 opacity-0 transition-opacity group-hover:opacity-100 group-data-[state=open]:rotate-180" />
57          )}
58        </span>
59      ) : null}
60      <span>{children}</span>
61    </div>
62    {!leftIcon && (
63      <ChevronDown className="size-4 transition-transform group-data-[state=open]:rotate-180" />
64    )}
65  </CollapsibleTrigger>
66)
67 
68export type StepsContentProps = React.ComponentProps<
69  typeof CollapsibleContent
70> & {
71  bar?: React.ReactNode
72}
73 
74export const StepsContent = ({
75  children,
76  className,
77  bar,
78  ...props
79}: StepsContentProps) => {
80  return (
81    <CollapsibleContent
82      className={cn(
83        "text-popover-foreground data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down overflow-hidden",
84        className
85      )}
86      {...props}
87    >
88      <div className="mt-3 grid max-w-full min-w-0 grid-cols-[min-content_minmax(0,1fr)] items-start gap-x-3">
89        <div className="min-w-0 self-stretch">{bar ?? <StepsBar />}</div>
90        <div className="min-w-0 space-y-2">{children}</div>
91      </div>
92    </CollapsibleContent>
93  )
94}
95 
96// … truncated