76 lines
2.5 KiB
TypeScript
76 lines
2.5 KiB
TypeScript
import { useTranslation } from "react-i18next";
|
|
import { SetupItem } from "~/application/dtos/setup/SetupItem";
|
|
import ButtonSecondary from "../ui/buttons/ButtonSecondary";
|
|
import clsx from "clsx";
|
|
import { CheckCircleIcon } from "~/components/ui/icons/vendor";
|
|
|
|
interface Props {
|
|
items: SetupItem[];
|
|
}
|
|
|
|
function CompletedIcon() {
|
|
return (
|
|
<CheckCircleIcon className="border-border h-6 w-6 rounded-full border text-gray-200" />
|
|
);
|
|
}
|
|
|
|
function IncompletedIcon() {
|
|
return (
|
|
<CheckCircleIcon className="h-6 w-6 rounded-full border border-teal-500 text-teal-500" />
|
|
);
|
|
}
|
|
|
|
function SetupStep({ item, index, total }: { item: SetupItem; index: number; total: number }) {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<li key={index} className="border-border bg-background space-y-3 rounded-lg border p-4">
|
|
<div className="flex items-center space-x-2">
|
|
<div className="shrink-0">{!item.completed ? <CompletedIcon /> : <IncompletedIcon />}</div>
|
|
<div className="flex w-full justify-between">
|
|
<div className="font-medium">{item.title}</div>
|
|
<div className=" text-muted-foreground text-sm">
|
|
{index + 1}/{total}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p className=" text-sm">{item.description}</p>
|
|
<div>
|
|
<ButtonSecondary to={item.path} className="mt-3">
|
|
{!item.completed ? t("app.sidebar.setup") : `${t("shared.goTo")} ${item.title.toLowerCase()}`} →
|
|
</ButtonSecondary>
|
|
</div>
|
|
</li>
|
|
);
|
|
}
|
|
|
|
export default function SetupSteps({ items }: Props) {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<div>
|
|
<h3 className="text-foreground font-medium leading-4">{t("onboarding.gettingStarted.title")}</h3>
|
|
<ul
|
|
className={clsx(
|
|
"mt-3 grid grid-cols-1 gap-4",
|
|
items.length === 1 && "lg:grid-cols-3",
|
|
items.length === 2 && "lg:grid-cols-2",
|
|
items.length === 3 && "lg:grid-cols-3",
|
|
items.length === 4 && "lg:grid-cols-2",
|
|
items.length === 5 && "lg:grid-cols-3",
|
|
items.length === 6 && "lg:grid-cols-3",
|
|
items.length === 7 && "lg:grid-cols-4",
|
|
items.length === 8 && "lg:grid-cols-4",
|
|
items.length === 9 && "lg:grid-cols-3",
|
|
items.length === 10 && "lg:grid-cols-5",
|
|
items.length === 11 && "lg:grid-cols-4",
|
|
items.length === 12 && "lg:grid-cols-4"
|
|
)}
|
|
>
|
|
{items.map((item, index) => (
|
|
<SetupStep key={index} item={item} index={index} total={items.length} />
|
|
))}
|
|
</ul>
|
|
</div>
|
|
);
|
|
}
|