91 lines
2.5 KiB
TypeScript
91 lines
2.5 KiB
TypeScript
import clsx from "clsx"
|
|
import React from "react"
|
|
import LearningPathIcon from "./Icon"
|
|
import { getLearningPath } from "../../utils/learning-paths"
|
|
import { useLearningPath } from "../../providers/LearningPath"
|
|
import { Button, useNotifications } from "docs-ui"
|
|
import { CircleMiniSolid } from "@medusajs/icons"
|
|
|
|
type LearningPathProps = {
|
|
pathName: string
|
|
className?: string
|
|
} & React.AllHTMLAttributes<HTMLDivElement>
|
|
|
|
const LearningPath: React.FC<LearningPathProps> = ({
|
|
pathName,
|
|
className = "",
|
|
}) => {
|
|
const path = getLearningPath(pathName)
|
|
if (!path) {
|
|
throw new Error(`Learning path ${pathName} does not exist.`)
|
|
}
|
|
const { startPath, path: currentPath } = useLearningPath()
|
|
const notificationContext = useNotifications()
|
|
|
|
const handleClick = () => {
|
|
if (notificationContext && currentPath?.notificationId) {
|
|
notificationContext.removeNotification(currentPath.notificationId)
|
|
}
|
|
startPath(path)
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={clsx(
|
|
"rounded shadow-card-rest dark:shadow-card-rest-dark bg-docs-bg-surface mt-1.5 mb-4",
|
|
className
|
|
)}
|
|
>
|
|
<div
|
|
className={clsx(
|
|
"flex items-center gap-1 p-1 border-0 border-b border-solid border-medusa-border-base"
|
|
)}
|
|
>
|
|
<LearningPathIcon />
|
|
<div className={clsx("basis-3/4")}>
|
|
<span
|
|
className={clsx(
|
|
"text-medusa-fg-base text-compact-large-plus block"
|
|
)}
|
|
>
|
|
{path.label}
|
|
</span>
|
|
{path.description && (
|
|
<span
|
|
className={clsx(
|
|
"text-medusa-fg-subtle text-compact-medium mt-0.25 inline-block"
|
|
)}
|
|
>
|
|
{path.description}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<Button onClick={handleClick} className={clsx("basis-1/4 max-w-fit")}>
|
|
Start Path
|
|
</Button>
|
|
</div>
|
|
{path.steps.map((step, index) => (
|
|
<div
|
|
className={clsx(
|
|
"flex items-center p-1 gap-1",
|
|
index !== path.steps.length - 1 &&
|
|
"border-0 border-b border-solid border-medusa-border-base"
|
|
)}
|
|
key={index}
|
|
>
|
|
<div className={clsx("w-3 flex items-center justify-center")}>
|
|
<CircleMiniSolid className="text-medusa-fg-muted" />
|
|
</div>
|
|
<span
|
|
className={clsx("text-medusa-fg-base text-compact-medium-plus")}
|
|
>
|
|
{step.title}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default LearningPath
|