-
Notifications
You must be signed in to change notification settings - Fork 6.8k
/
BookingLayout.tsx
58 lines (54 loc) · 1.62 KB
/
BookingLayout.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
import React, { ComponentProps } from "react";
import { Icon } from "@calcom/ui";
import HorizontalTabs from "@calcom/ui/v2/core/navigation/tabs/HorizontalTabs";
import type { VerticalTabItemProps } from "@calcom/ui/v2/core/navigation/tabs/VerticalTabItem";
import VerticalTabs from "@calcom/ui/v2/core/navigation/tabs/VerticalTabs";
import Shell from "../Shell";
import type { HorizontalTabItemProps } from "../navigation/tabs/HorizontalTabItem";
const tabs: (VerticalTabItemProps | HorizontalTabItemProps)[] = [
{
name: "upcoming",
href: "/bookings/upcoming",
icon: Icon.FiCalendar,
},
// TODO: Add filter for unconfimred bookings in a future PR - Out of scope
{
name: "unconfirmed",
href: "/bookings/unconfirmed",
icon: Icon.FiInbox,
},
{
name: "recurring",
href: "/bookings/recurring",
icon: Icon.FiRotateCcw,
},
{
name: "past",
href: "/bookings/past",
icon: Icon.FiSunset,
},
{
name: "cancelled",
href: "/bookings/cancelled",
icon: Icon.FiSlash,
},
];
export default function BookingLayout({
children,
...rest
}: { children: React.ReactNode } & ComponentProps<typeof Shell>) {
return (
<Shell {...rest}>
<div className="flex flex-col sm:space-x-2 xl:flex-row">
<div className="hidden xl:block">
<VerticalTabs tabs={tabs} sticky />
</div>
<div className="block xl:hidden">
<HorizontalTabs tabs={tabs} />
</div>
<main className="w-full max-w-6xl">{children}</main>
</div>
</Shell>
);
}
export const getLayout = (page: React.ReactElement) => <BookingLayout>{page}</BookingLayout>;