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

Added description to pages

Browse source
This commit is contained in:
Lucas Oliveira 2023-06-13 19:45:50 -03:00
commit f1f36024e9
2 changed files with 68 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -67,7 +67,7 @@ export default function CommunityPage() {
}, []);
return (
<div className="w-full h-full flex overflow-auto flex-col bg-muted px-16">
<div className="w-full flex justify-between py-12 pb-8 px-6">
<div className="w-full flex justify-between py-12 pb-2 px-6">
<span className="text-2xl flex items-center justify-center gap-2 font-semibold">
<Users2 className="w-6" />
Community Examples
@ -81,6 +81,9 @@ export default function CommunityPage() {
</a>
</div>
</div>
<span className="flex pb-8 px-6 w-[70%] text-muted-foreground">
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="w-full p-4 grid gap-4 md:grid-cols-2 lg:grid-cols-4">
{!loadingExamples &&
examples.map((flow, idx) => (

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

@ -8,7 +8,16 @@ import ExtraSidebar from "../../components/ExtraSidebarComponent";
import { ReactFlowProvider } from "reactflow";
import FlowPage from "../FlowPage";
import { useContext, useEffect, useState } from "react";
import { SunIcon, MoonIcon, BellIcon, GithubIcon, Download, Upload, Plus, Home } from "lucide-react";
import {
SunIcon,
MoonIcon,
BellIcon,
GithubIcon,
Download,
Upload,
Plus,
Home,
} from "lucide-react";
import { TabsContext } from "../../contexts/tabsContext";
import AlertDropdown from "../../alerts/alertDropDown";
import { alertContext } from "../../contexts/alertContext";
@ -20,58 +29,68 @@ import { FaGithub } from "react-icons/fa";
import _ from "lodash";
import { updateFlowInDatabase, uploadFlowsToDatabase } from "../../controllers/API";
import {
updateFlowInDatabase,
uploadFlowsToDatabase,
} from "../../controllers/API";
import { MenuBar } from "../../components/headerComponent/components/menuBar";
import { CardComponent } from "./components/cardComponent";
import { useNavigate } from "react-router-dom";
export default function HomePage() {
const {
flows,
setTabId,
downloadFlows,
uploadFlows,
addFlow,
} = useContext(TabsContext);
const { flows, setTabId, downloadFlows, uploadFlows, addFlow } =
useContext(TabsContext);
useEffect(() => {
setTabId("");
}, [])
}, []);
const navigate = useNavigate();
return (
<div
className="w-full h-full flex overflow-auto flex-col bg-muted px-16"
>
<div className="w-full flex justify-between py-12 pb-8 px-6">
<span className="text-2xl flex items-center justify-center gap-2 font-semibold">
<Home className="w-6" />My Projects
</span>
<div className="flex gap-2">
<Button variant="primary" onClick={() => {
downloadFlows();
}}>
<Download className="w-4 mr-2" />
Download Database
</Button>
<Button variant="primary" onClick={() => {uploadFlows();}}>
<Upload className="w-4 mr-2" />
Upload Database
</Button>
<Button variant="primary" onClick={() => {addFlow().then((id) => {
navigate("/flow/"+id);
});}}>
<Plus className="w-4 mr-2" />
New Project
</Button>
</div>
</div>
<div className="w-full p-4 grid gap-4 md:grid-cols-2 lg:grid-cols-4">
{flows.map((flow, idx) => (
<CardComponent
key={idx}
flow={flow}
id={flow.id}
/>
))}
</div>
<div className="w-full h-full flex overflow-auto flex-col bg-muted px-16">
<div className="w-full flex justify-between py-12 pb-2 px-6">
<span className="text-2xl flex items-center justify-center gap-2 font-semibold">
<Home className="w-6" />
My Projects
</span>
<div className="flex gap-2">
<Button
variant="primary"
onClick={() => {
downloadFlows();
}}
>
<Download className="w-4 mr-2" />
Download Database
</Button>
<Button
variant="primary"
onClick={() => {
uploadFlows();
}}
>
<Upload className="w-4 mr-2" />
Upload Database
</Button>
<Button
variant="primary"
onClick={() => {
addFlow().then((id) => {
navigate("/flow/" + id);
});
}}
>
<Plus className="w-4 mr-2" />
New Project
</Button>
</div>
</div>
<span className="flex pb-8 px-6 text-muted-foreground w-[60%]">
Manage your personal projects. Download or upload your complete project
collection.
</span>
<div className="w-full p-4 grid gap-4 md:grid-cols-2 lg:grid-cols-4">
{flows.map((flow, idx) => (
<CardComponent key={idx} flow={flow} id={flow.id} />
))}
</div>
</div>
);
}