83 lines
2.7 KiB
TypeScript
83 lines
2.7 KiB
TypeScript
import { redirect } from "next/navigation";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import { api } from "@/server/api/client";
|
|
import { getServerAuthSession } from "@/server/auth";
|
|
import { ZDay } from "@lifetracker/shared/types/days";
|
|
import EditableDayComment from "./EditableDayComment";
|
|
import { MoodStars } from "./MoodStars";
|
|
import { format, addDays } from "date-fns";
|
|
import { ButtonWithTooltip } from "@/components/ui/button";
|
|
import { router } from "next/navigation";
|
|
import Link from "next/link";
|
|
import { cn } from "@/lib/utils";
|
|
import { ArrowLeftSquare, ArrowRightSquare } from "lucide-react";
|
|
import { UTCDate, utc } from "@date-fns/utc";
|
|
export default async function DayView({
|
|
day,
|
|
}: {
|
|
day: ZDay;
|
|
}) {
|
|
const session = await getServerAuthSession();
|
|
if (!session) {
|
|
redirect("/");
|
|
}
|
|
|
|
const prevDay = format(addDays(day.date, -1), "yyyy-MM-dd");
|
|
const nextDay = format(addDays(day.date, 1), "yyyy-MM-dd");
|
|
|
|
return (
|
|
<div className="flex flex-col gap-3">
|
|
|
|
<div className="flex justify-between">
|
|
<div className="flex">
|
|
<Link
|
|
href={`/dashboard/day/${prevDay}`}
|
|
className={cn(
|
|
"flex-0 items-center rounded-[inherit] px-3 py-2",
|
|
)}
|
|
>
|
|
<div className="flex w-full justify-between">
|
|
<ArrowLeftSquare size={18} />
|
|
</div>
|
|
</Link>
|
|
<span className="text-2xl flex-1">
|
|
{format(day.date, "EEEE, MMMM do", { in: utc })}
|
|
</span>
|
|
<Link
|
|
href={`/dashboard/day/${nextDay}`}
|
|
className={cn(
|
|
"flex-0 items-center rounded-[inherit] px-3 py-2",
|
|
)}
|
|
>
|
|
<div className="flex w-full justify-between">
|
|
<ArrowRightSquare size={18} />
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
<div>
|
|
<MoodStars
|
|
day={day}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<EditableDayComment day={day}
|
|
className="text-xl"
|
|
/>
|
|
|
|
<Separator />
|
|
|
|
<ul>
|
|
{day.hours.map((hour) => (
|
|
<li key={hour.time}>
|
|
{hour.time}: {hour.categoryName} {hour.comment}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
</div>
|
|
);
|
|
}
|