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 title

Browse source 
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:
cristhianzl 2023-12-13 20:14:34 -03:00
commit 03be55a1ba
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, description,
children, children,
button, button,
betaIcon,
}: { }: {
title: string; title: string;
description: string; description: string;
children: React.ReactNode; children: React.ReactNode;
button?: React.ReactNode; button?: React.ReactNode;
betaIcon: boolean;
}) { }) {
return ( return (
<div className="flex h-screen w-full flex-col"> <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 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 items-center justify-between gap-4 space-y-0.5 py-8 pb-2">
<div className="flex w-full flex-col"> <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> <p className="text-muted-foreground">{description}</p>
</div> </div>
<div className="flex-shrink-0">{button && button}</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 ( return (
<PageLayout <PageLayout
betaIcon
title="Langflow Store" title="Langflow Store"
description="Search flows and components from the community." description="Search flows and components from the community."
button={ button={

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

@ -311,7 +311,7 @@
@apply hover:text-accent-foreground hover:transition-all; @apply hover:text-accent-foreground hover:transition-all;
} }
.generic-node-desc { .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 { .generic-node-desc-text {
@apply w-full text-sm text-muted-foreground; @apply w-full text-sm text-muted-foreground;
@ -1040,7 +1040,7 @@
.fade-container::before, .fade-container::before,
.fade-container::after { .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: ""; content: "";
width: 50px; width: 50px;
opacity: 0; opacity: 0;
@ -1084,4 +1084,8 @@
.scroll-container { .scroll-container {
@apply flex overflow-x-scroll scrollbar-hide; @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;
}
} }