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

feat: Add community page constants classes

Browse source
This commit is contained in:
Igor Carvalho 2023-07-04 21:02:43 -03:00
commit 84aa84cc08
2 changed files with 32 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

24
src/frontend/src/index.css
View file

@ -281,4 +281,28 @@ The cursor: default; property value restores the browser's default cursor style
.main-page-flows-display {
@apply grid w-full gap-4 p-4 md:grid-cols-2 lg:grid-cols-4
}
.community-page-arrangement {
@apply flex-max-width h-full flex-col overflow-auto bg-muted px-16
}
.community-page-nav-arrangement {
@apply flex-max-width justify-between px-6 py-12 pb-2
}
.community-page-nav-title {
@apply flex items-center justify-center gap-2 text-2xl font-semibold
}
.community-page-nav-button {
@apply flex gap-2
}
.community-page-description-text {
@apply flex w-[70%] px-6 pb-8 text-muted-foreground
}
.community-pages-flows-panel {
@apply grid w-full gap-4 p-4 md:grid-cols-2 lg:grid-cols-4
}
}

16
src/frontend/src/pages/CommunityPage/index.tsx
View file

@ -37,31 +37,31 @@ export default function CommunityPage() {
handleExamples();
}, []);
return (
<div className="flex h-full w-full flex-col overflow-auto bg-muted px-16">
<div className="flex w-full justify-between px-6 py-12 pb-2">
<span className="flex items-center justify-center gap-2 text-2xl font-semibold">
<div className="community-page-arrangement">
<div className="community-page-nav-arrangement">
<span className="community-page-nav-title">
<Users2 className="w-6" />
Community Examples
</span>
<div className="flex gap-2">
<div className="community-page-nav-button">
<a
href="https://github.com/logspace-ai/langflow_examples"
target="_blank"
rel="noreferrer"
>
<Button variant="primary">
<GithubIcon className="mr-2 w-4" />
<GithubIcon className="main-page-nav-button" />
Add Your Example
</Button>
</a>
</div>
</div>
<span className="flex w-[70%] px-6 pb-8 text-muted-foreground">
<span className="community-page-description-text">
Discover and learn from shared examples by the LangFlow community. We
welcome new example contributions that can help our community explore
new and powerful features.
</span>
<div className="grid w-full gap-4 p-4 md:grid-cols-2 lg:grid-cols-4">
<div className="community-pages-flows-panel">
{!loadingExamples &&
examples.map((flow, idx) => (
<CardComponent
@ -79,7 +79,7 @@ export default function CommunityPage() {
});
}}
>
<GitFork className="mr-2 w-4" />
<GitFork className="main-page-nav-button" />
Fork Example
</Button>
}