public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added emptyscreen for app store search (#6065) 

* added emptyscreen for app store search

* nit
pull/5623/head^2
Peer Richelsen 2022-12-16 20:02:29 +01:00 committed by GitHub
parent 4368536141
commit b789e58624
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 20 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
packages/ui/v2/core/apps/AllApps.tsx
View File

@ -2,12 +2,13 @@ import { useAutoAnimate } from "@formkit/auto-animate/react";
import type { Credential } from "@prisma/client"; import type { Credential } from "@prisma/client";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { UIEvent, useEffect, useRef, useState } from "react"; import { UIEvent, useEffect, useRef, useState } from "react";
import { ChevronLeft, ChevronRight } from "react-feather";
import { classNames } from "@calcom/lib"; import { classNames } from "@calcom/lib";
import { useLocale } from "@calcom/lib/hooks/useLocale"; import { useLocale } from "@calcom/lib/hooks/useLocale";
import type { App } from "@calcom/types/App"; import type { App } from "@calcom/types/App";
import { Icon } from "@calcom/ui";
import EmptyScreen from "../EmptyScreen";
import AppCard from "./AppCard"; import AppCard from "./AppCard";
export function useShouldShowArrows() { export function useShouldShowArrows() {
@ -73,7 +74,7 @@ function CategoryTab({ selectedCategory, categories, searchText }: CategoryTabPr
{leftVisible && ( {leftVisible && (
<button onClick={handleLeft} className="absolute top-9 flex md:left-1/2 md:-top-1"> <button onClick={handleLeft} className="absolute top-9 flex md:left-1/2 md:-top-1">
<div className="flex h-12 w-5 items-center justify-end bg-white"> <div className="flex h-12 w-5 items-center justify-end bg-white">
<ChevronLeft className="h-4 w-4 text-gray-500" /> <Icon.FiChevronLeft className="h-4 w-4 text-gray-500" />
</div> </div>
<div className="flex h-12 w-5 bg-gradient-to-l from-transparent to-white" /> <div className="flex h-12 w-5 bg-gradient-to-l from-transparent to-white" />
</button> </button>
@ -116,7 +117,7 @@ function CategoryTab({ selectedCategory, categories, searchText }: CategoryTabPr
<button onClick={handleRight} className="absolute top-9 right-0 flex md:-top-1"> <button onClick={handleRight} className="absolute top-9 right-0 flex md:-top-1">
<div className="flex h-12 w-5 bg-gradient-to-r from-transparent to-white" /> <div className="flex h-12 w-5 bg-gradient-to-r from-transparent to-white" />
<div className="flex h-12 w-5 items-center justify-end bg-white"> <div className="flex h-12 w-5 items-center justify-end bg-white">
<ChevronRight className="h-4 w-4 text-gray-500" /> <Icon.FiChevronRight className="h-4 w-4 text-gray-500" />
</div> </div>
</button> </button>
)} )}
@ -137,7 +138,7 @@ export default function AllApps({ apps, searchText }: AllAppsPropsType) {
}); });
if (searchText) { if (searchText) {
enableAnimation(false); enableAnimation && enableAnimation(false);
} }
useEffect(() => { useEffect(() => {
@ -161,15 +162,21 @@ export default function AllApps({ apps, searchText }: AllAppsPropsType) {
return ( return (
<div className="mb-16"> <div className="mb-16">
<CategoryTab selectedCategory={selectedCategory} searchText={searchText} categories={categories} /> <CategoryTab selectedCategory={selectedCategory} searchText={searchText} categories={categories} />
<div {filteredApps.length ? (
className="grid gap-3 lg:grid-cols-4 [@media(max-width:1270px)]:grid-cols-3 [@media(max-width:730px)]:grid-cols-2 [@media(max-width:500px)]:grid-cols-1" <div
ref={appsContainerRef}> className="grid gap-3 lg:grid-cols-4 [@media(max-width:1270px)]:grid-cols-3 [@media(max-width:730px)]:grid-cols-2 [@media(max-width:500px)]:grid-cols-1"
{filteredApps.length ref={appsContainerRef}>
? filteredApps.map((app) => ( {filteredApps.map((app) => (
<AppCard key={app.name} app={app} searchText={searchText} credentials={app.credentials} /> <AppCard key={app.name} app={app} searchText={searchText} credentials={app.credentials} />
)) ))}{" "}
: t("no_results")} </div>
</div> ) : (
<EmptyScreen
Icon={Icon.FiSearch}
headline={t("no_results")}
description={searchText ? searchText?.toString() : ""}
/>
)}
</div> </div>
); );
} }