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

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

@ -1,6 +1,7 @@
import React, { ReactNode } from "react";
import { DocumentDuplicateIcon } from "@heroicons/react/solid";
import { classNames } from "../../../utils";
import Tooltip from "../../../components/TooltipComponent";
export default function ButtonBox({
onClick,
@ -10,7 +11,7 @@ export default function ButtonBox({
bgColor,
textColor,
deactivate,
size
size,
}: {
onClick: () => void;
title: string;
@ -18,57 +19,57 @@ export default function ButtonBox({
icon: ReactNode;
bgColor: string;
textColor: string;
deactivate?:boolean;
size:"small"|"medium"|"big";
deactivate?: boolean;
size: "small" | "medium" | "big";
}) {
let bigCircle:string;
let smallCircle:string;
let titleFontSize:string;
let descriptionFontSize:string;
let padding:string;
let marginTop:string;
let height:string;
let widht:string;
switch(size){
let bigCircle: string;
let smallCircle: string;
let titleFontSize: string;
let descriptionFontSize: string;
let padding: string;
let marginTop: string;
let height: string;
let widht: string;
switch (size) {
case "small":
bigCircle="h-12 w-12";
smallCircle ="h-8 w-8";
titleFontSize="text-sm";
descriptionFontSize="text-xs";
padding="p-2";
marginTop="mt-2";
height="h-36";
widht="w-28";
bigCircle = "h-12 w-12";
smallCircle = "h-8 w-8";
titleFontSize = "text-sm";
descriptionFontSize = "text-xs";
padding = "p-2";
marginTop = "mt-2";
height = "h-36";
widht = "w-28";
break;
case "medium":
bigCircle="h-16 w-16";
smallCircle ="h-12 w-12";
titleFontSize="text-base";
descriptionFontSize="text-sm";
padding="p-4";
marginTop="mt-3";
height="h-44";
widht="w-36";
bigCircle = "h-16 w-16";
smallCircle = "h-12 w-12";
titleFontSize = "text-base";
descriptionFontSize = "text-sm";
padding = "p-4";
marginTop = "mt-3";
height = "h-44";
widht = "w-36";
break;
case "big":
bigCircle="h-20 w-20";
smallCircle ="h-16 w-16";
titleFontSize="text-lg";
descriptionFontSize="text-sm";
padding="p-8";
marginTop="mt-6";
height="h-56";
widht="w-44";
bigCircle = "h-20 w-20";
smallCircle = "h-16 w-16";
titleFontSize = "text-lg";
descriptionFontSize = "text-sm";
padding = "p-8";
marginTop = "mt-6";
height = "h-56";
widht = "w-44";
break;
default:
bigCircle="h-20 w-20";
smallCircle ="h-16 w-16";
titleFontSize="text-lg";
descriptionFontSize="text-sm";
padding="p-8";
marginTop="mt-6";
height="h-56";
widht="w-44";
bigCircle = "h-20 w-20";
smallCircle = "h-16 w-16";
titleFontSize = "text-lg";
descriptionFontSize = "text-sm";
padding = "p-8";
marginTop = "mt-6";
height = "h-56";
widht = "w-44";
break;
}
return (
@ -82,17 +83,36 @@ export default function ButtonBox({
)}
>
<div className={`flex flex-1 flex-col ${padding}`}>
<div className={`mx-auto flex items-center justify-center ${bigCircle} bg-white/30 rounded-full`}>
<div className={`mx-auto flex items-center justify-center ${smallCircle} bg-white rounded-full`}>
<div className={textColor}>
{icon}
</div>
<div
className={`mx-auto flex items-center justify-center ${bigCircle} bg-white/30 rounded-full`}
>
<div
className={`mx-auto flex items-center justify-center ${smallCircle} bg-white rounded-full`}
>
<div className={textColor}>{icon}</div>
</div>
</div>
<h3 className={classNames("font-semibold text-white",titleFontSize,marginTop)}>{title}</h3>
<h3
className={classNames(
"font-semibold text-white",
titleFontSize,
marginTop
)}
>
{title}
</h3>
<div className="mt-1 flex flex-grow flex-col justify-between">
<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>

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

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