removed unused import
This commit is contained in:
Peer Richelsen
parent
7699783c17
commit
ded399e8f6
3 changed files with 67 additions and 55 deletions
|
|
@ -1,15 +1,26 @@
|
|||
import { useState } from 'react';
|
||||
|
||||
export default function Button(props) {
|
||||
return(
|
||||
<button type="submit" className="btn btn-primary">
|
||||
return (
|
||||
<button type="submit" className="btn btn-primary dark:btn-white">
|
||||
{!props.loading && props.children}
|
||||
{props.loading &&
|
||||
<svg className="animate-spin mx-4 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
{props.loading && (
|
||||
<svg
|
||||
className="animate-spin mx-4 h-5 w-5 text-white"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24">
|
||||
<circle
|
||||
className="opacity-25"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="currentColor"
|
||||
strokeWidth="4"></circle>
|
||||
<path
|
||||
className="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
}
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ export default function User(props): User {
|
|||
const eventTypes = props.eventTypes.map((type) => (
|
||||
<div
|
||||
key={type.id}
|
||||
className="group relative dark:bg-neutral-800 dark:border-neutral-700 dark:hover:border-neutral-600 bg-white hover:bg-gray-50 border border-neutral-200 hover:border-black rounded-sm">
|
||||
className="group relative dark:bg-neutral-900 dark:border-0 dark:hover:border-neutral-600 bg-white hover:bg-gray-50 border border-neutral-200 hover:border-black rounded-sm">
|
||||
<ArrowRightIcon className="absolute transition-opacity h-4 w-4 right-3 top-3 text-black dark:text-white opacity-0 group-hover:opacity-100" />
|
||||
<Link href={`/${props.user.username}/${type.slug}`}>
|
||||
<a className="block px-6 py-4">
|
||||
|
|
@ -22,21 +22,24 @@ export default function User(props): User {
|
|||
<div className="mt-2 flex space-x-4">
|
||||
<div className="flex text-sm text-neutral-500">
|
||||
<ClockIcon
|
||||
className="flex-shrink-0 mt-0.5 mr-1.5 h-4 w-4 text-neutral-400"
|
||||
className="flex-shrink-0 mt-0.5 mr-1.5 h-4 w-4 text-neutral-400 dark:text-white"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<p>{type.length}m</p>
|
||||
<p className="dark:text-white">{type.length}m</p>
|
||||
</div>
|
||||
<div className="flex text-sm min-w-16 text-neutral-500">
|
||||
<UserIcon className="flex-shrink-0 mt-0.5 mr-1.5 h-4 w-4 text-neutral-400" aria-hidden="true" />
|
||||
<p>1-on-1</p>
|
||||
<UserIcon
|
||||
className="flex-shrink-0 mt-0.5 mr-1.5 h-4 w-4 text-neutral-400 dark:text-white"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<p className="dark:text-white">1-on-1</p>
|
||||
</div>
|
||||
<div className="flex text-sm text-neutral-500">
|
||||
<InformationCircleIcon
|
||||
className="flex-shrink-0 mt-0.5 mr-1.5 h-4 w-4 text-neutral-400"
|
||||
className="flex-shrink-0 mt-0.5 mr-1.5 h-4 w-4 text-neutral-400 dark:text-white"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<p>{type.description}</p>
|
||||
<p className="dark:text-white">{type.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
|
@ -45,7 +48,7 @@ export default function User(props): User {
|
|||
));
|
||||
return (
|
||||
isReady && (
|
||||
<div className="bg-neutral-50 dark:bg-neutral-900 h-screen">
|
||||
<div className="bg-neutral-50 dark:bg-black h-screen">
|
||||
<Head>
|
||||
<title>{props.user.name || props.user.username} | Calendso</title>
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
|
|
|
|||
|
|
@ -15,8 +15,8 @@ import Avatar from "../../components/Avatar";
|
|||
import Button from "../../components/ui/Button";
|
||||
import { EventTypeCustomInputType } from "../../lib/eventTypeInput";
|
||||
import Theme from "@components/Theme";
|
||||
import { ReactMultiEmail, isEmail } from 'react-multi-email';
|
||||
import 'react-multi-email/style.css';
|
||||
import { ReactMultiEmail } from "react-multi-email";
|
||||
import "react-multi-email/style.css";
|
||||
|
||||
dayjs.extend(utc);
|
||||
dayjs.extend(timezone);
|
||||
|
|
@ -161,9 +161,9 @@ export default function Book(props: any): JSX.Element {
|
|||
</Head>
|
||||
|
||||
<main className="max-w-3xl mx-auto my-0 sm:my-24">
|
||||
<div className="dark:bg-gray-800 bg-white overflow-hidden sm:shadow sm:rounded-lg">
|
||||
<div className="dark:bg-neutral-900 bg-white overflow-hidden border border-gray-200 dark:border-0 sm:rounded-sm">
|
||||
<div className="sm:flex px-4 py-5 sm:p-4">
|
||||
<div className="sm:w-1/2 sm:border-r sm:dark:border-gray-900">
|
||||
<div className="sm:w-1/2 sm:border-r sm:dark:border-black">
|
||||
<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>
|
||||
<h1 className="text-3xl font-semibold dark:text-white text-gray-800 mb-4">
|
||||
|
|
@ -179,7 +179,7 @@ export default function Book(props: any): JSX.Element {
|
|||
{locationInfo(selectedLocation).address}
|
||||
</p>
|
||||
)}
|
||||
<p className="text-blue-600 mb-4">
|
||||
<p className="text-green-500 mb-4">
|
||||
<CalendarIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
|
||||
{preferredTimeZone &&
|
||||
dayjs(date)
|
||||
|
|
@ -200,7 +200,7 @@ export default function Book(props: any): JSX.Element {
|
|||
name="name"
|
||||
id="name"
|
||||
required
|
||||
className="shadow-sm dark:bg-gray-700 dark:text-white dark:border-gray-900 focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md"
|
||||
className="shadow-sm dark:bg-black dark:text-white dark:border-gray-900 focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md"
|
||||
placeholder="John Doe"
|
||||
defaultValue={props.booking ? props.booking.attendees[0].name : ""}
|
||||
/>
|
||||
|
|
@ -218,7 +218,7 @@ export default function Book(props: any): JSX.Element {
|
|||
name="email"
|
||||
id="email"
|
||||
required
|
||||
className="shadow-sm dark:bg-gray-700 dark:text-white dark:border-gray-900 focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md"
|
||||
className="shadow-sm dark:bg-black dark:text-white dark:border-gray-900 focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md"
|
||||
placeholder="you@example.com"
|
||||
defaultValue={props.booking ? props.booking.attendees[0].email : ""}
|
||||
/>
|
||||
|
|
@ -260,7 +260,7 @@ export default function Book(props: any): JSX.Element {
|
|||
placeholder="Enter phone number"
|
||||
id="phone"
|
||||
required
|
||||
className="shadow-sm dark:bg-gray-700 dark:text-white dark:border-gray-900 focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md"
|
||||
className="shadow-sm dark:bg-black dark:text-white dark:border-gray-900 focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md"
|
||||
onChange={() => {
|
||||
/* DO NOT REMOVE: Callback required by PhoneInput, comment added to satisfy eslint:no-empty-function */
|
||||
}}
|
||||
|
|
@ -286,7 +286,7 @@ export default function Book(props: any): JSX.Element {
|
|||
id={"custom_" + input.id}
|
||||
required={input.required}
|
||||
rows={3}
|
||||
className="shadow-sm dark:bg-gray-700 dark:text-white dark:border-gray-900 focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md"
|
||||
className="shadow-sm dark:bg-black dark:text-white dark:border-gray-900 focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md"
|
||||
placeholder=""
|
||||
/>
|
||||
)}
|
||||
|
|
@ -296,7 +296,7 @@ export default function Book(props: any): JSX.Element {
|
|||
name={"custom_" + input.id}
|
||||
id={"custom_" + input.id}
|
||||
required={input.required}
|
||||
className="shadow-sm dark:bg-gray-700 dark:text-white dark:border-gray-900 focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md"
|
||||
className="shadow-sm dark:bg-black dark:text-white dark:border-gray-900 focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md"
|
||||
placeholder=""
|
||||
/>
|
||||
)}
|
||||
|
|
@ -306,7 +306,7 @@ export default function Book(props: any): JSX.Element {
|
|||
name={"custom_" + input.id}
|
||||
id={"custom_" + input.id}
|
||||
required={input.required}
|
||||
className="shadow-sm dark:bg-gray-700 dark:text-white dark:border-gray-900 focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md"
|
||||
className="shadow-sm dark:bg-black dark:text-white dark:border-gray-900 focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md"
|
||||
placeholder=""
|
||||
/>
|
||||
)}
|
||||
|
|
@ -316,7 +316,7 @@ export default function Book(props: any): JSX.Element {
|
|||
type="checkbox"
|
||||
name={"custom_" + input.id}
|
||||
id={"custom_" + input.id}
|
||||
className="focus:ring-black h-4 w-4 text-blue-600 border-gray-300 rounded mr-2"
|
||||
className="focus:ring-black h-4 w-4 text-black border-gray-300 rounded mr-2"
|
||||
placeholder=""
|
||||
/>
|
||||
<label
|
||||
|
|
@ -329,28 +329,22 @@ export default function Book(props: any): JSX.Element {
|
|||
</div>
|
||||
))}
|
||||
<div className="mb-4">
|
||||
{!guestToggle &&
|
||||
{!guestToggle && (
|
||||
<label
|
||||
onClick={toggleGuestEmailInput}
|
||||
htmlFor="guests"
|
||||
className="block text-sm font-medium dark:text-white text-blue-500 mb-1 hover:cursor-pointer">
|
||||
className="block text-sm font-medium text-blue-500 mb-1 hover:cursor-pointer">
|
||||
+ Additional Guests
|
||||
</label>
|
||||
|
||||
}
|
||||
{
|
||||
guestToggle &&
|
||||
)}
|
||||
{guestToggle && (
|
||||
<ReactMultiEmail
|
||||
placeholder="Input your Email Address"
|
||||
emails={guestEmails}
|
||||
onChange={(_emails: string[]) => {
|
||||
setGuestEmails(_emails);
|
||||
}}
|
||||
getLabel={(
|
||||
email: string,
|
||||
index: number,
|
||||
removeEmail: (index: number) => void
|
||||
) => {
|
||||
getLabel={(email: string, index: number, removeEmail: (index: number) => void) => {
|
||||
return (
|
||||
<div data-tag key={index}>
|
||||
{email}
|
||||
|
|
@ -361,8 +355,7 @@ export default function Book(props: any): JSX.Element {
|
|||
);
|
||||
}}
|
||||
/>
|
||||
}
|
||||
|
||||
)}
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
<label
|
||||
|
|
@ -374,13 +367,14 @@ export default function Book(props: any): JSX.Element {
|
|||
name="notes"
|
||||
id="notes"
|
||||
rows={3}
|
||||
className="shadow-sm dark:bg-gray-700 dark:text-white dark:border-gray-900 focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md"
|
||||
className="shadow-sm dark:bg-black dark:text-white dark:border-gray-900 focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md"
|
||||
placeholder="Please share anything that will help prepare for our meeting."
|
||||
defaultValue={props.booking ? props.booking.description : ""}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-start">
|
||||
<Button type="submit" loading={loading} className="btn btn-primary">
|
||||
{/* TODO: add styling props to <Button variant="" color="" /> and get rid of btn-primary */}
|
||||
<Button type="submit" loading={loading}>
|
||||
{rescheduleUid ? "Reschedule" : "Confirm"}
|
||||
</Button>
|
||||
<Link
|
||||
|
|
@ -391,7 +385,7 @@ export default function Book(props: any): JSX.Element {
|
|||
props.eventType.slug +
|
||||
(rescheduleUid ? "?rescheduleUid=" + rescheduleUid : "")
|
||||
}>
|
||||
<a className="ml-2 btn btn-white">Cancel</a>
|
||||
<a className="ml-2 text-sm dark:text-white p-2">Cancel</a>
|
||||
</Link>
|
||||
</div>
|
||||
</form>
|
||||
|
|
@ -452,8 +446,12 @@ export async function getServerSideProps(context) {
|
|||
},
|
||||
});
|
||||
|
||||
const eventTypeObject = [eventType].map(e => {
|
||||
return ({...e, periodStartDate:e.periodStartDate?.toString() ?? null, periodEndDate:e.periodEndDate?.toString() ?? null,})
|
||||
const eventTypeObject = [eventType].map((e) => {
|
||||
return {
|
||||
...e,
|
||||
periodStartDate: e.periodStartDate?.toString() ?? null,
|
||||
periodEndDate: e.periodEndDate?.toString() ?? null,
|
||||
};
|
||||
})[0];
|
||||
|
||||
let booking = null;
|
||||
|
|
|
|||
Loading…
Reference in a new issue