maronato/cal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed some minor bugs that caused console errors, changed a>li to li>a to accomodate best practises

This commit is contained in:
Alex van Andel 2021-04-09 15:33:49 +00:00
parent 781060e5c6
commit e414a178d6
2 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
pages/[user].tsx
View File

@ -4,15 +4,15 @@ import prisma from '../lib/prisma'
export default function User(props) {
const eventTypes = props.user.eventTypes.map(type =>
<Link href={props.user.username + '/' + type.id.toString()}>
<a>
<li key={type.id} className="px-6 py-4">
<li key={type.id}>
<Link href={'/' + props.user.username + '/' + type.id.toString()}>
<a className="block px-6 py-4">
<div className="inline-block w-3 h-3 rounded-full bg-blue-600 mr-2"></div>
<h2 className="inline-block font-medium">{type.title}</h2>
<p className="inline-block text-gray-400 ml-2">{type.description}</p>
</li>
</a>
</Link>
</a>
</Link>
</li>
);
return (
<div>

8
pages/[user]/[type].tsx
View File

@ -35,7 +35,7 @@ export default function Type(props) {
}
const calendar = days.map((day) =>
<button onClick={(e) => setSelectedDate(dayjs().month(selectedMonth).date(day).format("YYYY-MM-DD"))} 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().month(selectedMonth).date(day).format("YYYY-MM-DD"))} 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' : '')}>
{day}
</button>
);
@ -84,7 +84,7 @@ export default function Type(props) {
// Display available times
const availableTimes = times.map((time) =>
<div>
<div key={time}>
<Link href={"/" + props.user.username + "/book?date=" + selectedDate + "T" + dayjs(time).format("HH:mm:ss") + "Z&type=" + props.eventType.id}>
<a key={time} className="block font-medium mb-4 text-blue-600 border border-blue-600 rounded hover:text-white hover:bg-blue-600 py-4">{dayjs(time).format("hh:mma")}</a>
</Link>
@ -133,12 +133,12 @@ export default function Type(props) {
{calendar}
</div>
</div>
<div className={"sm:pl-4 mt-8 sm:mt-0 text-center " + (selectedDate ? 'sm:w-1/3' : 'sm:w-1/2 hidden')}>
{selectedDate && <div className="sm:pl-4 mt-8 sm:mt-0 text-center sm:w-1/3">
<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>
</div>
{!loading ? availableTimes : <div className="loader"></div>}
</div>
</div>}
</div>
</div>
</main>