Add more empty states
This commit is contained in:
parent
38cbb42b2c
commit
443febac8d
6 changed files with 21 additions and 10 deletions
|
@ -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>
|
||||
{
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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">
|
||||
|
|
Loading…
Reference in a new issue