a3cb058a3b
All checks were successful
Deploy / deploy (push) Successful in 7m45s
- Updated the app.db file to reflect recent changes in the application state. - Modified BACKLOG.md to include new entries regarding the removal of certain wizard steps, adjustments to priority chips, and the introduction of special quota conditions for candidates. - Added details on the decision to link priority chips to data sources and clarified the implications for user experience and data handling.
124 lines
3.4 KiB
TypeScript
124 lines
3.4 KiB
TypeScript
"use client"
|
||
|
||
// prompt-kit `steps` (https://prompt-kit.com/c/steps.json), sitenin paletine
|
||
// çevrildi: `muted/foreground/popover` token'ları yerine slate ölçeği
|
||
// (DESIGN.md §2, §2.3 — koyu temada token'lar çevrilir, `dark:` yok). Yapı
|
||
// aynı: Steps (Collapsible) → StepsTrigger (başlık + ok) → StepsContent
|
||
// (solda dikey çubuk, sağda adımlar). Danışman sohbetinde araç adımlarını
|
||
// listeler (features/rapor/components/arac-pilleri.tsx, §4.20).
|
||
|
||
import {
|
||
Collapsible,
|
||
CollapsibleContent,
|
||
CollapsibleTrigger,
|
||
} from "@/components/ui/collapsible"
|
||
import { cn } from "@/lib/utils"
|
||
import { ChevronDown } from "lucide-react"
|
||
|
||
export type StepsItemProps = React.ComponentProps<"div">
|
||
|
||
export const StepsItem = ({
|
||
children,
|
||
className,
|
||
...props
|
||
}: StepsItemProps) => (
|
||
<div className={cn("text-sm text-slate-600", className)} {...props}>
|
||
{children}
|
||
</div>
|
||
)
|
||
|
||
export type StepsTriggerProps = React.ComponentProps<
|
||
typeof CollapsibleTrigger
|
||
> & {
|
||
leftIcon?: React.ReactNode
|
||
swapIconOnHover?: boolean
|
||
}
|
||
|
||
export const StepsTrigger = ({
|
||
children,
|
||
className,
|
||
leftIcon,
|
||
swapIconOnHover = true,
|
||
...props
|
||
}: StepsTriggerProps) => (
|
||
<CollapsibleTrigger
|
||
className={cn(
|
||
"group flex w-full cursor-pointer items-center justify-start gap-1 text-sm text-slate-500 transition-colors hover:text-slate-800",
|
||
className
|
||
)}
|
||
{...props}
|
||
>
|
||
<div className="flex items-center gap-2">
|
||
{leftIcon ? (
|
||
<span className="relative inline-flex size-4 items-center justify-center">
|
||
<span
|
||
className={cn(
|
||
"transition-opacity",
|
||
swapIconOnHover && "group-hover:opacity-0"
|
||
)}
|
||
>
|
||
{leftIcon}
|
||
</span>
|
||
{swapIconOnHover && (
|
||
<ChevronDown className="absolute size-4 opacity-0 transition-opacity group-hover:opacity-100 group-data-[state=open]:rotate-180" />
|
||
)}
|
||
</span>
|
||
) : null}
|
||
<span>{children}</span>
|
||
</div>
|
||
{!leftIcon && (
|
||
<ChevronDown className="size-4 transition-transform group-data-[state=open]:rotate-180" />
|
||
)}
|
||
</CollapsibleTrigger>
|
||
)
|
||
|
||
export type StepsContentProps = React.ComponentProps<
|
||
typeof CollapsibleContent
|
||
> & {
|
||
bar?: React.ReactNode
|
||
}
|
||
|
||
export const StepsContent = ({
|
||
children,
|
||
className,
|
||
bar,
|
||
...props
|
||
}: StepsContentProps) => {
|
||
return (
|
||
<CollapsibleContent
|
||
className={cn(
|
||
"overflow-hidden text-slate-800 data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down motion-reduce:animate-none",
|
||
className
|
||
)}
|
||
{...props}
|
||
>
|
||
<div className="mt-2 grid max-w-full min-w-0 grid-cols-[min-content_minmax(0,1fr)] items-start gap-x-3">
|
||
<div className="min-w-0 self-stretch">{bar ?? <StepsBar />}</div>
|
||
<div className="min-w-0 space-y-1.5">{children}</div>
|
||
</div>
|
||
</CollapsibleContent>
|
||
)
|
||
}
|
||
|
||
export type StepsBarProps = React.HTMLAttributes<HTMLDivElement>
|
||
|
||
export const StepsBar = ({ className, ...props }: StepsBarProps) => (
|
||
<div
|
||
className={cn("h-full w-0.5 rounded-full bg-slate-200", className)}
|
||
aria-hidden
|
||
{...props}
|
||
/>
|
||
)
|
||
|
||
export type StepsProps = React.ComponentProps<typeof Collapsible>
|
||
|
||
export function Steps({ defaultOpen = true, className, ...props }: StepsProps) {
|
||
return (
|
||
<Collapsible
|
||
className={cn(className)}
|
||
defaultOpen={defaultOpen}
|
||
{...props}
|
||
/>
|
||
)
|
||
}
|