another booking page design revision
This commit is contained in:
Peer Richelsen
parent
b5cd38b77a
commit
655b2b18e8
3 changed files with 68 additions and 28 deletions
|
|
@ -147,14 +147,14 @@ const DatePicker = ({
|
|||
onClick={() => setSelectedDate(inviteeDate.date(day))}
|
||||
disabled={isDisabled(day)}
|
||||
className={
|
||||
"text-center w-10 h-10 mx-auto hover:border hover:border-black dark:hover:border-white" +
|
||||
"text-center w-14 h-14 mx-auto hover:border hover:border-black dark:hover:border-white" +
|
||||
(isDisabled(day)
|
||||
? " text-gray-400 font-light hover:border-0 cursor-default"
|
||||
: " dark:text-white text-primary-500 font-medium") +
|
||||
(selectedDate && selectedDate.isSame(inviteeDate.date(day), "day")
|
||||
? " bg-black text-white-important"
|
||||
: !isDisabled(day)
|
||||
? " bg-gray-100 dark:bg-black dark:bg-opacity-30"
|
||||
? " bg-gray-100 dark:bg-gray-600"
|
||||
: "")
|
||||
}>
|
||||
{day}
|
||||
|
|
@ -166,12 +166,12 @@ const DatePicker = ({
|
|||
return selectedMonth ? (
|
||||
<div
|
||||
className={
|
||||
"mt-8 sm:mt-0 min-w-[350px] " +
|
||||
"mt-8 sm:mt-0 sm:min-w-[430px]" +
|
||||
(selectedDate
|
||||
? "w-full sm:w-1/2 md:w-1/3 sm:border-r sm:dark:border-black sm:pl-4 sm:pr-6"
|
||||
? "w-full sm:min-w-[455px] sm:w-1/2 md:w-1/3 sm:border-r sm:dark:border-gray-800 sm:pl-4 sm:pr-4"
|
||||
: "sm:w-1/2 sm:pl-4")
|
||||
}>
|
||||
<div className="flex text-gray-600 font-light text-xl mb-4 ml-2">
|
||||
<div className="flex text-gray-600 font-light text-xl mb-4">
|
||||
<span className="w-1/2 text-gray-600 dark:text-white">
|
||||
<strong className="text-gray-900 dark:text-white">
|
||||
{dayjs().month(selectedMonth).format("MMMM")}
|
||||
|
|
@ -193,11 +193,11 @@ const DatePicker = ({
|
|||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-7 gap-4 text-center">
|
||||
<div className="grid grid-cols-7 gap-2 sm:gap-1 text-center">
|
||||
{["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
|
||||
.sort((a, b) => (weekStart.startsWith(a) ? -1 : weekStart.startsWith(b) ? 1 : 0))
|
||||
.map((weekDay) => (
|
||||
<div key={weekDay} className="uppercase text-gray-400 text-xs tracking-widest">
|
||||
<div key={weekDay} className="uppercase text-gray-500 text-xs tracking-widest my-2">
|
||||
{weekDay}
|
||||
</div>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -128,14 +128,33 @@ export default function Type(props): Type {
|
|||
</Head>
|
||||
<main
|
||||
className={
|
||||
"mx-auto my-0 sm:my-24 transition-max-width ease-in-out duration-500 " +
|
||||
"mx-auto my-0 md:my-24 transition-max-width ease-in-out duration-500 " +
|
||||
(selectedDate ? "max-w-5xl" : "max-w-3xl")
|
||||
}>
|
||||
<div className="dark:bg-neutral-900 bg-white border border-gray-200 rounded-sm dark:border-0">
|
||||
<div className="sm:flex px-4 py-5 sm:p-4">
|
||||
<div className="sm:dark:border-gray-600 dark:bg-gray-900 bg-white md:border border-gray-200 rounded-sm">
|
||||
{/* mobile: details */}
|
||||
<div className="p-4 sm:p-8 block md:hidden">
|
||||
<div className="flex items-center">
|
||||
<Avatar user={props.user} className="inline-block h-9 w-9 rounded-full" />
|
||||
<div className="ml-3">
|
||||
<p className="text-sm font-medium dark:text-gray-300 text-black">{props.user.name}</p>
|
||||
<div className="flex gap-2 text-xs font-medium text-gray-600">
|
||||
{props.eventType.title}
|
||||
<div>
|
||||
<ClockIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
|
||||
{props.eventType.length} minutes
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="dark:text-gray-200 text-gray-600 mt-3">{props.eventType.description}</p>
|
||||
</div>
|
||||
|
||||
<div className="sm:flex px-4 sm:py-5 sm:p-4">
|
||||
<div
|
||||
className={
|
||||
"pr-8 sm:border-r sm:dark:border-black " + (selectedDate ? "sm:w-1/3" : "sm:w-1/2")
|
||||
"hidden md:block pr-8 sm:border-r sm:dark:border-gray-800 " +
|
||||
(selectedDate ? "sm:w-1/3" : "sm:w-1/2")
|
||||
}>
|
||||
<Avatar user={props.user} className="w-16 h-16 rounded-full mb-4" />
|
||||
<h2 className="font-medium dark:text-gray-300 text-gray-500">{props.user.name}</h2>
|
||||
|
|
@ -147,23 +166,7 @@ export default function Type(props): Type {
|
|||
{props.eventType.length} minutes
|
||||
</p>
|
||||
|
||||
<Collapsible.Root open={isTimeOptionsOpen} onOpenChange={setIsTimeOptionsOpen}>
|
||||
<Collapsible.Trigger className="text-gray-500 mb-1 px-2 py-1 -ml-2 text-left min-w-32 ">
|
||||
<GlobeIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
|
||||
{timeZone()}
|
||||
{isTimeOptionsOpen ? (
|
||||
<ChevronUpIcon className="inline-block w-4 h-4 ml-1 -mt-1" />
|
||||
) : (
|
||||
<ChevronDownIcon className="inline-block w-4 h-4 ml-1 -mt-1" />
|
||||
)}
|
||||
</Collapsible.Trigger>
|
||||
<Collapsible.Content>
|
||||
<TimeOptions
|
||||
onSelectTimeZone={handleSelectTimeZone}
|
||||
onToggle24hClock={handleToggle24hClock}
|
||||
/>
|
||||
</Collapsible.Content>
|
||||
</Collapsible.Root>
|
||||
<TimezoneDropdown />
|
||||
|
||||
<p className="dark:text-gray-200 text-gray-600 mt-3 mb-8">{props.eventType.description}</p>
|
||||
</div>
|
||||
|
|
@ -182,6 +185,11 @@ export default function Type(props): Type {
|
|||
eventLength={props.eventType.length}
|
||||
minimumBookingNotice={props.eventType.minimumBookingNotice}
|
||||
/>
|
||||
|
||||
<div className="ml-1 mt-4 block sm:hidden">
|
||||
<TimezoneDropdown />
|
||||
</div>
|
||||
|
||||
{selectedDate && (
|
||||
<AvailableTimes
|
||||
workingHours={props.workingHours}
|
||||
|
|
@ -201,6 +209,25 @@ export default function Type(props): Type {
|
|||
</div>
|
||||
)
|
||||
);
|
||||
|
||||
function TimezoneDropdown() {
|
||||
return (
|
||||
<Collapsible.Root open={isTimeOptionsOpen} onOpenChange={setIsTimeOptionsOpen}>
|
||||
<Collapsible.Trigger className="text-gray-500 mb-1 px-2 py-1 -ml-2 text-left min-w-32">
|
||||
<GlobeIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
|
||||
{timeZone()}
|
||||
{isTimeOptionsOpen ? (
|
||||
<ChevronUpIcon className="inline-block w-4 h-4 ml-1 -mt-1" />
|
||||
) : (
|
||||
<ChevronDownIcon className="inline-block w-4 h-4 ml-1 -mt-1" />
|
||||
)}
|
||||
</Collapsible.Trigger>
|
||||
<Collapsible.Content>
|
||||
<TimeOptions onSelectTimeZone={handleSelectTimeZone} onToggle24hClock={handleToggle24hClock} />
|
||||
</Collapsible.Content>
|
||||
</Collapsible.Root>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export const getServerSideProps: GetServerSideProps = async (context: GetServerSidePropsContext) => {
|
||||
|
|
|
|||
|
|
@ -5,6 +5,19 @@ module.exports = {
|
|||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
black: "#111111",
|
||||
gray: {
|
||||
50: "#F8F8F8",
|
||||
100: "#F5F5F5",
|
||||
200: "#E1E1E1",
|
||||
300: "#CFCFCF",
|
||||
400: "#ACACAC",
|
||||
500: "#888888",
|
||||
600: "#494949",
|
||||
700: "#3E3E3E",
|
||||
800: "#313131",
|
||||
900: "#292929",
|
||||
},
|
||||
neutral: {
|
||||
50: "#F7F8F9",
|
||||
100: "#F4F5F6",
|
||||
|
|
|
|||
Loading…
Reference in a new issue