42 lines
1.3 KiB
TypeScript
42 lines
1.3 KiB
TypeScript
import Link from "next/link";
|
|
|
|
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
|
import { Icon, Skeleton } from "@calcom/ui";
|
|
|
|
import { CalendarToggleContainer } from "./CalendarToggleContainer";
|
|
import { EventScheduleItem } from "./EventScheduleItem";
|
|
import { EventTypeSelect } from "./EventTypeSelect";
|
|
|
|
const BackButtonInSidebar = ({ name }: { name: string }) => {
|
|
return (
|
|
<Link
|
|
href="/availability"
|
|
className="hover:bg-subtle group-hover:text-default text-emphasis group flex h-6 max-h-6 w-full flex-row items-center rounded-md px-3 py-2">
|
|
<Icon
|
|
name="arrow-left"
|
|
className="h-4 w-4 stroke-[2px] ltr:mr-[10px] rtl:ml-[10px] rtl:rotate-180 md:mt-0"
|
|
/>
|
|
<Skeleton
|
|
title={name}
|
|
as="p"
|
|
className="max-w-36 min-h-4 truncate font-semibold"
|
|
loadingClassName="ms-3">
|
|
{name}
|
|
</Skeleton>
|
|
</Link>
|
|
);
|
|
};
|
|
|
|
export const TroubleshooterSidebar = () => {
|
|
const { t } = useLocale();
|
|
|
|
return (
|
|
<div className="relative z-10 hidden h-screen w-full flex-col gap-6 overflow-y-auto py-6 pl-4 pr-6 sm:flex md:pl-0">
|
|
<BackButtonInSidebar name={t("troubleshooter")} />
|
|
<EventTypeSelect />
|
|
<EventScheduleItem />
|
|
<CalendarToggleContainer />
|
|
</div>
|
|
);
|
|
};
|