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

feat: add main page constants classes

Browse source
This commit is contained in:
Igor Carvalho 2023-07-04 20:44:38 -03:00
commit fdad5e7da3
2 changed files with 37 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

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

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

18
src/frontend/src/pages/MainPage/index.tsx
View file

@ -13,9 +13,9 @@ export default function HomePage() {
}, []);
const navigate = useNavigate();
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="main-page-panel">
<div className="main-page-nav-arrangement">
<span className="main-page-nav-title">
<Home className="w-6" />
{USER_PROJECTS_HEADER}
</span>
@ -26,7 +26,7 @@ export default function HomePage() {
downloadFlows();
}}
>
<Download className="mr-2 w-4" />
<Download className="main-page-nav-button" />
Download Collection
</Button>
<Button
@ -35,7 +35,7 @@ export default function HomePage() {
uploadFlows();
}}
>
<Upload className="mr-2 w-4" />
<Upload className="main-page-nav-button" />
Upload Collection
</Button>
<Button
@ -46,15 +46,15 @@ export default function HomePage() {
});
}}
>
<Plus className="mr-2 w-4" />
<Plus className="main-page-nav-button" />
New Project
</Button>
</div>
</div>
<span className="flex w-[60%] px-6 pb-14 text-muted-foreground">
<span className="main-page-description-text">
Manage your personal projects. Download or upload your collection.
</span>
<div className="grid w-full gap-4 p-4 md:grid-cols-2 lg:grid-cols-4">
<div className="main-page-flows-display">
{flows.map((flow, idx) => (
<CardComponent
key={idx}
@ -67,7 +67,7 @@ export default function HomePage() {
size="sm"
className="whitespace-nowrap "
>
<ExternalLink className="mr-2 w-4" />
<ExternalLink className="main-page-nav-button" />
Edit Flow
</Button>
</Link>