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

feat(pageLayout): add support for displaying a beta icon in the page … (#1205)

Browse source 
…title

feat(StorePage): enable beta icon in the PageLayout component
style(applies.css): adjust styles for the beta icon in the page title
This commit is contained in:
Cristhian Zanforlin Lousa 2023-12-13 20:17:22 -03:00 • committed by GitHub
commit 8343ecab5f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 13 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -6,11 +6,13 @@ export default function PageLayout({
description,
children,
button,
betaIcon,
}: {
title: string;
description: string;
children: React.ReactNode;
button?: React.ReactNode;
betaIcon: boolean;
}) {
return (
<div className="flex h-screen w-full flex-col">
@ -18,7 +20,10 @@ export default function PageLayout({
<div className="flex h-full w-full flex-col justify-between overflow-auto bg-background px-16">
<div className="flex w-full items-center justify-between gap-4 space-y-0.5 py-8 pb-2">
<div className="flex w-full flex-col">
<h2 className="text-2xl font-bold tracking-tight">{title}</h2>
<h2 className="text-2xl font-bold tracking-tight">
{title}
{betaIcon && <span className="store-beta-icon">BETA</span>}
</h2>
<p className="text-muted-foreground">{description}</p>
</div>
<div className="flex-shrink-0">{button && button}</div>

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

@ -164,6 +164,7 @@ export default function StorePage(): JSX.Element {
return (
<PageLayout
betaIcon
title="Langflow Store"
description="Search flows and components from the community."
button={

8
src/frontend/src/style/applies.css
View file

@ -311,7 +311,7 @@
@apply hover:text-accent-foreground hover:transition-all;
}
.generic-node-desc {
@apply h-full px-5 mb-4 w-full text-foreground;
@apply mb-4 h-full w-full px-5 text-foreground;
}
.generic-node-desc-text {
@apply w-full text-sm text-muted-foreground;
@ -1040,7 +1040,7 @@
.fade-container::before,
.fade-container::after {
@apply pointer-events-none absolute bottom-0 top-0 bg-gradient-to-r to-transparent from-background;
@apply pointer-events-none absolute bottom-0 top-0 bg-gradient-to-r from-background to-transparent;
content: "";
width: 50px;
opacity: 0;
@ -1084,4 +1084,8 @@
.scroll-container {
@apply flex overflow-x-scroll scrollbar-hide;
}
.store-beta-icon {
@apply relative bottom-3 left-1 ml-2 rounded-full bg-beta-background px-2 py-1 text-center text-xs font-semibold text-beta-foreground;
}
}