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

Add more empty states

This commit is contained in:
Bailey Pumfleet 2021-03-31 21:10:53 +01:00
parent 38cbb42b2c
commit 443febac8d
6 changed files with 21 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/Shell.tsx
View File

@ -56,7 +56,7 @@ export default function Shell(props) {
<div>
<button onClick={toggleProfileDropdown} type="button" className="max-w-xs bg-gray-800 rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" id="user-menu" aria-expanded="false" aria-haspopup="true">
<span className="sr-only">Open user menu</span>
<img className="h-8 w-8 rounded-full" src={"https://eu.ui-avatars.com/api/?background=039be5&color=fff&name=" + encodeURIComponent(session.user.name || session.user.username)} alt="" />
<img className="h-8 w-8 rounded-full" src={"https://eu.ui-avatars.com/api/?background=039be5&color=fff&name=" + encodeURIComponent(session.user.name || "")} alt="" />
</button>
</div>
{

12
pages/[user].tsx
View File

@ -17,20 +17,26 @@ export default function User(props) {
return (
<div>
<Head>
<title>{props.user.name} | Calendso</title>
<title>{props.user.name || props.user.username} | Calendso</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main className="max-w-2xl mx-auto my-24">
<div className="mb-8 text-center">
<img src={props.user.avatar} alt="Avatar" className="mx-auto w-24 h-24 rounded-full mb-4"/>
<h1 className="text-3xl font-semibold text-gray-800 mb-1">{props.user.name}</h1>
{props.user.avatar && <img src={props.user.avatar} alt="Avatar" className="mx-auto w-24 h-24 rounded-full mb-4"/>}
<h1 className="text-3xl font-semibold text-gray-800 mb-1">{props.user.name || props.user.username}</h1>
<p className="text-gray-600">{props.user.bio}</p>
</div>
<div className="bg-white shadow overflow-hidden rounded-md">
<ul className="divide-y divide-gray-200">
{eventTypes}
</ul>
{eventTypes.length == 0 &&
<div className="p-8 text-center text-gray-400">
<h2 className="font-semibold text-3xl text-gray-600">Uh oh!</h2>
<p className="max-w-md mx-auto">This user hasn't set up any event types yet.</p>
</div>
}
</div>
</main>
</div>

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

@ -89,7 +89,7 @@ export default function Type(props) {
return (
<div>
<Head>
<title>{props.eventType.title} | {props.user.name} | Calendso</title>
<title>{props.eventType.title} | {props.user.name || props.user.username} | Calendso</title>
<link rel="icon" href="/favicon.ico" />
</Head>
@ -97,7 +97,7 @@ export default function Type(props) {
<div className="bg-white overflow-hidden shadow rounded-lg">
<div className="sm:flex px-4 py-5 sm:p-6">
<div className={"sm:border-r " + (selectedDate ? 'sm:w-1/3' : 'sm:w-1/2')}>
<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"/>}
<h2 className="font-medium text-gray-500">{props.user.name}</h2>
<h1 className="text-3xl font-semibold text-gray-800 mb-4">{props.eventType.title}</h1>
<p className="text-gray-500 mb-4">

4
pages/[user]/book.tsx
View File

@ -32,7 +32,7 @@ export default function Book(props) {
return (
<div>
<Head>
<title>Confirm your {props.eventType.title} with {props.user.name} | Calendso</title>
<title>Confirm your {props.eventType.title} with {props.user.name || props.user.username} | Calendso</title>
<link rel="icon" href="/favicon.ico" />
</Head>
@ -40,7 +40,7 @@ export default function Book(props) {
<div className="bg-white overflow-hidden shadow rounded-lg">
<div className="sm:flex px-4 py-5 sm:p-6">
<div className="sm:w-1/2 sm:border-r">
<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"/>}
<h2 className="font-medium text-gray-500">{props.user.name}</h2>
<h1 className="text-3xl font-semibold text-gray-800 mb-4">{props.eventType.title}</h1>
<p className="text-gray-500 mb-2">

5
pages/index.tsx
View File

@ -65,6 +65,11 @@ export default function Home(props) {
</div>
</li>
)}
{props.credentials.length == 0 &&
<div className="text-center text-gray-400 py-2">
<p>You haven't added any integrations.</p>
</div>
}
</ul>
</div>
</div>

4
pages/success.tsx
View File

@ -11,7 +11,7 @@ export default function Success(props) {
return(
<div>
<Head>
<title>Booking Confirmed | {props.eventType.title} with {props.user.name} | Calendso</title>
<title>Booking Confirmed | {props.eventType.title} with {props.user.name || props.user.username} | Calendso</title>
<link rel="icon" href="/favicon.ico" />
</Head>
@ -33,7 +33,7 @@ export default function Success(props) {
</h3>
<div className="mt-2">
<p className="text-sm text-gray-500">
You are scheduled in with {props.user.name}.
You are scheduled in with {props.user.name || props.user.username}.
</p>
</div>
<div className="mt-4 border-t border-b py-4">