mythic-insight/calcom
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 5

fix: stats, layout defect from merge (#367)

Browse source
This commit is contained in:
Femi Odugbesan 2021-07-15 09:48:02 -05:00 committed by GitHub
parent f7a9c077b0
commit b27ba5123c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 50 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

91
pages/index.tsx
View file

@ -80,52 +80,62 @@ export default function Home(props) {
<div className="pt-5 pb-2 px-6 sm:flex sm:items-center sm:justify-between"> <div className="pt-5 pb-2 px-6 sm:flex sm:items-center sm:justify-between">
<h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-white">Your stats</h3> <h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-white">Your stats</h3>
</div> </div>
<div className="mt-8 bg-white shadow dark:bg-gray-800 overflow-hidden rounded-md"> <dl className="grid grid-cols-1 overflow-hidden divide-y divide-gray-200 dark:divide-gray-900 md:grid-cols-3 md:divide-y-0 md:divide-x">
<div className="pt-5 pb-2 px-6 sm:flex sm:items-center sm:justify-between"> {stats.map((item) => (
<h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-white"> <div key={item.name} className="px-4 py-5 sm:p-6">
Your event types <dt className="text-base font-normal dark:text-white text-gray-900">{item.name}</dt>
</h3> <dd className="mt-1 flex justify-between items-baseline md:block lg:flex">
</div> <div className="flex items-baseline text-2xl font-semibold text-blue-600">
<ul className="divide-y divide-gray-200"> {item.stat}
{props.eventTypes.map((type) => ( </div>
<li key={type.id}> </dd>
<div className="px-4 py-4 flex items-center sm:px-6"> </div>
<div className="min-w-0 flex-1 sm:flex sm:items-center sm:justify-between"> ))}
<div className="truncate"> </dl>
<div className="flex text-sm"> </div>
<p className="flex-shrink-0 font-medium text-blue-600 truncate">{type.title}</p> <div className="mt-8 bg-white shadow dark:bg-gray-800 overflow-hidden rounded-md">
<p className="ml-1 font-normal text-gray-500 truncate"> <div className="pt-5 pb-2 px-6 sm:flex sm:items-center sm:justify-between">
in {type.description} <h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-white">
</p> Your event types
</div> </h3>
<div className="mt-2 flex"> </div>
<div className="flex items-center text-sm text-gray-500"> <ul className="divide-y divide-gray-200">
<ClockIcon {props.eventTypes.map((type) => (
className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400" <li key={type.id}>
aria-hidden="true" <div className="px-4 py-4 flex items-center sm:px-6">
/> <div className="min-w-0 flex-1 sm:flex sm:items-center sm:justify-between">
<p>{type.length} minutes</p> <div className="truncate">
</div> <div className="flex text-sm">
<p className="flex-shrink-0 font-medium text-blue-600 truncate">{type.title}</p>
<p className="ml-1 font-normal text-gray-500 truncate">in {type.description}</p>
</div>
<div className="mt-2 flex">
<div className="flex items-center text-sm text-gray-500">
<ClockIcon
className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"
aria-hidden="true"
/>
<p>{type.length} minutes</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className="ml-5 flex-shrink-0"> </div>
<Link href={"/availability/event/" + type.id}> <div className="ml-5 flex-shrink-0">
<a className="text-blue-600 hover:text-blue-900 mr-2 font-medium">Edit</a> <Link href={"/availability/event/" + type.id}>
</Link> <a className="text-blue-600 hover:text-blue-900 mr-2 font-medium">Edit</a>
<Link href={"/" + session.user.username + "/" + type.slug}> </Link>
<a target="_blank" className="text-blue-600 hover:text-blue-900 mr-2 font-medium"> <Link href={"/" + session.user.username + "/" + type.slug}>
View <a target="_blank" className="text-blue-600 hover:text-blue-900 mr-2 font-medium">
</a> View
</Link> </a>
</div> </Link>
</div> </div>
</li> </li>
))} ))}
{props.eventTypes.length == 0 && ( {props.eventTypes.length == 0 && (
<div className="text-center text-gray-400 py-12"> <div className="text-center text-gray-400 py-12">
<p>You haven't created any event types.</p> <p>You haven&apos;t created any event types.</p>
</div> </div>
)} )}
</ul> </ul>
@ -213,7 +223,7 @@ export default function Home(props) {
</div> </div>
<ul className="divide-y divide-gray-200"> <ul className="divide-y divide-gray-200">
{props.credentials.map((integration) => ( {props.credentials.map((integration) => (
<li className="pb-4 flex"> <li key={integration.type} className="pb-4 flex">
{integration.type == "google_calendar" && ( {integration.type == "google_calendar" && (
<img <img
className="h-10 w-10 mr-2" className="h-10 w-10 mr-2"
@ -252,7 +262,7 @@ export default function Home(props) {
))} ))}
{props.credentials.length == 0 && ( {props.credentials.length == 0 && (
<div className="text-center text-gray-400 py-2"> <div className="text-center text-gray-400 py-2">
<p>You haven't added any integrations.</p> <p>You haven&apos;t added any integrations.</p>
</div> </div>
)} )}
</ul> </ul>
@ -291,14 +301,13 @@ export default function Home(props) {
))} ))}
{props.eventTypes.length == 0 && ( {props.eventTypes.length == 0 && (
<div className="text-center text-gray-400 py-2"> <div className="text-center text-gray-400 py-2">
<p>You haven't created any event types.</p> <p>You haven&apos;t created any event types.</p>
</div> </div>
)} )}
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
<DonateBanner /> <DonateBanner />
</Shell> </Shell>
</div> </div>