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

feat: Change hard coded lucide icons to generic icon component

Browse source
This commit is contained in:
Igor Carvalho 2023-07-14 20:55:24 -03:00
commit 8101bbc21e
41 changed files with 436 additions and 176 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
View file

@ -27,6 +27,7 @@ import {
nodeIconsLucide,
nodeNames,
} from "../../../../utils";
import IconComponent from "../../../../components/genericIconComponent";
export default function ParameterComponent({
left,
@ -164,7 +165,7 @@ export default function ParameterComponent({
<div className="">
{info !== "" && (
<ShadTooltip content={infoHtml.current}>
<Info className="relative bottom-0.5 ml-2 h-3 w-3" />
<IconComponent name="Info" style="relative bottom-0.5 ml-2 h-3 w-3" method="LUCIDE" />
</ShadTooltip>
)}
</div>

9
src/frontend/src/CustomNodes/GenericNode/index.tsx
View file

@ -1,4 +1,3 @@
import { Zap } from "lucide-react";
import { useContext, useEffect, useRef, useState } from "react";
import { NodeToolbar } from "reactflow";
import ShadTooltip from "../../components/ShadTooltipComponent";
@ -17,6 +16,7 @@ import {
toTitleCase,
} from "../../utils";
import ParameterComponent from "./components/parameterComponent";
import IconComponent from "../../components/genericIconComponent";
export default function GenericNode({
data,
@ -119,9 +119,10 @@ export default function GenericNode({
) : !validationStatus ? (
<span className="flex">
Build{" "}
<Zap
className="mx-0.5 h-5 fill-build-trigger stroke-build-trigger stroke-1"
strokeWidth={1.5}
<IconComponent
name="Zap"
style="mx-0.5 h-5 fill-build-trigger stroke-build-trigger stroke-1"
method="LUCIDE"
/>{" "}
flow to validate status.
</span>

40
src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
View file

@ -1,8 +1,8 @@
import { Transition } from "@headlessui/react";
import { CheckCircle2, Info, X, XCircle } from "lucide-react";
import { useState } from "react";
import { Link } from "react-router-dom";
import { SingleAlertComponentType } from "../../../../types/alerts";
import IconComponent from "../../../../components/genericIconComponent";
export default function SingleAlert({
dropItem,
@ -29,7 +29,12 @@ export default function SingleAlert({
key={dropItem.id}
>
<div className="flex-shrink-0">
<XCircle className="h-5 w-5 text-status-red" aria-hidden="true" />
<IconComponent
method="LUCIDE"
name="XCircle"
style="h-5 w-5 text-status-red"
aria-hidden="true"
/>
</div>
<div className="ml-3">
<h3 className="break-words text-sm font-medium text-error-foreground">
@ -62,8 +67,10 @@ export default function SingleAlert({
className="inline-flex rounded-md p-1.5 text-status-red"
>
<span className="sr-only">Dismiss</span>
<X
className="h-4 w-4 text-error-foreground"
<IconComponent
name="X"
method="LUCIDE"
style="h-4 w-4 text-error-foreground"
aria-hidden="true"
/>
</button>
@ -76,7 +83,12 @@ export default function SingleAlert({
key={dropItem.id}
>
<div className="flex-shrink-0">
<Info className="h-5 w-5 text-status-blue " aria-hidden="true" />
<IconComponent
name="Info"
method="LUCIDE"
style="h-5 w-5 text-status-blue "
aria-hidden="true"
/>
</div>
<div className="ml-3 flex-1 md:flex md:justify-between">
<p className="text-sm font-medium text-info-foreground">
@ -108,8 +120,10 @@ export default function SingleAlert({
className="inline-flex rounded-md p-1.5 text-info-foreground"
>
<span className="sr-only">Dismiss</span>
<X
className="h-4 w-4 text-info-foreground"
<IconComponent
method="LUCIDE"
name="X"
style="h-4 w-4 text-info-foreground"
aria-hidden="true"
/>
</button>
@ -122,8 +136,10 @@ export default function SingleAlert({
key={dropItem.id}
>
<div className="flex-shrink-0">
<CheckCircle2
className="h-5 w-5 text-status-green"
<IconComponent
name="CheckCircle2"
style="h-5 w-5 text-status-green"
method="LUCIDE"
aria-hidden="true"
/>
</div>
@ -145,8 +161,10 @@ export default function SingleAlert({
className="inline-flex rounded-md p-1.5 text-status-green"
>
<span className="sr-only">Dismiss</span>
<X
className="h-4 w-4 text-success-foreground"
<IconComponent
name="X"
method="LUCIDE"
style="h-4 w-4 text-success-foreground"
aria-hidden="true"
/>
</button>

14
src/frontend/src/alerts/alertDropDown/index.tsx
View file

@ -1,10 +1,10 @@
import { Trash2, X } from "lucide-react";
import { useContext, useRef } from "react";
import { alertContext } from "../../contexts/alertContext";
import { PopUpContext } from "../../contexts/popUpContext";
import { AlertDropdownType } from "../../types/alerts";
import { useOnClickOutside } from "../hooks/useOnClickOutside";
import SingleAlert from "./components/singleAlertComponent";
import IconComponent from "../../components/genericIconComponent";
export default function AlertDropdown({}: AlertDropdownType) {
const { closePopUp } = useContext(PopUpContext);
@ -36,13 +36,21 @@ export default function AlertDropdown({}: AlertDropdownType) {
setTimeout(clearNotificationList, 100);
}}
>
<Trash2 className="h-[1.1rem] w-[1.1rem]" />
<IconComponent
name="Trash2"
method="LUCIDE"
style="h-[1.1rem] w-[1.1rem]"
/>
</button>
<button
className="text-foreground hover:text-status-red"
onClick={closePopUp}
>
<X className="h-5 w-5" />
<IconComponent
method="LUCIDE"
name="X"
style="h-5 w-5"
/>
</button>
</div>
</div>

8
src/frontend/src/alerts/error/index.tsx
View file

@ -1,7 +1,7 @@
import { Transition } from "@headlessui/react";
import { XCircle } from "lucide-react";
import { useEffect, useState } from "react";
import { ErrorAlertType } from "../../types/alerts";
import IconComponent from "../../components/genericIconComponent";
export default function ErrorAlert({
title,
@ -44,8 +44,10 @@ export default function ErrorAlert({
>
<div className="flex">
<div className="flex-shrink-0">
<XCircle
className="error-build-message-circle"
<IconComponent
name="XCircle"
method="LUCIDE"
style="error-build-message-circle"
aria-hidden="true"
/>
</div>

9
src/frontend/src/alerts/notice/index.tsx
View file

@ -1,8 +1,8 @@
import { Transition } from "@headlessui/react";
import { Info } from "lucide-react";
import { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { NoticeAlertType } from "../../types/alerts";
import IconComponent from "../../components/genericIconComponent";
export default function NoticeAlert({
title,
@ -40,7 +40,12 @@ export default function NoticeAlert({
>
<div className="flex">
<div className="flex-shrink-0">
<Info className="h-5 w-5 text-status-blue " aria-hidden="true" />
<IconComponent
name="Info"
style="h-5 w-5 text-status-blue "
aria-hidden="true"
method="LUCIDE"
/>
</div>
<div className="ml-3 flex-1 md:flex md:justify-between">
<p className="text-sm text-info-foreground">{title}</p>

9
src/frontend/src/alerts/success/index.tsx
View file

@ -1,7 +1,7 @@
import { Transition } from "@headlessui/react";
import { CheckCircle2 } from "lucide-react";
import { useEffect, useState } from "react";
import { SuccessAlertType } from "../../types/alerts";
import IconComponent from "../../components/genericIconComponent";
export default function SuccessAlert({
title,
@ -38,7 +38,12 @@ export default function SuccessAlert({
>
<div className="flex">
<div className="flex-shrink-0">
<CheckCircle2 className="success-alert-icon" aria-hidden="true" />
<IconComponent
name="CheckCircle2"
style="success-alert-icon"
method="LUCIDE"
aria-hidden="true"
/>
</div>
<div className="ml-3">
<p className="success-alert-message">{title}</p>

8
src/frontend/src/components/cardComponent/index.tsx
View file

@ -1,4 +1,3 @@
import { Trash2 } from "lucide-react";
import { useContext } from "react";
import { TabsContext } from "../../contexts/tabsContext";
import { FlowType } from "../../types/flow";
@ -10,6 +9,7 @@ import {
CardHeader,
CardTitle,
} from "../ui/card";
import IconComponent from "../genericIconComponent";
export const CardComponent = ({
flow,
@ -37,7 +37,11 @@ export const CardComponent = ({
<span className="card-component-title-size">{flow.name}</span>
{onDelete && (
<button className="card-component-delete-button" onClick={onDelete}>
<Trash2 className="card-component-delete-icon" />
<IconComponent
name="Trash2"
style="card-component-delete-icon"
method="LUCIDE"
/>
</button>
)}
</CardTitle>

9
src/frontend/src/components/chatComponent/buildTrigger/index.tsx
View file

@ -1,5 +1,4 @@
import { Transition } from "@headlessui/react";
import { Zap } from "lucide-react";
import { useContext, useState } from "react";
import Loading from "../../../components/ui/loading";
import { useSSE } from "../../../contexts/SSEContext";
@ -11,6 +10,7 @@ import { validateNodes } from "../../../utils";
import { TabsContext } from "../../../contexts/tabsContext";
import RadialProgressComponent from "../../RadialProgress";
import IconComponent from "../../genericIconComponent";
export default function BuildTrigger({
open,
@ -190,9 +190,10 @@ export default function BuildTrigger({
className="build-trigger-loading-icon"
/>
) : (
<Zap
strokeWidth={1.5}
className="sh-6 w-6 fill-build-trigger stroke-build-trigger stroke-1"
<IconComponent
name="Zap"
style="sh-6 w-6 fill-build-trigger stroke-build-trigger stroke-1"
method="LUCIDE"
/>
)}
</div>

10
src/frontend/src/components/chatComponent/chatTrigger/index.tsx
View file

@ -1,5 +1,4 @@
import { Transition } from "@headlessui/react";
import { MessagesSquare } from "lucide-react";
import { useContext } from "react";
import {
@ -9,6 +8,7 @@ import {
FLOW_NOT_BUILT_TITLE,
} from "../../../constants";
import { alertContext } from "../../../contexts/alertContext";
import IconComponent from "../../genericIconComponent";
export default function ChatTrigger({ open, setOpen, isBuilt, canOpen }) {
const { setErrorData } = useContext(alertContext);
@ -50,15 +50,15 @@ export default function ChatTrigger({ open, setOpen, isBuilt, canOpen }) {
}
>
<div className="flex gap-3">
<MessagesSquare
className={
<IconComponent
name="MessagesSquare"
style={
"h-6 w-6 transition-all " +
(isBuilt && canOpen
? "message-button-icon"
: "disabled-message-button-icon")
}
style={{ color: "white" }}
strokeWidth={1.5}
method="LUCIDE"
/>
</div>
</button>

9
src/frontend/src/components/codeAreaComponent/index.tsx
View file

@ -3,7 +3,7 @@ import { PopUpContext } from "../../contexts/popUpContext";
import CodeAreaModal from "../../modals/codeAreaModal";
import { TextAreaComponentType } from "../../types/components";
import { ExternalLink } from "lucide-react";
import IconComponent from "../genericIconComponent";
export default function CodeAreaComponent({
value,
@ -70,9 +70,10 @@ export default function CodeAreaComponent({
}}
>
{!editNode && (
<ExternalLink
strokeWidth={1.5}
className={
<IconComponent
name="ExternalLink"
method="LUCIDE"
style={
"icons-parameters-comp" +
(disabled ? " text-ring" : " hover:text-accent-foreground")
}

14
src/frontend/src/components/dropdownComponent/index.tsx
View file

@ -1,9 +1,9 @@
import { Listbox, Transition } from "@headlessui/react";
import { Check, ChevronsUpDown } from "lucide-react";
import { Fragment, useContext, useEffect, useState } from "react";
import { PopUpContext } from "../../contexts/popUpContext";
import { DropDownComponentType } from "../../types/components";
import { classNames } from "../../utils";
import IconComponent from "../genericIconComponent";
export default function Dropdown({
value,
@ -46,8 +46,10 @@ export default function Dropdown({
{internalValue}
</span>
<span className={"dropdown-component-arrow"}>
<ChevronsUpDown
className="dropdown-component-arrow-color"
<IconComponent
method="LUCIDE"
name="ChevronsUpDown"
style="dropdown-component-arrow-color"
aria-hidden="true"
/>
</span>
@ -99,8 +101,10 @@ export default function Dropdown({
"dropdown-component-choosal"
)}
>
<Check
className={
<IconComponent
method="LUCIDE"
name="Check"
style={
active
? "dropdown-component-check-icon"
: "dropdown-component-check-icon"

22
src/frontend/src/components/genericIconComponent/index.tsx
View file

@ -1,28 +1,34 @@
import { IconComponentProps, IconProps } from "../../types/components";
import { nodeIconsLucide, svgIcons } from "../../utils";
export function IconFromLucide({ name }: IconProps): JSX.Element {
export function IconFromLucide({
name,
style,
}: IconProps): JSX.Element {
const TargetIcon = nodeIconsLucide[name] ?? nodeIconsLucide["unknown"];
return <TargetIcon />;
return <TargetIcon className={ style } />;
}
export function IconFromSvg({ name }: IconProps): JSX.Element {
export function IconFromSvg({
name,
style
}: IconProps): JSX.Element {
const TargetSvg = svgIcons[name] ?? nodeIconsLucide["unknown"];
return <TargetSvg />;
return <TargetSvg className={ style } />;
}
export default function IconComponent({
method,
name,
className,
style,
}: IconComponentProps): JSX.Element {
switch (method) {
case "SVG":
return <IconFromSvg name={name} />;
return <IconFromSvg name={name} style={ style } />;
case "LUCIDE":
return <IconFromLucide name={name} />;
return <IconFromLucide name={name} style={ style } />;
default:
console.error("IconComponent: invalid method");
return <IconFromLucide name={"unknown"} />;
return <IconFromLucide name={"unknown"} style={"unknown"} />;
}
}

45
src/frontend/src/components/headerComponent/components/menuBar/index.tsx
View file

@ -1,11 +1,3 @@
import {
ChevronDown,
ChevronLeft,
Plus,
Redo,
Settings2,
Undo,
} from "lucide-react";
import { useContext } from "react";
import { PopUpContext } from "../../../../contexts/popUpContext";
import { TabsContext } from "../../../../contexts/tabsContext";
@ -22,6 +14,7 @@ import { alertContext } from "../../../../contexts/alertContext";
import { undoRedoContext } from "../../../../contexts/undoRedoContext";
import FlowSettingsModal from "../../../../modals/flowSettingsModal";
import { Button } from "../../../ui/button";
import IconComponent from "../../../genericIconComponent";
export const MenuBar = ({ flows, tabId }) => {
const { updateFlow, setTabId, addFlow } = useContext(TabsContext);
@ -46,7 +39,11 @@ export const MenuBar = ({ flows, tabId }) => {
return (
<div className="round-button-div">
<Link to="/">
<ChevronLeft className="w-4" />
<IconComponent
name="ChevronLeft"
style="w-4"
method="LUCIDE"
/>
</Link>
<div className="header-menu-bar">
<DropdownMenu>
@ -54,7 +51,11 @@ export const MenuBar = ({ flows, tabId }) => {
<Button asChild variant="primary" size="sm">
<div className="header-menu-bar-display">
<div className="header-menu-flow-name">{current_flow.name}</div>
<ChevronDown className="h-4 w-4" />
<IconComponent
name="ChevronDown"
style="h-4 w-4"
method="LUCIDE"
/>
</div>
</Button>
</DropdownMenuTrigger>
@ -66,7 +67,11 @@ export const MenuBar = ({ flows, tabId }) => {
}}
className="cursor-pointer"
>
<Plus className="header-menu-options" />
<IconComponent
name="Plus"
style="header-menu-options"
method="LUCIDE"
/>
New
</DropdownMenuItem>
<DropdownMenuItem
@ -75,7 +80,11 @@ export const MenuBar = ({ flows, tabId }) => {
}}
className="cursor-pointer"
>
<Settings2 className="header-menu-options " />
<IconComponent
name="Settings2"
style="header-menu-options "
method="LUCIDE"
/>
Settings
</DropdownMenuItem>
<DropdownMenuItem
@ -84,7 +93,11 @@ export const MenuBar = ({ flows, tabId }) => {
}}
className="cursor-pointer"
>
<Undo className="header-menu-options " />
<IconComponent
name="Undo"
style="header-menu-options "
method="LUCIDE"
/>
Undo
</DropdownMenuItem>
<DropdownMenuItem
@ -93,7 +106,11 @@ export const MenuBar = ({ flows, tabId }) => {
}}
className="cursor-pointer"
>
<Redo className="header-menu-options " />
<IconComponent
name="Redo"
style="header-menu-options "
method="LUCIDE"
/>
Redo
</DropdownMenuItem>
{/* <DropdownMenuSeparator /> */}

33
src/frontend/src/components/headerComponent/index.tsx
View file

@ -1,4 +1,3 @@
import { Bell, Home, MoonIcon, SunIcon, Users2 } from "lucide-react";
import { useContext, useEffect, useState } from "react";
import { FaDiscord, FaGithub, FaTwitter } from "react-icons/fa";
import { Link, useLocation, useParams } from "react-router-dom";
@ -13,6 +12,7 @@ import { getRepoStars } from "../../controllers/API";
import { Button } from "../ui/button";
import { Separator } from "../ui/separator";
import MenuBar from "./components/menuBar";
import IconComponent from "../genericIconComponent";
export default function Header() {
const { flows, addFlow, tabId } = useContext(TabsContext);
@ -51,7 +51,11 @@ export default function Header() {
variant={location.pathname === "/" ? "primary" : "secondary"}
size="sm"
>
<Home className="h-4 w-4" />
<IconComponent
name="Home"
method="LUCIDE"
style="h-4 w-4"
/>
<div className="flex-1">{USER_PROJECTS_HEADER}</div>
</Button>
</Link>
@ -63,7 +67,11 @@ export default function Header() {
}
size="sm"
>
<Users2 className="h-4 w-4" />
<IconComponent
method="LUCIDE"
name="Users2"
style="h-4 w-4"
/>
<div className="flex-1">Community Examples</div>
</Button>
</Link>
@ -105,9 +113,17 @@ export default function Header() {
}}
>
{dark ? (
<SunIcon className="side-bar-button-size" />
<IconComponent
name="SunIcon"
style="side-bar-button-size"
method="LUCIDE"
/>
) : (
<MoonIcon className="side-bar-button-size" />
<IconComponent
name="MoonIcon"
style="side-bar-button-size"
method="LUCIDE"
/>
)}
</button>
<button
@ -131,7 +147,12 @@ export default function Header() {
}}
>
{notificationCenter && <div className="header-notifications"></div>}
<Bell className="side-bar-button-size" aria-hidden="true" />
<IconComponent
name="Bell"
method="LUCIDE"
style="side-bar-button-size"
aria-hidden="true"
/>
</button>
</div>
</div>

9
src/frontend/src/components/inputFileComponent/index.tsx
View file

@ -1,9 +1,9 @@
import { FileSearch2 } from "lucide-react";
import { useContext, useEffect, useState } from "react";
import { alertContext } from "../../contexts/alertContext";
import { TabsContext } from "../../contexts/tabsContext";
import { uploadFile } from "../../controllers/API";
import { FileComponentType } from "../../types/components";
import IconComponent from "../genericIconComponent";
export default function InputFileComponent({
value,
@ -108,9 +108,10 @@ export default function InputFileComponent({
</span>
<button onClick={handleButtonClick}>
{!editNode && !loading && (
<FileSearch2
strokeWidth={1.5}
className={
<IconComponent
name="FileSearch2"
method="LUCIDE"
style={
"icons-parameters-comp" +
(disabled ? " text-ring " : " hover:text-accent-foreground")
}

14
src/frontend/src/components/inputListComponent/index.tsx
View file

@ -2,8 +2,8 @@ import { useContext, useEffect, useState } from "react";
import { InputListComponentType } from "../../types/components";
import _ from "lodash";
import { Plus, X } from "lucide-react";
import { PopUpContext } from "../../contexts/popUpContext";
import IconComponent from "../genericIconComponent";
export default function InputListComponent({
value,
@ -65,7 +65,11 @@ export default function InputListComponent({
onChange(inputList);
}}
>
<Plus className={"h-4 w-4 hover:text-accent-foreground"} />
<IconComponent
name="Plus"
style={"h-4 w-4 hover:text-accent-foreground"}
method="LUCIDE"
/>
</button>
) : (
<button
@ -78,7 +82,11 @@ export default function InputListComponent({
onChange(inputList);
}}
>
<X className="h-4 w-4 hover:text-status-red" />
<IconComponent
name="X"
style="h-4 w-4 hover:text-status-red"
method="LUCIDE"
/>
</button>
)}
</div>

9
src/frontend/src/components/promptComponent/index.tsx
View file

@ -4,9 +4,9 @@ import GenericModal from "../../modals/genericModal";
import { TextAreaComponentType } from "../../types/components";
import { TypeModal } from "../../utils";
import { ExternalLink } from "lucide-react";
import { typesContext } from "../../contexts/typesContext";
import { postValidatePrompt } from "../../controllers/API";
import IconComponent from "../genericIconComponent";
export default function PromptAreaComponent({
field_name,
@ -106,9 +106,10 @@ export default function PromptAreaComponent({
}}
>
{!editNode && (
<ExternalLink
strokeWidth={1.5}
className={
<IconComponent
name="ExternalLink"
method="LUCIDE"
style={
"icons-parameters-comp" +
(disabled ? " text-ring" : " hover:text-accent-foreground")
}

9
src/frontend/src/components/textAreaComponent/index.tsx
View file

@ -4,8 +4,8 @@ import GenericModal from "../../modals/genericModal";
import { TextAreaComponentType } from "../../types/components";
import { TypeModal } from "../../utils";
import { ExternalLink } from "lucide-react";
import { TabsContext } from "../../contexts/tabsContext";
import IconComponent from "../genericIconComponent";
export default function TextAreaComponent({
value,
@ -68,9 +68,10 @@ export default function TextAreaComponent({
}}
>
{!editNode && (
<ExternalLink
strokeWidth={1.5}
className={
<IconComponent
name="ExternalLink"
method="LUCIDE"
style={
"icons-parameters-comp" +
(disabled ? " text-ring" : " hover:text-accent-foreground")
}

8
src/frontend/src/components/ui/checkbox.tsx
View file

@ -1,9 +1,9 @@
"use client";
import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
import { Check } from "lucide-react";
import * as React from "react";
import { cn } from "../../utils";
import IconComponent from "../genericIconComponent";
const Checkbox = React.forwardRef<
React.ElementRef<typeof CheckboxPrimitive.Root>,
@ -20,7 +20,11 @@ const Checkbox = React.forwardRef<
<CheckboxPrimitive.Indicator
className={cn("flex items-center justify-center text-current")}
>
<Check className="h-4 w-4" />
<IconComponent
name="Check"
method="LUCIDE"
style="h-4 w-4"
/>
</CheckboxPrimitive.Indicator>
</CheckboxPrimitive.Root>
));

8
src/frontend/src/components/ui/dialog.tsx
View file

@ -1,7 +1,7 @@
import * as DialogPrimitive from "@radix-ui/react-dialog";
import { X } from "lucide-react";
import * as React from "react";
import { cn } from "../../utils";
import IconComponent from "../genericIconComponent";
const Dialog = DialogPrimitive.Root;
@ -51,7 +51,11 @@ const DialogContent = React.forwardRef<
>
{children}
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
<X className="h-4 w-4" />
<IconComponent
name="X"
method="LUCIDE"
style="h-4 w-4"
/>
<span className="sr-only">Close</span>
</DialogPrimitive.Close>
</DialogPrimitive.Content>

20
src/frontend/src/components/ui/dropdown-menu.tsx
View file

@ -1,9 +1,9 @@
"use client";
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
import { Check, ChevronRight, Circle } from "lucide-react";
import * as React from "react";
import { cn } from "../../utils";
import IconComponent from "../genericIconComponent";
const DropdownMenu = DropdownMenuPrimitive.Root;
@ -33,7 +33,11 @@ const DropdownMenuSubTrigger = React.forwardRef<
{...props}
>
{children}
<ChevronRight className="ml-auto h-4 w-4" />
<IconComponent
name="ChevronRight"
style="ml-auto h-4 w-4"
method="LUCIDE"
/>
</DropdownMenuPrimitive.SubTrigger>
));
DropdownMenuSubTrigger.displayName =
@ -106,7 +110,11 @@ const DropdownMenuCheckboxItem = React.forwardRef<
>
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<DropdownMenuPrimitive.ItemIndicator>
<Check className="h-4 w-4" />
<IconComponent
name="Check"
style="h-4 w-4"
method="LUCIDE"
/>
</DropdownMenuPrimitive.ItemIndicator>
</span>
{children}
@ -129,7 +137,11 @@ const DropdownMenuRadioItem = React.forwardRef<
>
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<DropdownMenuPrimitive.ItemIndicator>
<Circle className="h-2 w-2 fill-current" />
<IconComponent
name="Circle"
style="h-2 w-2 fill-current"
method="LUCIDE"
/>
</DropdownMenuPrimitive.ItemIndicator>
</span>
{children}

20
src/frontend/src/components/ui/menubar.tsx
View file

@ -1,10 +1,10 @@
"use client";
import * as MenubarPrimitive from "@radix-ui/react-menubar";
import { Check, ChevronRight, Circle } from "lucide-react";
import * as React from "react";
import { cn } from "../../utils";
import IconComponent from "../genericIconComponent";
const MenubarMenu = MenubarPrimitive.Menu;
@ -62,7 +62,11 @@ const MenubarSubTrigger = React.forwardRef<
{...props}
>
{children}
<ChevronRight className="ml-auto h-4 w-4" />
<IconComponent
name="ChevronRight"
style="ml-auto h-4 w-4"
method="LUCIDE"
/>
</MenubarPrimitive.SubTrigger>
));
MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
@ -140,7 +144,11 @@ const MenubarCheckboxItem = React.forwardRef<
>
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<MenubarPrimitive.ItemIndicator>
<Check className="h-4 w-4" />
<IconComponent
name="Check"
style="h-4 w-4"
method="LUCIDE"
/>
</MenubarPrimitive.ItemIndicator>
</span>
{children}
@ -162,7 +170,11 @@ const MenubarRadioItem = React.forwardRef<
>
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<MenubarPrimitive.ItemIndicator>
<Circle className="h-2 w-2 fill-current" />
<IconComponent
name="Circle"
style="h-2 w-2 fill-current"
method="LUCIDE"
/>
</MenubarPrimitive.ItemIndicator>
</span>
{children}

9
src/frontend/src/modals/ApiModal/index.tsx
View file

@ -5,7 +5,7 @@ import "ace-builds/src-noconflict/theme-twilight";
import { useContext, useEffect, useRef, useState } from "react";
import { PopUpContext } from "../../contexts/popUpContext";
// import "ace-builds/webpack-resolver";
import { Check, Clipboard, Code2 } from "lucide-react";
import { Check, Clipboard } from "lucide-react";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
import AccordionComponent from "../../components/AccordionComponent";
@ -52,6 +52,7 @@ import { darkContext } from "../../contexts/darkContext";
import { TabsContext } from "../../contexts/tabsContext";
import { FlowType } from "../../types/flow/index";
import { buildTweaks, classNames } from "../../utils";
import IconComponent from "../../components/genericIconComponent";
export default function ApiModal({ flow }: { flow: FlowType }) {
const [open, setOpen] = useState(true);
@ -271,8 +272,10 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
<DialogHeader>
<DialogTitle className="flex items-center">
<span className="pr-2">Code</span>
<Code2
className="h-6 w-6 pl-1 text-gray-800 dark:text-white"
<IconComponent
method="LUCIDE"
name="Code2"
style="h-6 w-6 pl-1 text-gray-800 dark:text-white"
aria-hidden="true"
/>
</DialogTitle>

8
src/frontend/src/modals/EditNodeModal/index.tsx
View file

@ -1,4 +1,3 @@
import { Variable } from "lucide-react";
import { useContext, useRef, useState } from "react";
import CodeAreaComponent from "../../components/codeAreaComponent";
import Dropdown from "../../components/dropdownComponent";
@ -34,6 +33,7 @@ import { TabsContext } from "../../contexts/tabsContext";
import { typesContext } from "../../contexts/typesContext";
import { NodeDataType } from "../../types/flow";
import { classNames, limitScrollFieldsModal } from "../../utils";
import IconComponent from "../../components/genericIconComponent";
export default function EditNodeModal({ data }: { data: NodeDataType }) {
const [open, setOpen] = useState(true);
@ -109,7 +109,11 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
<div>
{data.node?.description}
<div className="flex pt-3">
<Variable className="edit-node-modal-variable "></Variable>
<IconComponent
name="Variable"
style="edit-node-modal-variable "
method="LUCIDE"
/>
<span className="edit-node-modal-span">Parameters</span>
</div>
</div>

9
src/frontend/src/modals/NodeModal/index.tsx
View file

@ -1,5 +1,4 @@
import { Dialog, Transition } from "@headlessui/react";
import { X } from "lucide-react";
import { Fragment, useContext, useRef, useState } from "react";
import { PopUpContext } from "../../contexts/popUpContext";
import { typesContext } from "../../contexts/typesContext";
@ -12,6 +11,7 @@ import {
toTitleCase,
} from "../../utils";
import ModalField from "./components/ModalField";
import IconComponent from "../../components/genericIconComponent";
export default function NodeModal({ data }: { data: NodeDataType }) {
const [open, setOpen] = useState(true);
@ -69,7 +69,12 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
}}
>
<span className="sr-only">Close</span>
<X className="h-6 w-6" aria-hidden="true" />
<IconComponent
name="X"
style="h-6 w-6"
aria-hidden="true"
method="LUCIDE"
/>
</button>
</div>
<div className="node-modal-dialog-icon-div">

9
src/frontend/src/modals/codeAreaModal/index.tsx
View file

@ -4,7 +4,6 @@ import "ace-builds/src-noconflict/ext-language_tools";
import "ace-builds/src-noconflict/mode-python";
import "ace-builds/src-noconflict/theme-github";
import "ace-builds/src-noconflict/theme-twilight";
import { TerminalSquare } from "lucide-react";
import { useContext, useState } from "react";
import AceEditor from "react-ace";
import { Button } from "../../components/ui/button";
@ -15,6 +14,7 @@ import { PopUpContext } from "../../contexts/popUpContext";
import { postValidateCode } from "../../controllers/API";
import { APIClassType } from "../../types/api";
import BaseModal from "../baseModal";
import IconComponent from "../../components/genericIconComponent";
export default function CodeAreaModal({
value,
@ -83,9 +83,10 @@ export default function CodeAreaModal({
<BaseModal.Header description={CODE_PROMPT_DIALOG_SUBTITLE}>
<DialogTitle className="flex items-center">
<span className="pr-2">Edit Code</span>
<TerminalSquare
strokeWidth={1.5}
className="h-6 w-6 pl-1 text-primary "
<IconComponent
name="prompts"
method="LUCIDE"
style="h-6 w-6 pl-1 text-primary "
aria-hidden="true"
/>
</DialogTitle>

9
src/frontend/src/modals/exportModal/index.tsx
View file

@ -1,4 +1,3 @@
import { Download } from "lucide-react";
import { useContext, useRef, useState } from "react";
import EditFlowSettings from "../../components/EditFlowSettingsComponent";
import { Button } from "../../components/ui/button";
@ -17,6 +16,7 @@ import { alertContext } from "../../contexts/alertContext";
import { PopUpContext } from "../../contexts/popUpContext";
import { TabsContext } from "../../contexts/tabsContext";
import { removeApiKeys } from "../../utils";
import IconComponent from "../../components/genericIconComponent";
export default function ExportModal() {
const [open, setOpen] = useState(true);
@ -46,9 +46,10 @@ export default function ExportModal() {
<DialogHeader>
<DialogTitle className="flex items-center">
<span className="pr-2">Export</span>
<Download
strokeWidth={1.5}
className="h-6 w-6 pl-1 text-foreground"
<IconComponent
name="Download"
method="LUCIDE"
style="h-6 w-6 pl-1 text-foreground"
aria-hidden="true"
/>
</DialogTitle>

8
src/frontend/src/modals/flowSettingsModal/index.tsx
View file

@ -1,4 +1,3 @@
import { Settings2 } from "lucide-react";
import { useContext, useRef, useState } from "react";
import EditFlowSettings from "../../components/EditFlowSettingsComponent";
import { Button } from "../../components/ui/button";
@ -15,6 +14,7 @@ import { SETTINGS_DIALOG_SUBTITLE } from "../../constants";
import { alertContext } from "../../contexts/alertContext";
import { PopUpContext } from "../../contexts/popUpContext";
import { TabsContext } from "../../contexts/tabsContext";
import IconComponent from "../../components/genericIconComponent";
export default function FlowSettingsModal() {
const [open, setOpen] = useState(true);
@ -51,7 +51,11 @@ export default function FlowSettingsModal() {
<DialogHeader>
<DialogTitle className="flex items-center">
<span className="pr-2">Settings </span>
<Settings2 className="mr-2 h-4 w-4 " />
<IconComponent
name="Settings2"
style="mr-2 h-4 w-4 "
method="LUCIDE"
/>
</DialogTitle>
<DialogDescription>{SETTINGS_DIALOG_SUBTITLE}</DialogDescription>
</DialogHeader>

23
src/frontend/src/modals/formModal/chatInput/index.tsx
View file

@ -1,6 +1,6 @@
import { Lock, LucideSend, Sparkles } from "lucide-react";
import { useEffect } from "react";
import { classNames } from "../../../utils";
import IconComponent from "../../../components/genericIconComponent";
export default function ChatInput({
lockChat,
@ -77,11 +77,26 @@ export default function ChatInput({
onClick={() => sendMessage()}
>
{lockChat ? (
<Lock className="form-modal-lock-icon" aria-hidden="true" />
<IconComponent
name="Lock"
style="form-modal-lock-icon"
method="LUCIDE"
aria-hidden="true"
/>
) : noInput ? (
<Sparkles className="form-modal-play-icon" aria-hidden="true" />
<IconComponent
name="Sparkles"
style="form-modal-play-icon"
method="LUCIDE"
aria-hidden="true"
/>
) : (
<LucideSend className="form-modal-send-icon " aria-hidden="true" />
<IconComponent
name="LucideSend"
style="form-modal-send-icon "
method="LUCIDE"
aria-hidden="true"
/>
)}
</button>
</div>

8
src/frontend/src/modals/formModal/chatMessage/index.tsx
View file

@ -1,5 +1,4 @@
import Convert from "ansi-to-html";
import { ChevronDown } from "lucide-react";
import { useMemo, useState } from "react";
import ReactMarkdown from "react-markdown";
import rehypeMathjax from "rehype-mathjax";
@ -13,6 +12,7 @@ import { ChatMessageType } from "../../../types/chat";
import { classNames } from "../../../utils";
import FileCard from "../fileComponent";
import { CodeBlock } from "./codeBlock";
import IconComponent from "../../../components/genericIconComponent";
export default function ChatMessage({
chat,
lockChat,
@ -160,10 +160,12 @@ export default function ChatMessage({
}}
>
Display Prompt
<ChevronDown
className={
<IconComponent
name="ChevronDown"
style={
"h-3 w-3 transition-all " + (promptOpen ? "rotate-180" : "")
}
method="LUCIDE"
/>
</button>
<span className="prose inline-block break-words text-primary dark:prose-invert">

20
src/frontend/src/modals/formModal/fileComponent/index.tsx
View file

@ -1,6 +1,6 @@
import * as base64js from "base64-js";
import { DownloadCloud, File } from "lucide-react";
import { useState } from "react";
import IconComponent from "../../../components/genericIconComponent";
export default function FileCard({ fileName, content, fileType }) {
const handleDownload = () => {
@ -41,7 +41,11 @@ export default function FileCard({ fileName, content, fileType }) {
className="file-card-modal-image-button "
onClick={handleDownload}
>
<DownloadCloud className="h-5 w-5 text-current hover:scale-110" />
<IconComponent
name="DownloadCloud"
style="h-5 w-5 text-current hover:scale-110"
method="LUCIDE"
/>
</button>
</div>
)}
@ -60,14 +64,22 @@ export default function FileCard({ fileName, content, fileType }) {
className="h-8 w-8"
/>
) : (
<File className="h-8 w-8" />
<IconComponent
name="File"
style="h-8 w-8"
method="LUCIDE"
/>
)}
<div className="file-card-modal-footer">
{" "}
<div className="file-card-modal-name">{fileName}</div>
<div className="file-card-modal-type">{fileType}</div>
</div>
<DownloadCloud className="ml-auto h-6 w-6 text-current" />
<IconComponent
name="DownloadCloud"
style="ml-auto h-6 w-6 text-current"
method="LUCIDE"
/>
</div>
</button>
);

20
src/frontend/src/modals/formModal/index.tsx
View file

@ -1,4 +1,3 @@
import { Eraser, TerminalSquare, Variable } from "lucide-react";
import { useContext, useEffect, useRef, useState } from "react";
import { alertContext } from "../../contexts/alertContext";
import { typesContext } from "../../contexts/typesContext";
@ -29,6 +28,7 @@ import {
import { Textarea } from "../../components/ui/textarea";
import { CHAT_FORM_DIALOG_SUBTITLE, THOUGHTS_ICON } from "../../constants";
import { TabsContext } from "../../contexts/tabsContext";
import IconComponent from "../../components/genericIconComponent";
export default function FormModal({
flow,
@ -396,8 +396,10 @@ export default function FormModal({
<DialogHeader>
<DialogTitle className="flex items-center">
<span className="pr-2">Chat</span>
<TerminalSquare
className="h-6 w-6 pl-1 text-gray-800 dark:text-white"
<IconComponent
name="prompts"
style="h-6 w-6 pl-1 text-gray-800 dark:text-white"
method="LUCIDE"
aria-hidden="true"
/>
</DialogTitle>
@ -407,7 +409,11 @@ export default function FormModal({
<div className="form-modal-iv-box ">
<div className="form-modal-iv-size">
<div className="file-component-arrangement">
<Variable className=" file-component-variable"></Variable>
<IconComponent
name="Variable"
style=" file-component-variable"
method="LUCIDE"
/>
<span className="file-component-variables-span text-md">
Input Variables
</span>
@ -501,14 +507,16 @@ export default function FormModal({
<div className="eraser-size">
<div className="eraser-position">
<button disabled={lockChat} onClick={() => clearChat()}>
<Eraser
className={classNames(
<IconComponent
name="Eraser"
style={classNames(
"h-5 w-5",
lockChat
? "animate-pulse text-primary"
: "text-primary hover:text-gray-600"
)}
aria-hidden="true"
method="LUCIDE"
/>
</button>
</div>

15
src/frontend/src/modals/genericModal/index.tsx
View file

@ -1,4 +1,3 @@
import { FileText, Variable } from "lucide-react";
import { useContext, useEffect, useRef, useState } from "react";
import SanitizedHTMLWrapper from "../../components/SanitizedHTMLWrapper";
import ShadTooltip from "../../components/ShadTooltipComponent";
@ -21,6 +20,7 @@ import {
varHighlightHTML,
} from "../../utils";
import BaseModal from "../baseModal";
import IconComponent from "../../components/genericIconComponent";
export default function GenericModal({
field_name = "",
@ -172,9 +172,10 @@ export default function GenericModal({
>
<DialogTitle className="flex items-center">
<span className="pr-2">{myModalTitle}</span>
<FileText
strokeWidth={1.5}
className="h-6 w-6 pl-1 text-primary "
<IconComponent
name="FileText"
method="LUCIDE"
style="h-6 w-6 pl-1 text-primary "
aria-hidden="true"
/>
</DialogTitle>
@ -225,7 +226,11 @@ export default function GenericModal({
<div className=" mr-2">
<div className="max-h-20 overflow-y-auto custom-scroll">
<div className="flex flex-wrap items-center">
<Variable className=" -ml-px mr-1 flex h-4 w-4 text-primary"></Variable>
<IconComponent
method="LUCIDE"
name="Variable"
style=" -ml-px mr-1 flex h-4 w-4 text-primary"
/>
<span className="text-md font-semibold text-primary">
Prompt Variables:
</span>

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

@ -1,4 +1,3 @@
import { GitFork, GithubIcon, Users2 } from "lucide-react";
import { useContext, useEffect, useState } from "react";
import { Button } from "../../components/ui/button";
import { alertContext } from "../../contexts/alertContext";
@ -8,6 +7,7 @@ import { useNavigate } from "react-router-dom";
import { CardComponent } from "../../components/cardComponent";
import { getExamples } from "../../controllers/API";
import { FlowType } from "../../types/flow";
import IconComponent from "../../components/genericIconComponent";
export default function CommunityPage() {
const { flows, setTabId, downloadFlows, uploadFlows, addFlow } =
useContext(TabsContext);
@ -40,7 +40,11 @@ export default function CommunityPage() {
<div className="community-page-arrangement">
<div className="community-page-nav-arrangement">
<span className="community-page-nav-title">
<Users2 className="w-6" />
<IconComponent
name="Users2"
style="w-6"
method="LUCIDE"
/>
Community Examples
</span>
<div className="community-page-nav-button">
@ -50,7 +54,11 @@ export default function CommunityPage() {
rel="noreferrer"
>
<Button variant="primary">
<GithubIcon className="main-page-nav-button" />
<IconComponent
method="LUCIDE"
name="GithubIcon"
style="main-page-nav-button"
/>
Add Your Example
</Button>
</a>
@ -79,7 +87,11 @@ export default function CommunityPage() {
});
}}
>
<GitFork className="main-page-nav-button" />
<IconComponent
name="GitFork"
style="main-page-nav-button"
method="LUCIDE"
/>
Fork Example
</Button>
}

8
src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
View file

@ -1,6 +1,6 @@
import { Disclosure } from "@headlessui/react";
import { ChevronRight } from "lucide-react";
import { DisclosureComponentType } from "../../../../types/components";
import IconComponent from "../../../../components/genericIconComponent";
export default function DisclosureComponent({
button: { title, Icon, buttons = [] },
@ -24,10 +24,12 @@ export default function DisclosureComponent({
</button>
))}
<div>
<ChevronRight
className={`${
<IconComponent
name="ChevronRight"
style={`${
open || openDisc ? "rotate-90 transform" : ""
} h-4 w-4 text-foreground`}
method="LUCIDE"
/>
</div>
</div>

42
src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
View file

@ -1,4 +1,4 @@
import { Code2, FileDown, FileUp, Menu, Save, Search } from "lucide-react";
import { Search } from "lucide-react";
import { useContext, useState } from "react";
import ShadTooltip from "../../../../components/ShadTooltipComponent";
import { Separator } from "../../../../components/ui/separator";
@ -16,6 +16,7 @@ import {
nodeNames,
} from "../../../../utils";
import DisclosureComponent from "../DisclosureComponent";
import IconComponent from "../../../../components/genericIconComponent";
export default function ExtraSidebar() {
const { data } = useContext(typesContext);
@ -68,10 +69,11 @@ export default function ExtraSidebar() {
uploadFlow();
}}
>
<FileUp
strokeWidth={1.5}
className="side-bar-button-size "
></FileUp>
<IconComponent
name="FileUp"
method="LUCIDE"
style="side-bar-button-size "
/>
</button>
</ShadTooltip>
@ -82,10 +84,11 @@ export default function ExtraSidebar() {
openPopUp(<ExportModal />);
}}
>
<FileDown
strokeWidth={1.5}
className="side-bar-button-size"
></FileDown>
<IconComponent
name="FileDown"
method="LUCIDE"
style="side-bar-button-size"
/>
</button>
</ShadTooltip>
<ShadTooltip content="Code" side="top">
@ -95,7 +98,11 @@ export default function ExtraSidebar() {
openPopUp(<ApiModal flow={flows.find((f) => f.id === tabId)} />);
}}
>
<Code2 strokeWidth={1.5} className="side-bar-button-size"></Code2>
<IconComponent
name="Code2"
method="LUCIDE"
style="side-bar-button-size"
/>
</button>
</ShadTooltip>
@ -108,13 +115,14 @@ export default function ExtraSidebar() {
}}
disabled={!isPending}
>
<Save
strokeWidth={1.5}
className={
<IconComponent
name="Save"
method="LUCIDE"
style={
"side-bar-button-size" +
(isPending ? " " : " extra-side-bar-save-disable")
}
></Save>
/>
</button>
</ShadTooltip>
</div>
@ -187,7 +195,11 @@ export default function ExtraSidebar() {
<span className="side-bar-components-text">
{data[d][t].display_name}
</span>
<Menu className="side-bar-components-icon " />
<IconComponent
name="Menu"
style="side-bar-components-icon "
method="LUCIDE"
/>
</div>
</div>
</div>

26
src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
View file

@ -1,10 +1,10 @@
import { Copy, FileText, Settings2, Trash2 } from "lucide-react";
import { useContext, useState } from "react";
import { useReactFlow } from "reactflow";
import ShadTooltip from "../../../../components/ShadTooltipComponent";
import { TabsContext } from "../../../../contexts/tabsContext";
import EditNodeModal from "../../../../modals/EditNodeModal";
import { classNames } from "../../../../utils";
import IconComponent from "../../../../components/genericIconComponent";
const NodeToolbarComponent = (props) => {
const [nodeLength, setNodeLength] = useState(
@ -36,7 +36,11 @@ const NodeToolbarComponent = (props) => {
props.deleteNode(props.data.id);
}}
>
<Trash2 className="h-4 w-4"></Trash2>
<IconComponent
name="Trash2"
style="h-4 w-4"
method="LUCIDE"
/>
</button>
</ShadTooltip>
@ -61,7 +65,11 @@ const NodeToolbarComponent = (props) => {
);
}}
>
<Copy className="h-4 w-4"></Copy>
<IconComponent
name="Copy"
style="h-4 w-4"
method="LUCIDE"
/>
</button>
</ShadTooltip>
@ -90,7 +98,11 @@ const NodeToolbarComponent = (props) => {
}
}}
>
<FileText className="h-4 w-4 "></FileText>
<IconComponent
name="FileText"
style="h-4 w-4 "
method="LUCIDE"
/>
</a>
</ShadTooltip>
@ -110,7 +122,11 @@ const NodeToolbarComponent = (props) => {
props.openPopUp(<EditNodeModal data={props.data} />);
}}
>
<Settings2 className="h-4 w-4 "></Settings2>
<IconComponent
name="Settings2"
style="h-4 w-4 "
method="LUCIDE"
/>
</button>
</ShadTooltip>

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

@ -1,10 +1,10 @@
import { Download, ExternalLink, Home, Plus, Upload } from "lucide-react";
import { useContext, useEffect } from "react";
import { Link, useNavigate } from "react-router-dom";
import { CardComponent } from "../../components/cardComponent";
import { Button } from "../../components/ui/button";
import { USER_PROJECTS_HEADER } from "../../constants";
import { TabsContext } from "../../contexts/tabsContext";
import IconComponent from "../../components/genericIconComponent";
export default function HomePage() {
const { flows, setTabId, downloadFlows, uploadFlows, addFlow, removeFlow } =
useContext(TabsContext);
@ -16,7 +16,11 @@ export default function HomePage() {
<div className="main-page-panel">
<div className="main-page-nav-arrangement">
<span className="main-page-nav-title">
<Home className="w-6" />
<IconComponent
name="Home"
style="w-6"
method="LUCIDE"
/>
{USER_PROJECTS_HEADER}
</span>
<div className="button-div-style">
@ -26,7 +30,11 @@ export default function HomePage() {
downloadFlows();
}}
>
<Download className="main-page-nav-button" />
<IconComponent
name="Download"
style="main-page-nav-button"
method="LUCIDE"
/>
Download Collection
</Button>
<Button
@ -35,7 +43,11 @@ export default function HomePage() {
uploadFlows();
}}
>
<Upload className="main-page-nav-button" />
<IconComponent
name="Upload"
style="main-page-nav-button"
method="LUCIDE"
/>
Upload Collection
</Button>
<Button
@ -46,7 +58,11 @@ export default function HomePage() {
});
}}
>
<Plus className="main-page-nav-button" />
<IconComponent
name="Plus"
style="main-page-nav-button"
method="LUCIDE"
/>
New Project
</Button>
</div>
@ -67,7 +83,11 @@ export default function HomePage() {
size="sm"
className="whitespace-nowrap "
>
<ExternalLink className="main-page-nav-button" />
<IconComponent
name="ExternalLink"
style="main-page-nav-button"
method="LUCIDE"
/>
Edit Flow
</Button>
</Link>

3
src/frontend/src/types/components/index.ts
View file

@ -164,10 +164,11 @@ export interface IVarHighlightType {
export type IconProps = {
name: string;
style: string;
};
export type IconComponentProps = {
method: "SVG" | "LUCIDE";
name: string;
className?: string;
style: string;
};

4
src/frontend/src/utils.ts
View file

@ -40,7 +40,7 @@ import {
LucideSend,
Menu,
MessageCircle,
MessageSquare,
MessagesSquare,
MoonIcon,
Paperclip,
Plus,
@ -317,7 +317,7 @@ export const nodeIconsLucide = {
Info,
CheckCircle2,
Zap,
MessageSquare,
MessagesSquare,
ExternalLink,
ChevronsUpDown,
Check,