Skip to content

Commit 33d0fee

Browse files
RyukemeisterThyMinimalDev
Ryukemeister
and
ThyMinimalDev
authored
chore: add styling to examples app (#14252)
* add styling to examples app * prettier homepage --------- Co-authored-by: Morgan Vernay <morgan@cal.com>
1 parent bb13de4 commit 33d0fee

File tree

5 files changed

+196
-70
lines changed

5 files changed

+196
-70
lines changed

‎packages/platform/examples/base/src/pages/[bookingUid].tsx

+122-33
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,26 @@
11
import { Navbar } from "@/components/Navbar";
2+
import { CheckCircle2Icon } from "lucide-react";
3+
import { X } from "lucide-react";
24
import { Inter } from "next/font/google";
35
import { useRouter } from "next/router";
46

57
import { useGetBooking, useCancelBooking } from "@calcom/atoms";
8+
import dayjs from "@calcom/dayjs";
69

710
const inter = Inter({ subsets: ["latin"] });
811

912
export default function Bookings(props: { calUsername: string; calEmail: string }) {
1013
const router = useRouter();
14+
1115
const { isLoading, data: booking, refetch } = useGetBooking((router.query.bookingUid as string) ?? "");
16+
const startTime = dayjs(booking?.startTime).format(12 === 12 ? "h:mma" : "HH:mm");
17+
const endTime = dayjs(booking?.endTime).format(12 === 12 ? "h:mma" : "HH:mm");
18+
const date = dayjs(booking?.startTime).toDate();
19+
const dateToday = dayjs(booking?.startTime).date();
20+
const year = dayjs(booking?.startTime).year();
21+
const day = dayjs(date).format("dddd");
22+
const month = dayjs(date).format("MMMM");
23+
1224
const { mutate: cancelBooking } = useCancelBooking({
1325
onSuccess: () => {
1426
refetch();
@@ -20,41 +32,118 @@ export default function Bookings(props: { calUsername: string; calEmail: string
2032
<Navbar username={props.calUsername} />
2133
{isLoading && <p>Loading...</p>}
2234
{!isLoading && booking && (
23-
<div key={booking.id} className="my-2 w-[440px] overflow-hidden rounded p-2 shadow-md">
24-
<div className="px-6 py-4">
25-
<div className="text-md mb-0.5 font-semibold">
26-
<p>{booking.title}</p>
35+
<div
36+
key={booking.id}
37+
className="my-10 w-[440px] overflow-hidden rounded-md border-[0.7px] border-black px-10 py-5">
38+
{booking.status === "ACCEPTED" ? (
39+
<div className="mx-2 my-4 flex flex-col items-center justify-center text-center">
40+
<CheckCircle2Icon className="my-5 flex h-[40px] w-[40px] rounded-full bg-green-500" />
41+
<h1 className="text-xl font-bold">This meeting is scheduled</h1>
42+
<p>We sent an email with a calendar invitation with the details to everyone.</p>
2743
</div>
44+
) : (
45+
<div className="mx-2 my-4 flex flex-col items-center justify-center text-center">
46+
<X className="my-5 flex h-[40px] w-[40px] rounded-full bg-red-400" />
47+
<h4 className="text-2xl font-bold">This event is cancelled</h4>
48+
</div>
49+
)}
50+
<hr className="mx-2 bg-black text-black" />
51+
<div className="mx-2 my-7 flex flex-col gap-y-3">
52+
<div className="flex gap-[70px]">
53+
<div>
54+
<h4>What</h4>
55+
</div>
56+
<div>
57+
<p>{booking.title}</p>
58+
</div>
59+
</div>
60+
<div className="flex gap-[70px]">
61+
<div>
62+
<h4>When</h4>
63+
</div>
64+
<div>
65+
<div>
66+
<p
67+
style={{
68+
textDecoration: booking.status === "ACCEPTED" ? "normal" : "line-through",
69+
}}>
70+
{`${day}, ${month} ${dateToday}, ${year}`}
71+
</p>
72+
</div>
73+
<div>
74+
<p
75+
style={{
76+
textDecoration: booking.status === "ACCEPTED" ? "normal" : "line-through",
77+
}}>
78+
{`${startTime}`} - {`${endTime}`}
79+
</p>
80+
</div>
81+
</div>
82+
</div>
83+
<div className="flex gap-[70px]">
84+
<div>Who</div>
85+
<div>
86+
<div>
87+
<div>
88+
<h4>
89+
{booking.user.name}{" "}
90+
<span className="rounded-md bg-blue-800 px-2 text-sm text-white">Host</span>
91+
</h4>
92+
<p>{booking.user.email}</p>
93+
</div>
94+
</div>
95+
<div>
96+
<div>
97+
<h4>{`${booking.responses.name}`}</h4>
98+
<p>{`${booking.responses.email}`}</p>
99+
</div>
100+
</div>
101+
</div>
102+
</div>
103+
{booking.responses.notes && (
104+
<div className="flex gap-[70px]">
105+
<div className="w-[40px]">
106+
<h4>Additional notes</h4>
107+
</div>
108+
<div>
109+
<p>{`${booking.responses.notes}`}</p>
110+
</div>
111+
</div>
112+
)}
28113
</div>
29-
<div className="px-6 pb-2">
30-
<p>{booking.description}</p>
31-
<p>{booking.startTime}</p>
32-
<p>{booking.endTime}</p>
33-
<p>{booking.status}</p>
34-
</div>
35-
<div className="px-6">
36-
<button
37-
className="rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700"
38-
onClick={() => {
39-
cancelBooking({
40-
id: parseInt(booking.id),
41-
uid: booking.uid,
42-
cancellationReason: "User request",
43-
allRemainingBookings: true,
44-
});
45-
}}>
46-
Cancel
47-
</button>
48-
<button
49-
className="ml-4 rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700"
50-
onClick={() => {
51-
router.push(
52-
`/booking?rescheduleUid=${booking?.uid}&eventTypeSlug=${booking?.eventType?.slug}`
53-
);
54-
}}>
55-
Reschedule
56-
</button>
57-
</div>
114+
115+
{booking.status === "ACCEPTED" && (
116+
<>
117+
<hr className="mx-3" />
118+
<div className="mx-2 my-3 text-center">
119+
<p>
120+
Need to make a change?{" "}
121+
<button
122+
className="underline"
123+
onClick={() => {
124+
router.push(
125+
`/booking?rescheduleUid=${booking?.uid}&eventTypeSlug=${booking?.eventType?.slug}`
126+
);
127+
}}>
128+
Reschedule
129+
</button>{" "}
130+
or{" "}
131+
<button
132+
className="underline"
133+
onClick={() => {
134+
cancelBooking({
135+
id: parseInt(booking.id),
136+
uid: booking.uid,
137+
cancellationReason: "User request",
138+
allRemainingBookings: true,
139+
});
140+
}}>
141+
Cancel
142+
</button>
143+
</p>
144+
</div>
145+
</>
146+
)}
58147
</div>
59148
)}
60149
</main>

‎packages/platform/examples/base/src/pages/booking.tsx

+19-10
Original file line numberDiff line numberDiff line change
@@ -19,20 +19,29 @@ export default function Bookings(props: { calUsername: string; calEmail: string
1919
className={`flex min-h-screen flex-col ${inter.className} main text-default flex min-h-full w-full flex-col items-center overflow-visible`}>
2020
<Navbar username={props.calUsername} />
2121
<div>
22-
<h1 className="my-4 text-2xl font-semibold">{props.calUsername} Public Booking Page</h1>
22+
<h1 className="mx-10 my-4 text-2xl font-semibold">{props.calUsername} Public Booking Page</h1>
2323

2424
{isLoadingEvents && !eventTypeSlug && <p>Loading...</p>}
2525

2626
{!isLoadingEvents && !eventTypeSlug && Boolean(eventTypes?.length) && !rescheduleUid && (
27-
<div className="flex flex-row gap-4">
28-
{eventTypes?.map((event: { id: number; slug: string; title: string }) => (
29-
<button
30-
key={event.id}
31-
className="rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700"
32-
onClick={() => setEventTypeSlug(event.slug)}>
33-
{event.slug}
34-
</button>
35-
))}
27+
<div className="flex flex-col gap-4">
28+
{eventTypes?.map((event: { id: number; slug: string; title: string }) => {
29+
const formatEventSlug = event.slug
30+
.split("-")
31+
.map((item) => `${item[0].toLocaleUpperCase()}${item.slice(1)}`)
32+
.join(" ");
33+
34+
return (
35+
<div
36+
onClick={() => setEventTypeSlug(event.slug)}
37+
className="mx-10 w-[80vw] cursor-pointer rounded-md border-[0.8px] border-black px-10 py-4"
38+
key={event.id}>
39+
<h1 className="text-lg font-semibold">{formatEventSlug}</h1>
40+
<p>{`/${event.slug}`}</p>
41+
<span className="border-none bg-gray-800 px-2 text-white">{event?.length}</span>
42+
</div>
43+
);
44+
})}
3645
</div>
3746
)}
3847

‎packages/platform/examples/base/src/pages/bookings.tsx

+38-17
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Inter } from "next/font/google";
33
import { useRouter } from "next/router";
44

55
import { useGetBookings } from "@calcom/atoms";
6+
import dayjs from "@calcom/dayjs";
67

78
const inter = Inter({ subsets: ["latin"] });
89

@@ -29,25 +30,45 @@ export default function Bookings(props: { calUsername: string; calEmail: string
2930
{isLoading && <p>Loading...</p>}
3031
{!isLoading &&
3132
(Boolean(upcomingBookings?.bookings.length) || Boolean(pastBookings?.bookings.length)) &&
32-
[...pastBookings?.bookings, ...upcomingBookings?.bookings].map((booking) => (
33-
<div
34-
key={booking.id}
35-
className="my-2 w-[440px] cursor-pointer overflow-hidden rounded shadow-md"
36-
onClick={() => {
37-
router.push(`/${booking.uid}`);
38-
}}>
39-
<div className="px-6 py-4">
40-
<div className="text-md mb-0.5 font-semibold">
41-
<p>{booking.title}</p>
33+
[...pastBookings?.bookings, ...upcomingBookings?.bookings].map((booking) => {
34+
const date = dayjs(booking.startTime).toDate();
35+
const startTime = dayjs(booking?.startTime).format(12 === 12 ? "h:mma" : "HH:mm");
36+
const endTime = dayjs(booking?.endTime).format(12 === 12 ? "h:mma" : "HH:mm");
37+
const day = dayjs(date).format("dddd");
38+
const month = dayjs(date).format("MMMM");
39+
40+
return (
41+
<div
42+
key={booking.id}
43+
className="mx-10 my-2 flex w-[80vw] cursor-pointer items-center justify-between overflow-hidden rounded border-[0.8px] border-black py-4"
44+
onClick={() => {
45+
router.push(`/${booking.uid}`);
46+
}}>
47+
<div>
48+
<div className="px-6">{`${day}, ${dayjs(booking.startTime).date()} ${month}`}</div>
49+
<div className="px-6">
50+
<p>
51+
{startTime} - {endTime}
52+
</p>{" "}
53+
<p />
54+
</div>
55+
</div>
56+
<div>
57+
<div className="px-6">
58+
<div className="text-md mb-0.5 font-semibold">
59+
<p>{booking.title}</p>
60+
</div>
61+
</div>
62+
<div className="px-6">
63+
<p>
64+
{booking.user.name} and {booking.attendees[0].name}
65+
</p>{" "}
66+
<p />
67+
</div>
4268
</div>
4369
</div>
44-
<div className="px-6 pb-2">
45-
<p>{booking.startTime}</p>
46-
<p>{booking.endTime}</p>
47-
<p>{booking.status}</p>
48-
</div>
49-
</div>
50-
))}
70+
);
71+
})}
5172
</main>
5273
);
5374
}

‎packages/platform/examples/base/src/pages/calendars.tsx

+8-2
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,13 @@ export default function Calendars(props: { calUsername: string; calEmail: string
1313
<main className={`flex min-h-screen flex-col ${inter.className}`}>
1414
<Navbar username={props.calUsername} />
1515
<div className="p-4">
16-
<h1 className="my-4 text-lg font-bold">Your Connected Calendars</h1>
16+
{!!connectedCalendars?.length ? (
17+
<h1 className="my-4 text-lg font-bold">Your Connected Calendars</h1>
18+
) : (
19+
<h1 className="mx-10 my-4 text-xl font-bold">
20+
You have not connected any calendars yet, please connect your Google calendar.
21+
</h1>
22+
)}
1723
{isLoading ? (
1824
<div>Loading...</div>
1925
) : (
@@ -29,7 +35,7 @@ export default function Calendars(props: { calUsername: string; calEmail: string
2935
</div>
3036
))
3137
)}
32-
<hr className="my-4" />
38+
{!!connectedCalendars?.length && <hr className="my-4" />}
3339
{!isLoading && destinationCalendar.id && (
3440
<div className="">
3541
<h2 className="text-md font-bold">Destination Calendar: {destinationCalendar.name}</h2>

‎packages/platform/examples/base/src/pages/index.tsx

+9-8
Original file line numberDiff line numberDiff line change
@@ -8,25 +8,26 @@ const poppins = Poppins({ subsets: ["latin"], weight: ["400", "800"] });
88

99
export default function Home(props: { calUsername: string; calEmail: string }) {
1010
return (
11-
<main className={`flex min-h-screen flex-col ${inter.className}`}>
11+
<main className={`flex min-h-screen flex-col ${inter.className} items-center justify-center`}>
1212
<Navbar username={props.calUsername} />
1313
<div
14-
className={`flex h-[80vh] w-full items-center justify-center gap-y-3 p-14 font-mono lg:flex ${inter.className}`}>
15-
<div>
16-
<h1 className={`${poppins.className} w-[70%] pb-3 text-8xl font-bold`}>
14+
className={` h-[100vh] w-full items-center justify-center gap-y-3 font-mono lg:flex ${inter.className} gap-16 `}>
15+
<div className="ml-32">
16+
<h1 className={`${poppins.className} w-[100%] pb-3 text-7xl font-bold`}>
1717
The all in one Scheduling marketplace
1818
</h1>
1919
<p className={`w-[70%] font-normal ${inter.className} pb-3 text-2xl`}>
2020
To get started, connect your google calendar.
2121
</p>
2222
<GcalConnect className="h-[40px] bg-gradient-to-r from-[#8A2387] via-[#E94057] to-[#F27121] text-center text-base font-semibold text-transparent text-white hover:bg-orange-700" />
2323
</div>
24-
<div>
24+
<div className="hidden lg:block">
2525
<img
26-
width="700px"
27-
height="700px"
26+
width="76%"
27+
height="76%"
28+
className=" rounded-lg shadow-2xl"
2829
alt="cover image"
29-
src="https://images.unsplash.com/photo-1508030592112-5b1661446db8?q=80&w=3200&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
30+
src="https://images.unsplash.com/photo-1506784365847-bbad939e9335?q=80&w=2668&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
3031
/>
3132
</div>
3233
</div>

0 commit comments

Comments
 (0)