public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

minor changes to booking page and navtabs (#832)

pull/831/head^2
Peer Richelsen 2021-09-30 20:59:34 +01:00 committed by GitHub
parent c80992aa1c
commit e33962686e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 49 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
components/BookingsShell.tsx
View File

@ -1,6 +1,8 @@
import React from "react";
import NavTabs from "./NavTabs";
export default function BookingsShell(props) {
export default function BookingsShell({ children }: { children: React.ReactNode }) {
const tabs = [
{
name: "Upcoming",
@ -17,12 +19,9 @@ export default function BookingsShell(props) {
];
return (
<div>
<div className="sm:mx-auto">
<NavTabs tabs={tabs} linkProps={{ shallow: true }} />
<hr />
</div>
<main className="max-w-4xl">{props.children}</main>
</div>
<>
<NavTabs tabs={tabs} linkProps={{ shallow: true }} />
<main>{children}</main>
</>
);
}

2
components/EmptyScreen.tsx
View File

@ -13,7 +13,7 @@ export default function EmptyScreen({
}) {
return (
<>
<div className="min-h-80 border border-dashed rounded-sm flex justify-center items-center flex-col">
<div className="min-h-80 border border-dashed rounded-sm flex justify-center items-center flex-col my-6">
<div className="bg-white w-[72px] h-[72px] flex justify-center items-center rounded-full">
<Icon className="inline-block w-10 h-10 bg-white" />
</div>

59
components/NavTabs.tsx
View File

@ -16,34 +16,37 @@ interface Props {
const NavTabs: FC<Props> = ({ tabs, linkProps }) => {
const router = useRouter();
return (
<nav className="-mb-px flex space-x-2 sm:space-x-8" aria-label="Tabs">
{tabs.map((tab) => {
const isCurrent = router.asPath === tab.href;
return (
<Link {...linkProps} key={tab.name} href={tab.href}>
<a
className={classNames(
isCurrent
? "border-neutral-900 text-neutral-900"
: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
"group inline-flex items-center py-4 px-1 border-b-2 font-medium text-sm"
)}
aria-current={isCurrent ? "page" : undefined}>
{tab.icon && (
<tab.icon
className={classNames(
isCurrent ? "text-neutral-900" : "text-gray-400 group-hover:text-gray-500",
"-ml-0.5 mr-2 h-5 w-5 hidden sm:inline-block"
)}
aria-hidden="true"
/>
)}
<span>{tab.name}</span>
</a>
</Link>
);
})}
</nav>
<>
<nav className="-mb-px flex space-x-2 sm:space-x-8" aria-label="Tabs">
{tabs.map((tab) => {
const isCurrent = router.asPath === tab.href;
return (
<Link {...linkProps} key={tab.name} href={tab.href}>
<a
className={classNames(
isCurrent
? "border-neutral-900 text-neutral-900"
: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
"group inline-flex items-center py-4 px-1 border-b-2 font-medium text-sm"
)}
aria-current={isCurrent ? "page" : undefined}>
{tab.icon && (
<tab.icon
className={classNames(
isCurrent ? "text-neutral-900" : "text-gray-400 group-hover:text-gray-500",
"-ml-0.5 mr-2 h-5 w-5 hidden sm:inline-block"
)}
aria-hidden="true"
/>
)}
<span>{tab.name}</span>
</a>
</Link>
);
})}
</nav>
<hr />
</>
);
};

10
components/SettingsShell.tsx
View File

@ -1,8 +1,9 @@
import { CodeIcon, CreditCardIcon, KeyIcon, UserGroupIcon, UserIcon } from "@heroicons/react/solid";
import React from "react";
import NavTabs from "./NavTabs";
export default function SettingsShell(props) {
export default function SettingsShell({ children }: { children: React.ReactNode }) {
const tabs = [
{
name: "Profile",
@ -28,12 +29,11 @@ export default function SettingsShell(props) {
];
return (
<div>
<>
<div className="sm:mx-auto">
<NavTabs tabs={tabs} />
<hr />
</div>
<main className="max-w-4xl">{props.children}</main>
</div>
<main className="max-w-4xl">{children}</main>
</>
);
}

4
components/Shell.tsx
View File

@ -176,7 +176,7 @@ export default function Shell(props: {
</div>
<div className="flex flex-col w-0 flex-1 overflow-hidden">
<main className="flex-1 relative z-0 overflow-y-auto focus:outline-none">
<main className="flex-1 relative z-0 overflow-y-auto focus:outline-none max-w-[1700px]">
{/* show top navigation for md and smaller (tablet and phones) */}
<nav className="md:hidden bg-white shadow p-4 flex justify-between items-center">
<Link href="/event-types">
@ -199,7 +199,7 @@ export default function Shell(props: {
</div>
</nav>
<div className="py-8">
<div className="block sm:flex justify-between px-4 sm:px-6 md:px-8">
<div className="block sm:flex justify-between px-4 sm:px-6 md:px-8 min-h-[80px]">
<div className="mb-8">
<h1 className="font-cal text-xl font-bold text-gray-900">{props.heading}</h1>
<p className="text-sm text-neutral-500 mr-4">{props.subtitle}</p>

8
components/booking/BookingListItem.tsx
View File

@ -73,17 +73,15 @@ function BookingListItem(booking: BookingItem) {
<tr>
<td className="hidden sm:table-cell px-6 py-4 whitespace-nowrap">
<div className="text-sm text-gray-900">{startTime}</div>
<div className="text-sm text-gray-500">
{dayjs(booking.startTime).format("HH:mm")} - {dayjs(booking.endTime).format("HH:mm")}
</div>
{!booking.confirmed && !booking.rejected && (
<span className="mb-2 inline-flex items-center px-1.5 py-0.5 rounded-sm text-xs font-medium bg-yellow-100 text-yellow-800">
Unconfirmed
</span>
)}
</td>
<td className="hidden sm:table-cell px-6 py-4 whitespace-nowrap">
<div className="text-sm text-gray-500">
{dayjs(booking.startTime).format("HH:mm")} - {dayjs(booking.endTime).format("HH:mm")}
</div>
</td>
<td className={"px-6 py-4" + (booking.rejected ? " line-through" : "")}>
<div className="sm:hidden">
{!booking.confirmed && !booking.rejected && (