134 lines
3.5 KiB
TypeScript
134 lines
3.5 KiB
TypeScript
"use client"
|
|
|
|
import {
|
|
CheckCircleSolid,
|
|
CircleDottedLine,
|
|
CircleHalfSolid,
|
|
} from "@medusajs/icons"
|
|
import * as ProgressTabsPrimitives from "@radix-ui/react-tabs"
|
|
import * as React from "react"
|
|
|
|
import { ProgressStatus } from "@/types"
|
|
import { clx } from "@/utils/clx"
|
|
|
|
/**
|
|
* This component is based on the [Radix UI Tabs](https://radix-ui.com/primitives/docs/components/tabs) primitves.
|
|
*
|
|
* @excludeExternal
|
|
*/
|
|
const ProgressTabsRoot = (props: ProgressTabsPrimitives.TabsProps) => {
|
|
return <ProgressTabsPrimitives.Root {...props} />
|
|
}
|
|
ProgressTabsRoot.displayName = "ProgressTabs"
|
|
|
|
interface IndicatorProps
|
|
extends Omit<React.ComponentPropsWithoutRef<"span">, "children"> {
|
|
/**
|
|
* The current status.
|
|
*/
|
|
status?: ProgressStatus
|
|
}
|
|
|
|
const ProgressIndicator = ({ status, className, ...props }: IndicatorProps) => {
|
|
const Icon = React.useMemo(() => {
|
|
switch (status) {
|
|
case "not-started":
|
|
return CircleDottedLine
|
|
case "in-progress":
|
|
return CircleHalfSolid
|
|
case "completed":
|
|
return CheckCircleSolid
|
|
default:
|
|
return CircleDottedLine
|
|
}
|
|
}, [status])
|
|
|
|
return (
|
|
<span
|
|
className={clx(
|
|
"text-ui-fg-muted group-data-[state=active]/trigger:text-ui-fg-interactive",
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
<Icon />
|
|
</span>
|
|
)
|
|
}
|
|
ProgressIndicator.displayName = "ProgressTabs.ProgressIndicator"
|
|
|
|
interface ProgressTabsTriggerProps
|
|
extends Omit<
|
|
React.ComponentPropsWithoutRef<typeof ProgressTabsPrimitives.Trigger>,
|
|
"asChild"
|
|
> {
|
|
status?: ProgressStatus
|
|
}
|
|
|
|
const ProgressTabsTrigger = React.forwardRef<
|
|
React.ElementRef<typeof ProgressTabsPrimitives.Trigger>,
|
|
ProgressTabsTriggerProps
|
|
>(
|
|
(
|
|
{
|
|
className,
|
|
children,
|
|
status = "not-started",
|
|
...props
|
|
}: ProgressTabsTriggerProps,
|
|
ref
|
|
) => (
|
|
<ProgressTabsPrimitives.Trigger
|
|
ref={ref}
|
|
className={clx(
|
|
"txt-compact-small-plus transition-fg text-ui-fg-muted bg-ui-bg-subtle border-r-ui-border-base inline-flex h-14 w-full max-w-[200px] flex-1 items-center gap-x-2 border-r px-4 text-left outline-none",
|
|
"group/trigger overflow-hidden text-ellipsis whitespace-nowrap",
|
|
"disabled:bg-ui-bg-disabled disabled:text-ui-fg-muted",
|
|
"hover:bg-ui-bg-subtle-hover",
|
|
"focus-visible:bg-ui-bg-base focus:z-[1]",
|
|
"data-[state=active]:text-ui-fg-base data-[state=active]:bg-ui-bg-base",
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
<ProgressIndicator status={status} />
|
|
{children}
|
|
</ProgressTabsPrimitives.Trigger>
|
|
)
|
|
)
|
|
ProgressTabsTrigger.displayName = "ProgressTabs.Trigger"
|
|
|
|
const ProgressTabsList = React.forwardRef<
|
|
React.ElementRef<typeof ProgressTabsPrimitives.List>,
|
|
React.ComponentPropsWithoutRef<typeof ProgressTabsPrimitives.List>
|
|
>(({ className, ...props }, ref) => (
|
|
<ProgressTabsPrimitives.List
|
|
ref={ref}
|
|
className={clx("flex items-center", className)}
|
|
{...props}
|
|
/>
|
|
))
|
|
ProgressTabsList.displayName = "ProgressTabs.List"
|
|
|
|
const ProgressTabsContent = React.forwardRef<
|
|
React.ElementRef<typeof ProgressTabsPrimitives.Content>,
|
|
React.ComponentPropsWithoutRef<typeof ProgressTabsPrimitives.Content>
|
|
>(({ className, ...props }, ref) => {
|
|
return (
|
|
<ProgressTabsPrimitives.Content
|
|
ref={ref}
|
|
className={clx("outline-none", className)}
|
|
{...props}
|
|
/>
|
|
)
|
|
})
|
|
ProgressTabsContent.displayName = "ProgressTabs.Content"
|
|
|
|
const ProgressTabs = Object.assign(ProgressTabsRoot, {
|
|
Trigger: ProgressTabsTrigger,
|
|
List: ProgressTabsList,
|
|
Content: ProgressTabsContent,
|
|
})
|
|
|
|
export { ProgressTabs }
|