49 lines
1.5 KiB
TypeScript
49 lines
1.5 KiB
TypeScript
|
import { FC } from "react"
|
||
|
|
import Link from "next/link"
|
||
|
|
import useRoutes from "@/hooks/useRoutes"
|
||
|
|
import { UserType } from "@/types/UserType"
|
||
|
|
import { DishType } from "@/types/DishType"
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
dishes: DishType[],
|
||
|
|
users: UserType[]
|
||
|
|
}
|
||
|
|
|
||
|
|
const OnboardingBanner: FC<Props> = ({ dishes, users }) => {
|
||
|
|
const routes = useRoutes();
|
||
|
|
|
||
|
|
const steps = [
|
||
|
|
{
|
||
|
|
label: "Create a user",
|
||
|
|
href: routes.user.create(),
|
||
|
|
count: users.length
|
||
|
|
}, {
|
||
|
|
label: "Create a dish",
|
||
|
|
href: routes.dish.create(),
|
||
|
|
count: dishes.length
|
||
|
|
}
|
||
|
|
]
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="border-2 border-secondary p-6 text-lg">
|
||
|
|
<div className="text-xl">Welcome to DishPlanner</div>
|
||
|
|
<div className="my-5">To get you started, please follow these steps to set up your account. This will ensure a better
|
||
|
|
experience.
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{
|
||
|
|
steps.map((step, index) => (
|
||
|
|
<div className="w-full text-center text-2xl my-5" key={index}>
|
||
|
|
{
|
||
|
|
step.count === 0
|
||
|
|
? <Link href={ step.href } className="underline">{ step.label }</Link>
|
||
|
|
: <div className="line-through">{ step.label }</div>
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
))
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default OnboardingBanner;
|