jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

PageLayout fixed to have buttons

Browse source
This commit is contained in:
Lucas Oliveira 2023-11-18 20:00:54 -03:00
commit d07090f27c
3 changed files with 31 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/frontend/src/components/pageLayout/index.tsx
View file

@ -5,18 +5,23 @@ export default function PageLayout({
title, title,
description, description,
children, children,
button,
}: { }: {
title: string; title: string;
description: string; description: string;
children: React.ReactNode; children: React.ReactNode;
button?: React.ReactNode;
}) { }) {
return ( return (
<div className="flex h-screen w-full flex-col"> <div className="flex h-screen w-full flex-col">
<Header /> <Header />
<div className="flex h-full w-full flex-col justify-between overflow-auto bg-background px-16"> <div className="flex h-full w-full flex-col justify-between overflow-auto bg-background px-16">
<div className="flex w-full flex-col justify-between space-y-0.5 py-8 pb-2"> <div className="flex w-full items-center justify-between space-y-0.5 py-8 pb-2">
<h2 className="text-2xl font-bold tracking-tight">{title}</h2> <div className="flex w-full flex-col">
<p className="text-muted-foreground">{description}</p> <h2 className="text-2xl font-bold tracking-tight">{title}</h2>
<p className="text-muted-foreground">{description}</p>
</div>
<div className="flex-shrink-0">{button && button}</div>
</div> </div>
<Separator className="my-6 flex" /> <Separator className="my-6 flex" />
{children} {children}

2
src/frontend/src/modals/StoreApiKeyModal/index.tsx
View file

@ -43,7 +43,7 @@ export default function StoreApiKeyModal({
return ( return (
<BaseModal size="small-h-full" open={open && !disabled} setOpen={setOpen}> <BaseModal size="small-h-full" open={open && !disabled} setOpen={setOpen}>
<BaseModal.Trigger>{children}</BaseModal.Trigger> <BaseModal.Trigger asChild>{children}</BaseModal.Trigger>
<BaseModal.Header <BaseModal.Header
description={ description={
(hasApiKey && !validApiKey (hasApiKey && !validApiKey

37
src/frontend/src/pages/StorePage/index.tsx
View file

@ -7,7 +7,9 @@ import IconComponent from "../../components/genericIconComponent";
import PageLayout from "../../components/pageLayout"; import PageLayout from "../../components/pageLayout";
import { SkeletonCardComponent } from "../../components/skeletonCardComponent"; import { SkeletonCardComponent } from "../../components/skeletonCardComponent";
import { Badge } from "../../components/ui/badge"; import { Badge } from "../../components/ui/badge";
import { Button } from "../../components/ui/button";
import { Input } from "../../components/ui/input"; import { Input } from "../../components/ui/input";
import { import {
Select, Select,
SelectContent, SelectContent,
@ -20,6 +22,7 @@ import { alertContext } from "../../contexts/alertContext";
import { AuthContext } from "../../contexts/authContext"; import { AuthContext } from "../../contexts/authContext";
import { StoreContext } from "../../contexts/storeContext"; import { StoreContext } from "../../contexts/storeContext";
import { getStoreComponents, getStoreTags } from "../../controllers/API"; import { getStoreComponents, getStoreTags } from "../../controllers/API";
import StoreApiKeyModal from "../../modals/StoreApiKeyModal";
import { storeComponent } from "../../types/store"; import { storeComponent } from "../../types/store";
import { cn } from "../../utils/utils"; import { cn } from "../../utils/utils";
export default function StorePage(): JSX.Element { export default function StorePage(): JSX.Element {
@ -198,21 +201,25 @@ export default function StorePage(): JSX.Element {
<PageLayout <PageLayout
title="Langflow Store" title="Langflow Store"
description="Search flows and components from the community." description="Search flows and components from the community."
/* button={{StoreApiKeyModal && ( button={
<StoreApiKeyModal disabled={loading}> <>
<Button {StoreApiKeyModal && (
disabled={loading} <StoreApiKeyModal disabled={loading}>
className={cn( <Button
`${!validApiKey ? "animate-pulse border-error" : ""}`, disabled={loading}
loading ? "cursor-not-allowed" : "" className={cn(
)} `${!validApiKey ? "animate-pulse border-error" : ""}`,
variant="primary" loading ? "cursor-not-allowed" : ""
> )}
<IconComponent name="Key" className="mr-2 w-4" /> variant="primary"
API Key >
</Button> <IconComponent name="Key" className="mr-2 w-4" />
</StoreApiKeyModal> API Key
)}} */ </Button>
</StoreApiKeyModal>
)}
</>
}
> >
<div className="flex h-full w-full flex-col justify-between"> <div className="flex h-full w-full flex-col justify-between">
<div className="flex w-full flex-col gap-4 p-0"> <div className="flex w-full flex-col gap-4 p-0">