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

Update exampleComponent and MainPage components

Browse source
This commit is contained in:
anovazzi1 2024-03-05 20:54:07 -03:00
commit 781d2705aa
2 changed files with 28 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

47
src/frontend/src/components/exampleComponent/index.tsx
View file

@ -19,15 +19,17 @@ import {
CardTitle, CardTitle,
} from "../ui/card"; } from "../ui/card";
import { FlowType } from "../../types/flow"; import { FlowType } from "../../types/flow";
import { Link } from "react-router-dom"; import { updateIds } from "../../utils/reactflowUtils";
import { useNavigate } from "react-router-dom";
export default function CollectionCardComponent({ export default function CollectionCardComponent({
data, flow,
}: { }: {
data: FlowType; flow: FlowType;
authorized?: boolean; authorized?: boolean;
}) { }) {
const addFlow = useFlowsManagerStore((state) => state.addFlow); const addFlow = useFlowsManagerStore((state) => state.addFlow);
const navigate = useNavigate();
return ( return (
<Card <Card
@ -45,13 +47,13 @@ export default function CollectionCardComponent({
)} )}
name="Group" name="Group"
/> />
<ShadTooltip content={data.name}> <ShadTooltip content={flow.name}>
<div className="w-full truncate">{data.name}</div> <div className="w-full truncate">{flow.name}</div>
</ShadTooltip> </ShadTooltip>
</CardTitle> </CardTitle>
</div> </div>
<CardDescription className="pb-2 pt-2"> <CardDescription className="pb-2 pt-2">
<div className="truncate-doubleline">{data.description}</div> <div className="truncate-doubleline">{flow.description}</div>
</CardDescription> </CardDescription>
</CardHeader> </CardHeader>
</div> </div>
@ -59,20 +61,25 @@ export default function CollectionCardComponent({
<CardFooter> <CardFooter>
<div className="flex w-full items-center justify-between gap-2"> <div className="flex w-full items-center justify-between gap-2">
<div className="flex w-full justify-end flex-wrap gap-2"> <div className="flex w-full justify-end flex-wrap gap-2">
<Link to={"/flow/" + data.id}> <Button
<Button onClick={() => {
tabIndex={-1} updateIds(flow.data!)
variant="outline" addFlow(true, flow).then((id) => {
size="sm"
className="whitespace-nowrap " navigate("/flow/" + id);
> });
<IconComponent }}
name="ExternalLink" tabIndex={-1}
className="main-page-nav-button select-none" variant="outline"
/> size="sm"
Select Flow className="whitespace-nowrap "
</Button> >
</Link> <IconComponent
name="ExternalLink"
className="main-page-nav-button select-none"
/>
Select Flow
</Button>
</div> </div>
</div> </div>
</CardFooter> </CardFooter>

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

@ -131,7 +131,7 @@ export default function HomePage(): JSX.Element {
<div className="flex flex-wrap w-full h-full p-4 gap-3"> <div className="flex flex-wrap w-full h-full p-4 gap-3">
{examples.map((example, idx) => { {examples.map((example, idx) => {
return( return(
<ExampleCardComponent data={example} />) <ExampleCardComponent flow={example} />)
})} })}
<NewFlowCardComponent/> <NewFlowCardComponent/>
</div> </div>