chore: add styling to examples app (#14252)
* add styling to examples app * prettier homepage --------- Co-authored-by: Morgan Vernay <morgan@cal.com>
This commit is contained in:
Rajiv Sahal
co-authored by
Morgan Vernay
Morgan Vernay
parent
bb13de4176
commit
33d0fee43e
@@ -1,14 +1,26 @@
|
||||
import { Navbar } from "@/components/Navbar";
|
||||
import { CheckCircle2Icon } from "lucide-react";
|
||||
import { X } from "lucide-react";
|
||||
import { Inter } from "next/font/google";
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
import { useGetBooking, useCancelBooking } from "@calcom/atoms";
|
||||
import dayjs from "@calcom/dayjs";
|
||||
|
||||
const inter = Inter({ subsets: ["latin"] });
|
||||
|
||||
export default function Bookings(props: { calUsername: string; calEmail: string }) {
|
||||
const router = useRouter();
|
||||
|
||||
const { isLoading, data: booking, refetch } = useGetBooking((router.query.bookingUid as string) ?? "");
|
||||
const startTime = dayjs(booking?.startTime).format(12 === 12 ? "h:mma" : "HH:mm");
|
||||
const endTime = dayjs(booking?.endTime).format(12 === 12 ? "h:mma" : "HH:mm");
|
||||
const date = dayjs(booking?.startTime).toDate();
|
||||
const dateToday = dayjs(booking?.startTime).date();
|
||||
const year = dayjs(booking?.startTime).year();
|
||||
const day = dayjs(date).format("dddd");
|
||||
const month = dayjs(date).format("MMMM");
|
||||
|
||||
const { mutate: cancelBooking } = useCancelBooking({
|
||||
onSuccess: () => {
|
||||
refetch();
|
||||
@@ -20,41 +32,118 @@ export default function Bookings(props: { calUsername: string; calEmail: string
|
||||
<Navbar username={props.calUsername} />
|
||||
{isLoading && <p>Loading...</p>}
|
||||
{!isLoading && booking && (
|
||||
<div key={booking.id} className="my-2 w-[440px] overflow-hidden rounded p-2 shadow-md">
|
||||
<div className="px-6 py-4">
|
||||
<div className="text-md mb-0.5 font-semibold">
|
||||
<p>{booking.title}</p>
|
||||
<div
|
||||
key={booking.id}
|
||||
className="my-10 w-[440px] overflow-hidden rounded-md border-[0.7px] border-black px-10 py-5">
|
||||
{booking.status === "ACCEPTED" ? (
|
||||
<div className="mx-2 my-4 flex flex-col items-center justify-center text-center">
|
||||
<CheckCircle2Icon className="my-5 flex h-[40px] w-[40px] rounded-full bg-green-500" />
|
||||
<h1 className="text-xl font-bold">This meeting is scheduled</h1>
|
||||
<p>We sent an email with a calendar invitation with the details to everyone.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="mx-2 my-4 flex flex-col items-center justify-center text-center">
|
||||
<X className="my-5 flex h-[40px] w-[40px] rounded-full bg-red-400" />
|
||||
<h4 className="text-2xl font-bold">This event is cancelled</h4>
|
||||
</div>
|
||||
)}
|
||||
<hr className="mx-2 bg-black text-black" />
|
||||
<div className="mx-2 my-7 flex flex-col gap-y-3">
|
||||
<div className="flex gap-[70px]">
|
||||
<div>
|
||||
<h4>What</h4>
|
||||
</div>
|
||||
<div>
|
||||
<p>{booking.title}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-[70px]">
|
||||
<div>
|
||||
<h4>When</h4>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<p
|
||||
style={{
|
||||
textDecoration: booking.status === "ACCEPTED" ? "normal" : "line-through",
|
||||
}}>
|
||||
{`${day}, ${month} ${dateToday}, ${year}`}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p
|
||||
style={{
|
||||
textDecoration: booking.status === "ACCEPTED" ? "normal" : "line-through",
|
||||
}}>
|
||||
{`${startTime}`} - {`${endTime}`}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-[70px]">
|
||||
<div>Who</div>
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<h4>
|
||||
{booking.user.name}{" "}
|
||||
<span className="rounded-md bg-blue-800 px-2 text-sm text-white">Host</span>
|
||||
</h4>
|
||||
<p>{booking.user.email}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<h4>{`${booking.responses.name}`}</h4>
|
||||
<p>{`${booking.responses.email}`}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{booking.responses.notes && (
|
||||
<div className="flex gap-[70px]">
|
||||
<div className="w-[40px]">
|
||||
<h4>Additional notes</h4>
|
||||
</div>
|
||||
<div>
|
||||
<p>{`${booking.responses.notes}`}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="px-6 pb-2">
|
||||
<p>{booking.description}</p>
|
||||
<p>{booking.startTime}</p>
|
||||
<p>{booking.endTime}</p>
|
||||
<p>{booking.status}</p>
|
||||
</div>
|
||||
<div className="px-6">
|
||||
<button
|
||||
className="rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700"
|
||||
onClick={() => {
|
||||
cancelBooking({
|
||||
id: parseInt(booking.id),
|
||||
uid: booking.uid,
|
||||
cancellationReason: "User request",
|
||||
allRemainingBookings: true,
|
||||
});
|
||||
}}>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
className="ml-4 rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700"
|
||||
onClick={() => {
|
||||
router.push(
|
||||
`/booking?rescheduleUid=${booking?.uid}&eventTypeSlug=${booking?.eventType?.slug}`
|
||||
);
|
||||
}}>
|
||||
Reschedule
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{booking.status === "ACCEPTED" && (
|
||||
<>
|
||||
<hr className="mx-3" />
|
||||
<div className="mx-2 my-3 text-center">
|
||||
<p>
|
||||
Need to make a change?{" "}
|
||||
<button
|
||||
className="underline"
|
||||
onClick={() => {
|
||||
router.push(
|
||||
`/booking?rescheduleUid=${booking?.uid}&eventTypeSlug=${booking?.eventType?.slug}`
|
||||
);
|
||||
}}>
|
||||
Reschedule
|
||||
</button>{" "}
|
||||
or{" "}
|
||||
<button
|
||||
className="underline"
|
||||
onClick={() => {
|
||||
cancelBooking({
|
||||
id: parseInt(booking.id),
|
||||
uid: booking.uid,
|
||||
cancellationReason: "User request",
|
||||
allRemainingBookings: true,
|
||||
});
|
||||
}}>
|
||||
Cancel
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
|
||||
@@ -19,20 +19,29 @@ export default function Bookings(props: { calUsername: string; calEmail: string
|
||||
className={`flex min-h-screen flex-col ${inter.className} main text-default flex min-h-full w-full flex-col items-center overflow-visible`}>
|
||||
<Navbar username={props.calUsername} />
|
||||
<div>
|
||||
<h1 className="my-4 text-2xl font-semibold">{props.calUsername} Public Booking Page</h1>
|
||||
<h1 className="mx-10 my-4 text-2xl font-semibold">{props.calUsername} Public Booking Page</h1>
|
||||
|
||||
{isLoadingEvents && !eventTypeSlug && <p>Loading...</p>}
|
||||
|
||||
{!isLoadingEvents && !eventTypeSlug && Boolean(eventTypes?.length) && !rescheduleUid && (
|
||||
<div className="flex flex-row gap-4">
|
||||
{eventTypes?.map((event: { id: number; slug: string; title: string }) => (
|
||||
<button
|
||||
key={event.id}
|
||||
className="rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700"
|
||||
onClick={() => setEventTypeSlug(event.slug)}>
|
||||
{event.slug}
|
||||
</button>
|
||||
))}
|
||||
<div className="flex flex-col gap-4">
|
||||
{eventTypes?.map((event: { id: number; slug: string; title: string }) => {
|
||||
const formatEventSlug = event.slug
|
||||
.split("-")
|
||||
.map((item) => `${item[0].toLocaleUpperCase()}${item.slice(1)}`)
|
||||
.join(" ");
|
||||
|
||||
return (
|
||||
<div
|
||||
onClick={() => setEventTypeSlug(event.slug)}
|
||||
className="mx-10 w-[80vw] cursor-pointer rounded-md border-[0.8px] border-black px-10 py-4"
|
||||
key={event.id}>
|
||||
<h1 className="text-lg font-semibold">{formatEventSlug}</h1>
|
||||
<p>{`/${event.slug}`}</p>
|
||||
<span className="border-none bg-gray-800 px-2 text-white">{event?.length}</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
@@ -3,6 +3,7 @@ import { Inter } from "next/font/google";
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
import { useGetBookings } from "@calcom/atoms";
|
||||
import dayjs from "@calcom/dayjs";
|
||||
|
||||
const inter = Inter({ subsets: ["latin"] });
|
||||
|
||||
@@ -29,25 +30,45 @@ export default function Bookings(props: { calUsername: string; calEmail: string
|
||||
{isLoading && <p>Loading...</p>}
|
||||
{!isLoading &&
|
||||
(Boolean(upcomingBookings?.bookings.length) || Boolean(pastBookings?.bookings.length)) &&
|
||||
[...pastBookings?.bookings, ...upcomingBookings?.bookings].map((booking) => (
|
||||
<div
|
||||
key={booking.id}
|
||||
className="my-2 w-[440px] cursor-pointer overflow-hidden rounded shadow-md"
|
||||
onClick={() => {
|
||||
router.push(`/${booking.uid}`);
|
||||
}}>
|
||||
<div className="px-6 py-4">
|
||||
<div className="text-md mb-0.5 font-semibold">
|
||||
<p>{booking.title}</p>
|
||||
[...pastBookings?.bookings, ...upcomingBookings?.bookings].map((booking) => {
|
||||
const date = dayjs(booking.startTime).toDate();
|
||||
const startTime = dayjs(booking?.startTime).format(12 === 12 ? "h:mma" : "HH:mm");
|
||||
const endTime = dayjs(booking?.endTime).format(12 === 12 ? "h:mma" : "HH:mm");
|
||||
const day = dayjs(date).format("dddd");
|
||||
const month = dayjs(date).format("MMMM");
|
||||
|
||||
return (
|
||||
<div
|
||||
key={booking.id}
|
||||
className="mx-10 my-2 flex w-[80vw] cursor-pointer items-center justify-between overflow-hidden rounded border-[0.8px] border-black py-4"
|
||||
onClick={() => {
|
||||
router.push(`/${booking.uid}`);
|
||||
}}>
|
||||
<div>
|
||||
<div className="px-6">{`${day}, ${dayjs(booking.startTime).date()} ${month}`}</div>
|
||||
<div className="px-6">
|
||||
<p>
|
||||
{startTime} - {endTime}
|
||||
</p>{" "}
|
||||
<p />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="px-6">
|
||||
<div className="text-md mb-0.5 font-semibold">
|
||||
<p>{booking.title}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-6">
|
||||
<p>
|
||||
{booking.user.name} and {booking.attendees[0].name}
|
||||
</p>{" "}
|
||||
<p />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-6 pb-2">
|
||||
<p>{booking.startTime}</p>
|
||||
<p>{booking.endTime}</p>
|
||||
<p>{booking.status}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -13,7 +13,13 @@ export default function Calendars(props: { calUsername: string; calEmail: string
|
||||
<main className={`flex min-h-screen flex-col ${inter.className}`}>
|
||||
<Navbar username={props.calUsername} />
|
||||
<div className="p-4">
|
||||
<h1 className="my-4 text-lg font-bold">Your Connected Calendars</h1>
|
||||
{!!connectedCalendars?.length ? (
|
||||
<h1 className="my-4 text-lg font-bold">Your Connected Calendars</h1>
|
||||
) : (
|
||||
<h1 className="mx-10 my-4 text-xl font-bold">
|
||||
You have not connected any calendars yet, please connect your Google calendar.
|
||||
</h1>
|
||||
)}
|
||||
{isLoading ? (
|
||||
<div>Loading...</div>
|
||||
) : (
|
||||
@@ -29,7 +35,7 @@ export default function Calendars(props: { calUsername: string; calEmail: string
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
<hr className="my-4" />
|
||||
{!!connectedCalendars?.length && <hr className="my-4" />}
|
||||
{!isLoading && destinationCalendar.id && (
|
||||
<div className="">
|
||||
<h2 className="text-md font-bold">Destination Calendar: {destinationCalendar.name}</h2>
|
||||
|
||||
@@ -8,12 +8,12 @@ const poppins = Poppins({ subsets: ["latin"], weight: ["400", "800"] });
|
||||
|
||||
export default function Home(props: { calUsername: string; calEmail: string }) {
|
||||
return (
|
||||
<main className={`flex min-h-screen flex-col ${inter.className}`}>
|
||||
<main className={`flex min-h-screen flex-col ${inter.className} items-center justify-center`}>
|
||||
<Navbar username={props.calUsername} />
|
||||
<div
|
||||
className={`flex h-[80vh] w-full items-center justify-center gap-y-3 p-14 font-mono lg:flex ${inter.className}`}>
|
||||
<div>
|
||||
<h1 className={`${poppins.className} w-[70%] pb-3 text-8xl font-bold`}>
|
||||
className={` h-[100vh] w-full items-center justify-center gap-y-3 font-mono lg:flex ${inter.className} gap-16 `}>
|
||||
<div className="ml-32">
|
||||
<h1 className={`${poppins.className} w-[100%] pb-3 text-7xl font-bold`}>
|
||||
The all in one Scheduling marketplace
|
||||
</h1>
|
||||
<p className={`w-[70%] font-normal ${inter.className} pb-3 text-2xl`}>
|
||||
@@ -21,12 +21,13 @@ export default function Home(props: { calUsername: string; calEmail: string }) {
|
||||
</p>
|
||||
<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" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="hidden lg:block">
|
||||
<img
|
||||
width="700px"
|
||||
height="700px"
|
||||
width="76%"
|
||||
height="76%"
|
||||
className=" rounded-lg shadow-2xl"
|
||||
alt="cover image"
|
||||
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"
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user