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

improve example ui

Browse source
This commit is contained in:
anovazzi1 2023-04-18 15:12:10 -03:00
commit a923cdeccb
2 changed files with 75 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

36
src/frontend/src/modals/importModal/buttonBox/index.tsx
View file

@ -1,6 +1,7 @@
import React, { ReactNode } from "react"; import React, { ReactNode } from "react";
import { DocumentDuplicateIcon } from "@heroicons/react/solid"; import { DocumentDuplicateIcon } from "@heroicons/react/solid";
import { classNames } from "../../../utils"; import { classNames } from "../../../utils";
import Tooltip from "../../../components/TooltipComponent";
export default function ButtonBox({ export default function ButtonBox({
onClick, onClick,
@ -10,7 +11,7 @@ export default function ButtonBox({
bgColor, bgColor,
textColor, textColor,
deactivate, deactivate,
size size,
}: { }: {
onClick: () => void; onClick: () => void;
title: string; title: string;
@ -82,17 +83,36 @@ export default function ButtonBox({
)} )}
> >
<div className={`flex flex-1 flex-col ${padding}`}> <div className={`flex flex-1 flex-col ${padding}`}>
<div className={`mx-auto flex items-center justify-center ${bigCircle} bg-white/30 rounded-full`}> <div
<div className={`mx-auto flex items-center justify-center ${smallCircle} bg-white rounded-full`}> className={`mx-auto flex items-center justify-center ${bigCircle} bg-white/30 rounded-full`}
<div className={textColor}> >
{icon} <div
className={`mx-auto flex items-center justify-center ${smallCircle} bg-white rounded-full`}
>
<div className={textColor}>{icon}</div>
</div> </div>
</div> </div>
</div> <h3
<h3 className={classNames("font-semibold text-white",titleFontSize,marginTop)}>{title}</h3> className={classNames(
"font-semibold text-white",
titleFontSize,
marginTop
)}
>
{title}
</h3>
<div className="mt-1 flex flex-grow flex-col justify-between"> <div className="mt-1 flex flex-grow flex-col justify-between">
<dt className="sr-only">{title}</dt> <dt className="sr-only">{title}</dt>
<dd className={classNames("text-gray-100",descriptionFontSize)}>{deactivate? "Coming soon":description}</dd> <Tooltip title={description} placement="bottom">
<dd
className={classNames(
"text-gray-100 line-clamp-2",
descriptionFontSize
)}
>
{deactivate ? "Coming soon" : description}
</dd>
</Tooltip>
</div> </div>
</div> </div>
</div> </div>

7
src/frontend/src/modals/importModal/index.tsx
View file

@ -26,7 +26,7 @@ export default function ImportModal() {
const [showExamples, setShowExamples] = useState(false); const [showExamples, setShowExamples] = useState(false);
const [loadingExamples, setLoadingExamples] = useState(false); const [loadingExamples, setLoadingExamples] = useState(false);
const [examples, setExamples] = useState<FlowType[]>([]); const [examples, setExamples] = useState<FlowType[]>([]);
const { uploadFlow } = useContext(TabsContext); const { uploadFlow, addFlow } = useContext(TabsContext);
function setModalOpen(x: boolean) { function setModalOpen(x: boolean) {
setOpen(x); setOpen(x);
if (x === false) { if (x === false) {
@ -181,12 +181,13 @@ export default function ImportModal() {
<ButtonBox <ButtonBox
size="small" size="small"
bgColor="bg-slate-300" bgColor="bg-slate-300"
description="Prebuilt Examples" description={example.description??"Prebuilt Examples"}
icon={ icon={
<DocumentDuplicateIcon className="h-6 w-6 flex-shrink-0" /> <DocumentDuplicateIcon className="h-6 w-6 flex-shrink-0" />
} }
onClick={() => { onClick={() => {
console.log("click"); addFlow(example)
setModalOpen(false)
}} }}
textColor="text-slate-400" textColor="text-slate-400"
title={example.name} title={example.name}