Fixed display of paginator and results
This commit is contained in:
Lucas Oliveira
parent
abc708b933
commit
c8dc529ac3
2 changed files with 162 additions and 153 deletions
|
|
@ -1,4 +1,3 @@
|
||||||
import { Search } from "lucide-react";
|
|
||||||
import { useContext, useEffect, useState } from "react";
|
import { useContext, useEffect, useState } from "react";
|
||||||
import PaginatorComponent from "../../components/PaginatorComponent";
|
import PaginatorComponent from "../../components/PaginatorComponent";
|
||||||
import ShadTooltip from "../../components/ShadTooltipComponent";
|
import ShadTooltip from "../../components/ShadTooltipComponent";
|
||||||
|
|
@ -138,166 +137,176 @@ export default function StorePage(): JSX.Element {
|
||||||
<Header />
|
<Header />
|
||||||
|
|
||||||
<div className="community-page-arrangement">
|
<div className="community-page-arrangement">
|
||||||
<div className="community-page-nav-arrangement">
|
<div>
|
||||||
<span className="community-page-nav-title">
|
<div className="community-page-nav-arrangement">
|
||||||
<IconComponent name="Store" className="w-6" />
|
<span className="community-page-nav-title">
|
||||||
Langflow Store
|
<IconComponent name="Store" className="w-6" />
|
||||||
</span>
|
Langflow Store
|
||||||
<div className="community-page-nav-button">
|
</span>
|
||||||
<StoreApiKeyModal
|
<div className="community-page-nav-button">
|
||||||
onCloseModal={() => {
|
<StoreApiKeyModal
|
||||||
handleGetComponents();
|
onCloseModal={() => {
|
||||||
}}
|
handleGetComponents();
|
||||||
>
|
}}
|
||||||
<Button
|
|
||||||
className={`${
|
|
||||||
errorApiKey && !hasApiKey ? "animate-pulse border-error" : ""
|
|
||||||
}`}
|
|
||||||
variant="primary"
|
|
||||||
>
|
>
|
||||||
<IconComponent name="Key" className="main-page-nav-button" />
|
<Button
|
||||||
API Key
|
className={`${
|
||||||
</Button>
|
errorApiKey && !hasApiKey
|
||||||
</StoreApiKeyModal>
|
? "animate-pulse border-error"
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<span className="community-page-description-text">
|
|
||||||
Search flows and components from the community.
|
|
||||||
</span>
|
|
||||||
<div className="flex w-full flex-col gap-4 p-0">
|
|
||||||
<div className="flex items-end gap-4">
|
|
||||||
<div className="relative h-12 w-[40%]">
|
|
||||||
<Input
|
|
||||||
placeholder="Search Flows and Components"
|
|
||||||
className="absolute h-12 px-5"
|
|
||||||
onChange={(e) => {
|
|
||||||
setInputText(e.target.value);
|
|
||||||
}}
|
|
||||||
onKeyDown={(e) => {
|
|
||||||
if (e.key === "Enter") {
|
|
||||||
setSearchText(inputText);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
value={inputText}
|
|
||||||
/>
|
|
||||||
<Search
|
|
||||||
onClick={() => {
|
|
||||||
setSearchText(inputText);
|
|
||||||
}}
|
|
||||||
className="absolute bottom-0 right-4 top-0 my-auto h-6 cursor-pointer stroke-1 text-muted-foreground"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="ml-4 flex w-full gap-2 border-b border-border">
|
|
||||||
<button
|
|
||||||
onClick={() => {
|
|
||||||
setTabActive("All");
|
|
||||||
}}
|
|
||||||
className={
|
|
||||||
tabActive === "All"
|
|
||||||
? "border-b-2 border-primary p-3"
|
|
||||||
: " border-b-2 border-transparent p-3 text-muted-foreground hover:text-primary"
|
|
||||||
}
|
|
||||||
>
|
|
||||||
All
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => {
|
|
||||||
setTabActive("Flows");
|
|
||||||
}}
|
|
||||||
className={
|
|
||||||
tabActive === "Flows"
|
|
||||||
? "border-b-2 border-primary p-3"
|
|
||||||
: " border-b-2 border-transparent p-3 text-muted-foreground hover:text-primary"
|
|
||||||
}
|
|
||||||
>
|
|
||||||
Flows
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => {
|
|
||||||
setTabActive("Components");
|
|
||||||
}}
|
|
||||||
className={
|
|
||||||
tabActive === "Components"
|
|
||||||
? "border-b-2 border-primary p-3"
|
|
||||||
: " border-b-2 border-transparent p-3 text-muted-foreground hover:text-primary"
|
|
||||||
}
|
|
||||||
>
|
|
||||||
Components
|
|
||||||
</button>
|
|
||||||
<ShadTooltip content="Coming Soon">
|
|
||||||
<button className="cursor-not-allowed p-3 text-muted-foreground">
|
|
||||||
Bundles
|
|
||||||
</button>
|
|
||||||
</ShadTooltip>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center gap-2 px-2">
|
|
||||||
{!loadingTags &&
|
|
||||||
tags.map((tag, idx) => (
|
|
||||||
<Badge
|
|
||||||
onClick={() => {
|
|
||||||
updateTags(tag.name);
|
|
||||||
}}
|
|
||||||
variant="outline"
|
|
||||||
size="sq"
|
|
||||||
className={cn(
|
|
||||||
"cursor-pointer",
|
|
||||||
filteredCategories.some((category) => category === tag.name)
|
|
||||||
? "bg-beta-foreground text-background hover:bg-beta-foreground"
|
|
||||||
: ""
|
: ""
|
||||||
)}
|
}`}
|
||||||
|
variant="primary"
|
||||||
>
|
>
|
||||||
{tag.name}
|
<IconComponent name="Key" className="main-page-nav-button" />
|
||||||
</Badge>
|
API Key
|
||||||
))}
|
</Button>
|
||||||
|
</StoreApiKeyModal>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-end justify-between">
|
<span className="community-page-description-text">
|
||||||
<span className="px-0.5 text-sm text-muted-foreground">
|
Search flows and components from the community.
|
||||||
{!loading && (
|
</span>
|
||||||
|
<div className="flex w-full flex-col gap-4 p-0">
|
||||||
|
<div className="flex items-end gap-4">
|
||||||
|
<div className="relative h-12 w-[40%]">
|
||||||
|
<Input
|
||||||
|
placeholder="Search Flows and Components"
|
||||||
|
className="absolute h-12 px-5"
|
||||||
|
onChange={(e) => {
|
||||||
|
setInputText(e.target.value);
|
||||||
|
}}
|
||||||
|
onKeyDown={(e) => {
|
||||||
|
if (e.key === "Enter") {
|
||||||
|
setSearchText(inputText);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
value={inputText}
|
||||||
|
/>
|
||||||
|
<IconComponent
|
||||||
|
name={loading ? "Loader2" : "Search"}
|
||||||
|
onClick={() => {
|
||||||
|
setSearchText(inputText);
|
||||||
|
}}
|
||||||
|
className={
|
||||||
|
"absolute bottom-0 right-4 top-0 my-auto h-6 cursor-pointer stroke-1 text-muted-foreground" +
|
||||||
|
(loading ? " animate-spin" : "")
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="ml-4 flex w-full gap-2 border-b border-border">
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
setTabActive("All");
|
||||||
|
}}
|
||||||
|
className={
|
||||||
|
tabActive === "All"
|
||||||
|
? "border-b-2 border-primary p-3"
|
||||||
|
: " border-b-2 border-transparent p-3 text-muted-foreground hover:text-primary"
|
||||||
|
}
|
||||||
|
>
|
||||||
|
All
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
setTabActive("Flows");
|
||||||
|
}}
|
||||||
|
className={
|
||||||
|
tabActive === "Flows"
|
||||||
|
? "border-b-2 border-primary p-3"
|
||||||
|
: " border-b-2 border-transparent p-3 text-muted-foreground hover:text-primary"
|
||||||
|
}
|
||||||
|
>
|
||||||
|
Flows
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
setTabActive("Components");
|
||||||
|
}}
|
||||||
|
className={
|
||||||
|
tabActive === "Components"
|
||||||
|
? "border-b-2 border-primary p-3"
|
||||||
|
: " border-b-2 border-transparent p-3 text-muted-foreground hover:text-primary"
|
||||||
|
}
|
||||||
|
>
|
||||||
|
Components
|
||||||
|
</button>
|
||||||
|
<ShadTooltip content="Coming Soon">
|
||||||
|
<button className="cursor-not-allowed p-3 text-muted-foreground">
|
||||||
|
Bundles
|
||||||
|
</button>
|
||||||
|
</ShadTooltip>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex h-6 items-center gap-2 px-2">
|
||||||
|
{!loadingTags &&
|
||||||
|
tags.map((tag, idx) => (
|
||||||
|
<Badge
|
||||||
|
onClick={() => {
|
||||||
|
updateTags(tag.name);
|
||||||
|
}}
|
||||||
|
variant="outline"
|
||||||
|
size="sq"
|
||||||
|
className={cn(
|
||||||
|
"cursor-pointer",
|
||||||
|
filteredCategories.some(
|
||||||
|
(category) => category === tag.name
|
||||||
|
)
|
||||||
|
? "bg-beta-foreground text-background hover:bg-beta-foreground"
|
||||||
|
: ""
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{tag.name}
|
||||||
|
</Badge>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="flex items-end justify-between">
|
||||||
|
<span className="px-0.5 text-sm text-muted-foreground">
|
||||||
|
{(!loading || searchData.length !== 0) && (
|
||||||
|
<>
|
||||||
|
{totalRowsCount}{" "}
|
||||||
|
{totalRowsCount !== 1 ? "results" : "result"}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<Select
|
||||||
|
onValueChange={(e) => {
|
||||||
|
setPageOrder(e);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="Sort By" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="Popular">Most Popular</SelectItem>
|
||||||
|
{/* <SelectItem value="Recent">Most Recent</SelectItem> */}
|
||||||
|
<SelectItem value="Alphabetical">Alphabetical</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid w-full gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||||
|
{!loading || searchData.length !== 0 ? (
|
||||||
|
searchData.map((item, idx) => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<MarketCardComponent key={idx} data={item} />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
) : (
|
||||||
<>
|
<>
|
||||||
{totalRowsCount} {totalRowsCount !== 1 ? "results" : "result"}
|
<SkeletonCardComponent />
|
||||||
|
<SkeletonCardComponent />
|
||||||
|
<SkeletonCardComponent />
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</span>
|
</div>
|
||||||
|
|
||||||
<Select
|
|
||||||
onValueChange={(e) => {
|
|
||||||
setPageOrder(e);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<SelectTrigger>
|
|
||||||
<SelectValue placeholder="Sort By" />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
<SelectItem value="Popular">Most Popular</SelectItem>
|
|
||||||
{/* <SelectItem value="Recent">Most Recent</SelectItem> */}
|
|
||||||
<SelectItem value="Alphabetical">Alphabetical</SelectItem>
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid w-full gap-4 md:grid-cols-2 lg:grid-cols-3">
|
|
||||||
{loading ? (
|
|
||||||
<>
|
|
||||||
<SkeletonCardComponent />
|
|
||||||
<SkeletonCardComponent />
|
|
||||||
<SkeletonCardComponent />
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
searchData.map((item, idx) => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<MarketCardComponent key={idx} data={item} />
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
})
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
{(!loading || searchData.length !== 0) && (
|
||||||
{!loading && (
|
<div className="relative my-6">
|
||||||
<div className="relative my-3">
|
|
||||||
<PaginatorComponent
|
<PaginatorComponent
|
||||||
storeComponent={true}
|
storeComponent={true}
|
||||||
pageIndex={pageIndex}
|
pageIndex={pageIndex}
|
||||||
|
|
|
||||||
|
|
@ -241,7 +241,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.community-page-arrangement {
|
.community-page-arrangement {
|
||||||
@apply flex-max-width h-full flex-col overflow-auto bg-background px-16 pb-4;
|
@apply flex-max-width justify-between h-full flex-col overflow-auto bg-background px-16;
|
||||||
}
|
}
|
||||||
|
|
||||||
.community-page-nav-arrangement {
|
.community-page-nav-arrangement {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue