mythic-insight/calcom
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 5

removed unused import

Browse source
This commit is contained in:
Peer Richelsen 2021-08-08 18:17:17 +02:00
parent 7699783c17
commit ded399e8f6
3 changed files with 67 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
components/ui/Button.tsx
View file

@ -1,15 +1,26 @@
import { useState } from 'react';
export default function Button(props) { export default function Button(props) {
return( return (
<button type="submit" className="btn btn-primary"> <button type="submit" className="btn btn-primary dark:btn-white">
{!props.loading && props.children} {!props.loading && props.children}
{props.loading && {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"> <svg
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle> className="animate-spin mx-4 h-5 w-5 text-white"
<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> 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> </svg>
} )}
</button> </button>
); );
} }

19
pages/[user].tsx
View file

@ -14,7 +14,7 @@ export default function User(props): User {
const eventTypes = props.eventTypes.map((type) => ( const eventTypes = props.eventTypes.map((type) => (
<div <div
key={type.id} 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" /> <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}`}> <Link href={`/${props.user.username}/${type.slug}`}>
<a className="block px-6 py-4"> <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="mt-2 flex space-x-4">
<div className="flex text-sm text-neutral-500"> <div className="flex text-sm text-neutral-500">
<ClockIcon <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" aria-hidden="true"
/> />
<p>{type.length}m</p> <p className="dark:text-white">{type.length}m</p>
</div> </div>
<div className="flex text-sm min-w-16 text-neutral-500"> <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" /> <UserIcon
<p>1-on-1</p> 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>
<div className="flex text-sm text-neutral-500"> <div className="flex text-sm text-neutral-500">
<InformationCircleIcon <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" aria-hidden="true"
/> />
<p>{type.description}</p> <p className="dark:text-white">{type.description}</p>
</div> </div>
</div> </div>
</a> </a>
@ -45,7 +48,7 @@ export default function User(props): User {
)); ));
return ( return (
isReady && ( isReady && (
<div className="bg-neutral-50 dark:bg-neutral-900 h-screen"> <div className="bg-neutral-50 dark:bg-black h-screen">
<Head> <Head>
<title>{props.user.name || props.user.username} | Calendso</title> <title>{props.user.name || props.user.username} | Calendso</title>
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />

74
pages/[user]/book.tsx
View file

@ -15,8 +15,8 @@ import Avatar from "../../components/Avatar";
import Button from "../../components/ui/Button"; import Button from "../../components/ui/Button";
import { EventTypeCustomInputType } from "../../lib/eventTypeInput"; import { EventTypeCustomInputType } from "../../lib/eventTypeInput";
import Theme from "@components/Theme"; import Theme from "@components/Theme";
import { ReactMultiEmail, isEmail } from 'react-multi-email'; import { ReactMultiEmail } from "react-multi-email";
import 'react-multi-email/style.css'; import "react-multi-email/style.css";
dayjs.extend(utc); dayjs.extend(utc);
dayjs.extend(timezone); dayjs.extend(timezone);
@ -161,9 +161,9 @@ export default function Book(props: any): JSX.Element {
</Head> </Head>
<main className="max-w-3xl mx-auto my-0 sm:my-24"> <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: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" /> <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> <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"> <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} {locationInfo(selectedLocation).address}
</p> </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" /> <CalendarIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
{preferredTimeZone && {preferredTimeZone &&
dayjs(date) dayjs(date)
@ -200,7 +200,7 @@ export default function Book(props: any): JSX.Element {
name="name" name="name"
id="name" id="name"
required 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" placeholder="John Doe"
defaultValue={props.booking ? props.booking.attendees[0].name : ""} defaultValue={props.booking ? props.booking.attendees[0].name : ""}
/> />
@ -218,7 +218,7 @@ export default function Book(props: any): JSX.Element {
name="email" name="email"
id="email" id="email"
required 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" placeholder="you@example.com"
defaultValue={props.booking ? props.booking.attendees[0].email : ""} defaultValue={props.booking ? props.booking.attendees[0].email : ""}
/> />
@ -260,7 +260,7 @@ export default function Book(props: any): JSX.Element {
placeholder="Enter phone number" placeholder="Enter phone number"
id="phone" id="phone"
required 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={() => { onChange={() => {
/* DO NOT REMOVE: Callback required by PhoneInput, comment added to satisfy eslint:no-empty-function */ /* 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} id={"custom_" + input.id}
required={input.required} required={input.required}
rows={3} 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="" placeholder=""
/> />
)} )}
@ -296,7 +296,7 @@ export default function Book(props: any): JSX.Element {
name={"custom_" + input.id} name={"custom_" + input.id}
id={"custom_" + input.id} id={"custom_" + input.id}
required={input.required} 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="" placeholder=""
/> />
)} )}
@ -306,7 +306,7 @@ export default function Book(props: any): JSX.Element {
name={"custom_" + input.id} name={"custom_" + input.id}
id={"custom_" + input.id} id={"custom_" + input.id}
required={input.required} 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="" placeholder=""
/> />
)} )}
@ -316,7 +316,7 @@ export default function Book(props: any): JSX.Element {
type="checkbox" type="checkbox"
name={"custom_" + input.id} name={"custom_" + input.id}
id={"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="" placeholder=""
/> />
<label <label
@ -329,28 +329,22 @@ export default function Book(props: any): JSX.Element {
</div> </div>
))} ))}
<div className="mb-4"> <div className="mb-4">
{!guestToggle && {!guestToggle && (
<label <label
onClick={toggleGuestEmailInput} onClick={toggleGuestEmailInput}
htmlFor="guests" 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 + Additional Guests
</label> </label>
)}
} {guestToggle && (
{ <ReactMultiEmail
guestToggle &&
<ReactMultiEmail
placeholder="Input your Email Address" placeholder="Input your Email Address"
emails={guestEmails} emails={guestEmails}
onChange={(_emails: string[]) => { onChange={(_emails: string[]) => {
setGuestEmails(_emails); setGuestEmails(_emails);
}} }}
getLabel={( getLabel={(email: string, index: number, removeEmail: (index: number) => void) => {
email: string,
index: number,
removeEmail: (index: number) => void
) => {
return ( return (
<div data-tag key={index}> <div data-tag key={index}>
{email} {email}
@ -360,10 +354,9 @@ export default function Book(props: any): JSX.Element {
</div> </div>
); );
}} }}
/> />
} )}
</div>
</div>
<div className="mb-4"> <div className="mb-4">
<label <label
htmlFor="notes" htmlFor="notes"
@ -374,13 +367,14 @@ export default function Book(props: any): JSX.Element {
name="notes" name="notes"
id="notes" id="notes"
rows={3} 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." placeholder="Please share anything that will help prepare for our meeting."
defaultValue={props.booking ? props.booking.description : ""} defaultValue={props.booking ? props.booking.description : ""}
/> />
</div> </div>
<div className="flex items-start"> <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"} {rescheduleUid ? "Reschedule" : "Confirm"}
</Button> </Button>
<Link <Link
@ -391,7 +385,7 @@ export default function Book(props: any): JSX.Element {
props.eventType.slug + props.eventType.slug +
(rescheduleUid ? "?rescheduleUid=" + rescheduleUid : "") (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> </Link>
</div> </div>
</form> </form>
@ -452,8 +446,12 @@ export async function getServerSideProps(context) {
}, },
}); });
const eventTypeObject = [eventType].map(e => { const eventTypeObject = [eventType].map((e) => {
return ({...e, periodStartDate:e.periodStartDate?.toString() ?? null, periodEndDate:e.periodEndDate?.toString() ?? null,}) return {
...e,
periodStartDate: e.periodStartDate?.toString() ?? null,
periodEndDate: e.periodEndDate?.toString() ?? null,
};
})[0]; })[0];
let booking = null; let booking = null;