48 lines
No EOL
1.4 KiB
TypeScript
48 lines
No EOL
1.4 KiB
TypeScript
import { Link } from "react-router"
|
|
import useRoutes from "@/hooks/useRoutes"
|
|
import { UserType } from "@/types/UserType"
|
|
import { DishType } from "@/types/DishType"
|
|
|
|
interface Props {
|
|
dishes: DishType[],
|
|
users: UserType[]
|
|
}
|
|
|
|
const OnboardingBanner = ({ dishes, users }: Props) => {
|
|
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 to={ step.href } className="underline">{ step.label }</Link>
|
|
: <div className="line-through">{ step.label }</div>
|
|
}
|
|
</div>
|
|
))
|
|
}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default OnboardingBanner; |