50 lines
No EOL
1.8 KiB
TypeScript
50 lines
No EOL
1.8 KiB
TypeScript
import React from "react";
|
|
import {UserType} from "~/types/UserType";
|
|
import ScheduleDayCardUserDish from "~/components/features/schedule/dayCard/ScheduleDayCardUserDish";
|
|
import { FilledScheduleType, ScheduleType } from "~/types/ScheduleType";
|
|
import { Link } from "react-router";
|
|
import {PencilSquareIcon} from "@heroicons/react/24/outline";
|
|
import useRoutes from "~/hooks/useRoutes";
|
|
import DateBadge from "~/components/features/schedule/dayCard/DateBadge";
|
|
import { DateTime } from "luxon"
|
|
import classNames from "classnames"
|
|
|
|
interface Props {
|
|
schedule: ScheduleType|FilledScheduleType;
|
|
users: UserType[];
|
|
}
|
|
|
|
const ScheduleDayCard = ({schedule, users}: Props) => {
|
|
const routes = useRoutes()
|
|
const isToday = DateTime.fromISO(schedule.date).toFormat("yyyy-LL-dd") == DateTime.now().toFormat("yyyy-LL-dd")
|
|
|
|
const containerStyles = classNames(
|
|
'w-full bg-gray-500 pt-5 pb-2 rounded-2xl text-xl', {
|
|
'border-2 text-accent-blue border-accent-blue': isToday,
|
|
}
|
|
)
|
|
|
|
return (
|
|
<div className="relative flex pt-3 pr-2 w-full border-1 border-accent">
|
|
<DateBadge date={schedule.date} />
|
|
|
|
<div className={containerStyles}>
|
|
{
|
|
users.map((user) => <ScheduleDayCardUserDish key={user.id} user={user} schedule={schedule}/>)
|
|
}
|
|
|
|
<div className="w-full mt-2 border-t-2 border-background">
|
|
<Link
|
|
className="w-full flex text-sm pr-3 pt-2"
|
|
aria-label="Edit dish"
|
|
to={routes.schedule.date.edit(schedule.date)}
|
|
>
|
|
<PencilSquareIcon className="h-5 w-5 mr-2 ml-auto" /> Edit
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ScheduleDayCard; |