This is a T3 Stack project bootstrapped with create-t3-app.
We try to keep this project as simple as possible, so you can start with just the scaffolding we set up for you, and add additional things later when they become necessary.
If you are not familiar with the different technologies used in this project, please refer to the respective docs. If you still are in the wind, please join our Discord and ask for help.
To learn more about the T3 Stack, take a look at the following resources:
- Documentation
- Learn the T3 Stack — Check out these awesome tutorials
You can check out the create-t3-app GitHub repository — your feedback and contributions are welcome!
Follow our deployment guides for Vercel, Netlify and Docker for more information.
This is a full-stack booking software for a restaurant, built in NextJS, tRPC, Prisma, and TailwindCSS. This project originates from a video series on YouTube
- Add a way for an admin to delete a booking on customer request
- Add a way for an admin to edit a booking on customer request
- Implement a proper backend check regarding booking time validity (currently mocked)
- CSS / UI improvements
- Option to book for "immidiately" (current time)
- Prevent Admin from opening later than they are closing (currently possible)
s3://client-adam-swimcoach/image/Coaching.png
return ( <Listbox value={selected} onChange={(e) => { // remove the 0 in front of the hour if hour is 0-9 if (type === 'openTime') e = e?.replace(/^0/, '')
changeTime(e, type)
}}
>
{({ open }) => (
<>
<Listbox.Label className='block w-32 text-center text-sm font-medium text-blue-700'>
{type === 'openTime' ? 'Opening time' : 'Closing time'}
</Listbox.Label>
<div className='relative mt-1'>
<Listbox.Button className='relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-3 text-left shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm'>
<div className='flex items-center'>
<span
aria-label={true ? 'Online' : 'Offline'}
className={classNames(
true ? 'bg-green-400' : 'bg-gray-200',
'inline-block h-2 w-2 flex-shrink-0 rounded-full'
)}
/>
<span className='ml-3 block truncate'>{selected}</span>
</div>
<span className='pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2'>
<HiSelector className='h-5 w-5 text-gray-400' aria-hidden='true' />
</span>
</Listbox.Button>
<Transition
show={open}
as={Fragment}
leave='transition ease-in duration-100'
leaveFrom='opacity-100'
leaveTo='opacity-0'
>
<Listbox.Options className='absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm'>
{timeOptions.map((time) => {
return (
<Listbox.Option
key={time}
className={({ active }) =>
classNames(
active ? 'bg-green-600 text-white' : 'text-gray-900',
'relative cursor-default select-none py-2 pl-3 pr-9'
)
}
value={time}
>
{({ selected: selectedOption, active }) => (
<>
<div className='flex items-center'>
<span
className={classNames(
time === selected ? 'bg-green-500' : 'bg-blue-800',
'inline-block h-2 w-2 flex-shrink-0 rounded-full'
)}
aria-hidden='true'
/>
<span
className={classNames(
selected ? 'font-semibold' : 'font-normal',
'ml-3 block truncate'
)}
>
{time}
<span className='sr-only'> is {true ? 'online' : 'offline'}</span>
</span>
</div>
{selectedOption ? (
<span
className={classNames(
active ? 'text-white' : 'text-indigo-600',
'absolute inset-y-0 right-0 flex items-center pr-4'
)}
>
<HiCheck className='h-5 w-5' aria-hidden='true' />
</span>
) : null}
</>
)}
</Listbox.Option>
)
})}
</Listbox.Options>
</Transition>
</div>
</>
)}
</Listbox>
) }
export default TimeSelector