fix calendar style and resolve some TS lint errors
This commit is contained in:
parent
75394eed7e
commit
e036e9b216
3 changed files with 719 additions and 585 deletions
|
@ -3,13 +3,13 @@ import Head from 'next/head';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import prisma from '../../lib/prisma';
|
import prisma from '../../lib/prisma';
|
||||||
import { useRouter } from 'next/router';
|
import { useRouter } from 'next/router';
|
||||||
const dayjs = require('dayjs');
|
import dayjs, { Dayjs } from 'dayjs';
|
||||||
import { Switch } from '@headlessui/react';
|
import { Switch } from '@headlessui/react';
|
||||||
import { ClockIcon, GlobeIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/solid';
|
import { ClockIcon, GlobeIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/solid';
|
||||||
const isSameOrBefore = require('dayjs/plugin/isSameOrBefore');
|
import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
|
||||||
const isBetween = require('dayjs/plugin/isBetween');
|
import isBetween from 'dayjs/plugin/isBetween';
|
||||||
const utc = require('dayjs/plugin/utc');
|
import utc from 'dayjs/plugin/utc';
|
||||||
const timezone = require('dayjs/plugin/timezone');
|
import timezone from 'dayjs/plugin/timezone';
|
||||||
dayjs.extend(isSameOrBefore);
|
dayjs.extend(isSameOrBefore);
|
||||||
dayjs.extend(isBetween);
|
dayjs.extend(isBetween);
|
||||||
dayjs.extend(utc);
|
dayjs.extend(utc);
|
||||||
|
@ -23,7 +23,7 @@ function classNames(...classes) {
|
||||||
|
|
||||||
export default function Type(props) {
|
export default function Type(props) {
|
||||||
// Initialise state
|
// Initialise state
|
||||||
const [selectedDate, setSelectedDate] = useState('');
|
const [selectedDate, setSelectedDate] = useState<Dayjs>();
|
||||||
const [selectedMonth, setSelectedMonth] = useState(dayjs().month());
|
const [selectedMonth, setSelectedMonth] = useState(dayjs().month());
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
const [isTimeOptionsOpen, setIsTimeOptionsOpen] = useState(false);
|
const [isTimeOptionsOpen, setIsTimeOptionsOpen] = useState(false);
|
||||||
|
@ -78,7 +78,7 @@ export default function Type(props) {
|
||||||
|
|
||||||
// Combine placeholder days with actual days
|
// Combine placeholder days with actual days
|
||||||
const calendar = [...emptyDays, ...days.map((day) =>
|
const calendar = [...emptyDays, ...days.map((day) =>
|
||||||
<button key={day} onClick={(e) => setSelectedDate(dayjs().tz(dayjs.tz.guess()).month(selectedMonth).date(day))} disabled={selectedMonth < dayjs().format('MM') && dayjs().month(selectedMonth).format("D") > day} className={"text-center w-10 h-10 rounded-full mx-auto " + (dayjs().isSameOrBefore(dayjs().date(day).month(selectedMonth)) ? 'bg-blue-50 text-blue-600 font-medium' : 'text-gray-400 font-light') + (dayjs(selectedDate).month(selectedMonth).format("D") == day ? ' bg-blue-600 text-white-important' : '')}>
|
<button key={day} onClick={(e) => setSelectedDate(dayjs().tz(dayjs.tz.guess()).month(selectedMonth).date(day))} disabled={selectedMonth < parseInt(dayjs().format('MM')) && dayjs().month(selectedMonth).format("D") > day} className={"text-center w-10 h-10 rounded-full mx-auto " + (dayjs().isSameOrBefore(dayjs().date(day).month(selectedMonth)) ? 'bg-blue-50 text-blue-600 font-medium' : 'text-gray-400 font-light') + (dayjs(selectedDate).month(selectedMonth).format("D") == day ? ' bg-blue-600 text-white-important' : '')}>
|
||||||
{day}
|
{day}
|
||||||
</button>
|
</button>
|
||||||
)];
|
)];
|
||||||
|
@ -144,7 +144,7 @@ export default function Type(props) {
|
||||||
</Head>
|
</Head>
|
||||||
|
|
||||||
<main className={"mx-auto my-24 transition-max-width ease-in-out duration-500 " + (selectedDate ? 'max-w-6xl' : 'max-w-3xl')}>
|
<main className={"mx-auto my-24 transition-max-width ease-in-out duration-500 " + (selectedDate ? 'max-w-6xl' : 'max-w-3xl')}>
|
||||||
<div className="bg-white overflow-hidden shadow rounded-lg md:max-h-96">
|
<div className="bg-white shadow rounded-lg">
|
||||||
<div className="sm:flex px-4 py-5 sm:p-4">
|
<div className="sm:flex px-4 py-5 sm:p-4">
|
||||||
<div className={"pr-8 sm:border-r " + (selectedDate ? 'sm:w-1/3' : 'sm:w-1/2')}>
|
<div className={"pr-8 sm:border-r " + (selectedDate ? 'sm:w-1/3' : 'sm:w-1/2')}>
|
||||||
{props.user.avatar && <img src={props.user.avatar} alt="Avatar" className="w-16 h-16 rounded-full mb-4"/>}
|
{props.user.avatar && <img src={props.user.avatar} alt="Avatar" className="w-16 h-16 rounded-full mb-4"/>}
|
||||||
|
@ -193,7 +193,7 @@ export default function Type(props) {
|
||||||
<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 ml-2">
|
||||||
<span className="w-1/2">{dayjs().month(selectedMonth).format("MMMM YYYY")}</span>
|
<span className="w-1/2">{dayjs().month(selectedMonth).format("MMMM YYYY")}</span>
|
||||||
<div className="w-1/2 text-right">
|
<div className="w-1/2 text-right">
|
||||||
<button onClick={decrementMonth} className={"mr-4 " + (selectedMonth < dayjs().format('MM') && 'text-gray-400')} disabled={selectedMonth < dayjs().format('MM')}>
|
<button onClick={decrementMonth} className={"mr-4 " + (selectedMonth < parseInt(dayjs().format('MM')) && 'text-gray-400')} disabled={selectedMonth < parseInt(dayjs().format('MM'))}>
|
||||||
<ChevronLeftIcon className="w-5 h-5" />
|
<ChevronLeftIcon className="w-5 h-5" />
|
||||||
</button>
|
</button>
|
||||||
<button onClick={incrementMonth}>
|
<button onClick={incrementMonth}>
|
||||||
|
@ -212,7 +212,7 @@ export default function Type(props) {
|
||||||
{calendar}
|
{calendar}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{selectedDate && <div className="sm:pl-4 mt-8 sm:mt-0 text-center sm:w-1/3 md:max-h-96 overflow-y-scroll">
|
{selectedDate && <div className="sm:pl-4 mt-8 sm:mt-0 text-center sm:w-1/3 md:max-h-97 overflow-y-auto">
|
||||||
<div className="text-gray-600 font-light text-xl mb-4 text-left">
|
<div className="text-gray-600 font-light text-xl mb-4 text-left">
|
||||||
<span className="w-1/2">{dayjs(selectedDate).format("dddd DD MMMM YYYY")}</span>
|
<span className="w-1/2">{dayjs(selectedDate).format("dddd DD MMMM YYYY")}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -26,7 +26,10 @@ module.exports = {
|
||||||
800: '#0277bd',
|
800: '#0277bd',
|
||||||
900: '#01579b',
|
900: '#01579b',
|
||||||
},
|
},
|
||||||
}
|
},
|
||||||
|
maxHeight: {
|
||||||
|
97: '25rem',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
variants: {
|
variants: {
|
||||||
|
|
Loading…
Reference in a new issue