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

Import shad dialog, CSS in general

Browse source
This commit is contained in:
Cristhian Zanforlin Lousa 2023-06-13 11:22:43 -03:00
commit ab0209d399
8 changed files with 180 additions and 197 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -205,15 +205,17 @@ export default function ParameterComponent({
/> />
</div> </div>
) : left === true && type === "float" ? ( ) : left === true && type === "float" ? (
<FloatComponent <div className="mt-2 w-full">
disabled={disabled} <FloatComponent
disableCopyPaste={true} disabled={disabled}
value={data.node.template[name].value ?? ""} disableCopyPaste={true}
onChange={(t) => { value={data.node.template[name].value ?? ""}
data.node.template[name].value = t; onChange={(t) => {
save(); data.node.template[name].value = t;
}} save();
/> }}
/>
</div>
) : left === true && ) : left === true &&
type === "str" && type === "str" &&
data.node.template[name].options ? ( data.node.template[name].options ? (
@ -250,15 +252,17 @@ export default function ParameterComponent({
}} }}
></InputFileComponent> ></InputFileComponent>
) : left === true && type === "int" ? ( ) : left === true && type === "int" ? (
<IntComponent <div className="mt-2 w-full">
disabled={disabled} <IntComponent
disableCopyPaste={true} disabled={disabled}
value={data.node.template[name].value ?? ""} disableCopyPaste={true}
onChange={(t) => { value={data.node.template[name].value ?? ""}
data.node.template[name].value = t; onChange={(t) => {
save(); data.node.template[name].value = t;
}} save();
/> }}
/>
</div>
) : left === true && type === "prompt" ? ( ) : left === true && type === "prompt" ? (
<PromptAreaComponent <PromptAreaComponent
disabled={disabled} disabled={disabled}

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

@ -31,7 +31,7 @@ export default function Dropdown({
className={ className={
editNode editNode
? "relative pr-9 arrow-hide placeholder:text-center border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200" ? "relative pr-9 arrow-hide placeholder:text-center border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
: "relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 text-left shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md" : "ring-1 ring-slate-300 dark:ring-slate-600 w-full py-2 pl-3 pr-10 text-left focus:ring-offset-2 focus:ring-offset-slate-400 dark:focus:ring-offset-2 dark:focus:ring-offset-gray-900 dark:focus:ring-1 dark:focus:ring-gray-600 dark:focus-visible:ring-gray-900 dark:focus-visible:ring-offset-2 focus-visible:outline-none dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
} }
> >
<span className="block truncate w-full">{internalValue}</span> <span className="block truncate w-full">{internalValue}</span>
@ -68,11 +68,8 @@ export default function Dropdown({
key={id} key={id}
className={({ active }) => className={({ active }) =>
classNames( classNames(
active && !editNode active
? "text-white bg-indigo-600 dark:bg-indigo-500 dark:text-black" ? "text-white bg-slate-400 dark:bg-white dark:text-gray-500"
: "text-gray-900",
active && editNode
? "text-white bg-gray-400 dark:bg-gray-500 dark:text-gray-500"
: "", : "",
editNode editNode
? "relative cursor-default select-none py-0.5 pl-3 pr-12 dark:text-gray-300 dark:bg-gray-800" ? "relative cursor-default select-none py-0.5 pl-3 pr-12 dark:text-gray-300 dark:bg-gray-800"
@ -95,13 +92,16 @@ export default function Dropdown({
{selected ? ( {selected ? (
<span <span
className={classNames( className={classNames(
editNode ? "text-gray-600" : "text-indigo-600",
active ? "text-white dark:text-black" : "", active ? "text-white dark:text-black" : "",
"absolute inset-y-0 right-0 flex items-center pr-4" "absolute inset-y-0 right-0 flex items-center pr-4"
)} )}
> >
<CheckIcon <CheckIcon
className="h-5 w-5" className={
active
? "h-5 w-5 dark:text-black text-black"
: "h-5 w-5 dark:text-white text-black"
}
aria-hidden="true" aria-hidden="true"
/> />
</span> </span>

2
src/frontend/src/components/floatComponent/index.tsx
View file

@ -36,7 +36,7 @@ export default function FloatComponent({
className={ className={
editNode editNode
? "text-center arrow-hide placeholder:text-center border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200" ? "text-center arrow-hide placeholder:text-center border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
: "block w-full form-input dark:bg-gray-900 arrow-hide dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" + : "block w-full form-input dark:bg-gray-900 arrow-hide dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 sm:text-sm" +
(disabled ? " bg-gray-200 dark:bg-gray-700" : "") (disabled ? " bg-gray-200 dark:bg-gray-700" : "")
} }
placeholder={ placeholder={

4
src/frontend/src/components/inputComponent/index.tsx
View file

@ -45,12 +45,12 @@ export default function InputComponent({
if (disableCopyPaste) setDisableCopyPaste(false); if (disableCopyPaste) setDisableCopyPaste(false);
}} }}
className={classNames( className={classNames(
"block w-full pr-12 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm", "block w-full pr-12 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm",
disabled ? " bg-gray-200 dark:bg-gray-700" : "", disabled ? " bg-gray-200 dark:bg-gray-700" : "",
password && !pwdVisible && myValue !== "" ? "password" : "", password && !pwdVisible && myValue !== "" ? "password" : "",
editNode editNode
? "placeholder:text-center border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200 text-center" ? "placeholder:text-center border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200 text-center"
: "focus:border-indigo-500 focus:ring-indigo-500", : "ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
password && editNode ? "pr-8" : "pr-3" password && editNode ? "pr-8" : "pr-3"
)} )}
placeholder={password && editNode ? "Key" : "Type something..."} placeholder={password && editNode ? "Key" : "Type something..."}

2
src/frontend/src/components/intComponent/index.tsx
View file

@ -57,7 +57,7 @@ export default function IntComponent({
className={ className={
editNode editNode
? "text-center arrow-hide placeholder:text-center border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200" ? "text-center arrow-hide placeholder:text-center border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
: "block w-full form-input dark:bg-gray-900 arrow-hide dark:border-gray-600 dark:text-gray-300 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" + : "block w-full form-input dark:bg-gray-900 arrow-hide dark:border-gray-600 dark:text-gray-300 rounded-md border-gray-300 shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 sm:text-sm" +
(disabled ? " bg-gray-200 dark:bg-gray-700" : "") (disabled ? " bg-gray-200 dark:bg-gray-700" : "")
} }
placeholder={editNode ? "Integer number" : "Type a integer number"} placeholder={editNode ? "Integer number" : "Type a integer number"}

6
src/frontend/src/constants.tsx
View file

@ -37,3 +37,9 @@ export const PROMPT_DIALOG_SUBTITLE = "Edit you prompt.";
* @constant * @constant
*/ */
export const TEXT_DIALOG_SUBTITLE = "Edit you text."; export const TEXT_DIALOG_SUBTITLE = "Edit you text.";
/**
* The base text for subtitle of Import Dialog
* @constant
*/
export const IMPORT_DIALOG_SUBTITLE = "Import your models or pick one example.";

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

@ -1,4 +1,3 @@
import { Dialog, Transition } from "@headlessui/react";
import { import {
XMarkIcon, XMarkIcon,
ArrowDownTrayIcon, ArrowDownTrayIcon,
@ -6,6 +5,7 @@ import {
ComputerDesktopIcon, ComputerDesktopIcon,
ArrowUpTrayIcon, ArrowUpTrayIcon,
ArrowLeftIcon, ArrowLeftIcon,
CommandLineIcon,
} from "@heroicons/react/24/outline"; } from "@heroicons/react/24/outline";
import { Fragment, useContext, useRef, useState } from "react"; import { Fragment, useContext, useRef, useState } from "react";
import { PopUpContext } from "../../contexts/popUpContext"; import { PopUpContext } from "../../contexts/popUpContext";
@ -17,6 +17,17 @@ import { alertContext } from "../../contexts/alertContext";
import LoadingComponent from "../../components/loadingComponent"; import LoadingComponent from "../../components/loadingComponent";
import { FlowType } from "../../types/flow"; import { FlowType } from "../../types/flow";
import { classNames, snakeToSpaces, toNormalCase } from "../../utils"; import { classNames, snakeToSpaces, toNormalCase } from "../../utils";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "../../components/ui/dialog";
import { Button } from "../../components/ui/button";
import { IMPORT_DIALOG_SUBTITLE } from "../../constants";
export default function ImportModal() { export default function ImportModal() {
const [open, setOpen] = useState(true); const [open, setOpen] = useState(true);
@ -52,181 +63,143 @@ export default function ImportModal() {
} }
return ( return (
<Transition.Root show={open} appear={true} as={Fragment}> <Dialog open={true} onOpenChange={setModalOpen}>
<Dialog <DialogTrigger></DialogTrigger>
as="div" <DialogContent
className="relative z-10" className={classNames(
onClose={setModalOpen} showExamples
initialFocus={ref} ? "lg:max-w-[650px] h-[600px]"
: "lg:max-w-[650px] h-[450px]"
)}
> >
<Transition.Child <DialogHeader>
as={Fragment} <DialogTitle className="flex items-center">
enter="ease-out duration-300" {showExamples && (
enterFrom="opacity-0" <>
enterTo="opacity-100" <div className="z-50 absolute top-2 left-0 hidden pt-4 pl-4 sm:block">
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
</Transition.Child>
<div className="fixed inset-0 z-10 overflow-y-auto">
<div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enterTo="opacity-100 translate-y-0 sm:scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[776px]">
<div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
<button <button
type="button" type="button"
className="rounded-md text-gray-400 hover:text-gray-500" className="rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2"
onClick={() => { onClick={() => {
setModalOpen(false); setShowExamples(false);
}} }}
> >
<span className="sr-only">Close</span> <span className="sr-only">Close</span>
<XMarkIcon className="h-6 w-6" aria-hidden="true" /> <ArrowLeftIcon
className="h-6 w-6 text-gray-800 ml-1"
aria-hidden="true"
/>
</button> </button>
</div> </div>
{showExamples && ( </>
<> )}
<div className="z-50 absolute top-2 left-0 hidden pt-4 pl-4 sm:block">
<button <span className={classNames(showExamples ? "pl-8 pr-2" : "pr-2")}>
type="button" {showExamples ? "Select an example" : "Import"}
className="rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" </span>
onClick={() => { <ArrowUpTrayIcon
setShowExamples(false); className="h-6 w-6 text-gray-800 ml-1 dark:text-white"
}} aria-hidden="true"
> />
<span className="sr-only">Close</span> </DialogTitle>
<ArrowLeftIcon className="h-6 w-6" aria-hidden="true" /> <DialogDescription>{IMPORT_DIALOG_SUBTITLE}</DialogDescription>
</button> </DialogHeader>
</div>
</> <div
)} className={classNames(
<div className="h-full w-full flex flex-col justify-center items-center"> "h-full w-full dark:bg-gray-900 overflow-y-auto scrollbar-hide",
<div className="flex w-full pb-4 z-10 justify-center shadow-sm"> showExamples && !loadingExamples
<div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-gray-900 sm:mx-0 sm:h-10 sm:w-10"> ? "flex flex-row start justify-center items-start flex-wrap overflow-auto mx-auto"
<ArrowUpTrayIcon : "flex flex-row justify-center items-center"
className="h-6 w-6 text-blue-600" )}
aria-hidden="true" >
/> {!showExamples && (
</div> <div className="flex h-full w-full justify-evenly items-center">
<div className="mt-4 text-center sm:ml-4 sm:text-left"> <ButtonBox
<Dialog.Title size="big"
as="h3" bgColor="bg-emerald-500 dark:bg-emerald-500/75"
className="text-lg font-medium dark:text-white leading-10 text-gray-900" description="Prebuilt Examples"
> icon={
{showExamples ? "Select an example" : "Import"} <DocumentDuplicateIcon className="h-10 w-10 flex-shrink-0" />
</Dialog.Title> }
</div> onClick={() => {
</div> setShowExamples(true);
<div handleExamples();
className={classNames( }}
"h-full w-full bg-gray-200 dark:bg-gray-900 gap-4 overflow-y-auto scrollbar-hide", textColor="text-emerald-500 dark:text-emerald-500/75"
showExamples && !loadingExamples title="Examples"
? "flex flex-row start justify-start items-start p-9 flex-wrap overflow-auto" ></ButtonBox>
: "flex flex-row justify-center items-center p-4" <ButtonBox
)} size="big"
> bgColor="bg-blue-500 dark:bg-blue-500/75"
{!showExamples && ( description="Import from Local"
<div className="flex h-full w-full justify-evenly items-center"> icon={
<ButtonBox <ComputerDesktopIcon className="h-10 w-10 flex-shrink-0" />
size="big" }
bgColor="bg-emerald-500 dark:bg-emerald-500/75" onClick={() => {
description="Prebuilt Examples" uploadFlow();
icon={ setModalOpen(false);
<DocumentDuplicateIcon className="h-10 w-10 flex-shrink-0" /> }}
} textColor="text-blue-500 dark:text-blue-500/75"
onClick={() => { title="Local File"
setShowExamples(true); ></ButtonBox>
handleExamples(); </div>
}} )}
textColor="text-emerald-500 dark:text-emerald-500/75" {showExamples && loadingExamples && (
title="Examples" <div className="flex align-middle justify-center items-center">
></ButtonBox> <LoadingComponent remSize={30} />
<ButtonBox </div>
size="big" )}
bgColor="bg-blue-500 dark:bg-blue-500/75" {showExamples &&
description="Import from Local" !loadingExamples &&
icon={ examples.map((example, index) => {
<ComputerDesktopIcon className="h-10 w-10 flex-shrink-0" /> return (
} <div key={example.name} className="m-2">
onClick={() => { {" "}
uploadFlow(); <ButtonBox
setModalOpen(false); size="small"
}} bgColor="bg-emerald-500 dark:bg-emerald-500/75"
textColor="text-blue-500 dark:text-blue-500/75" description={example.description ?? "Prebuilt Examples"}
title="Local File" icon={
></ButtonBox> <DocumentDuplicateIcon className="h-6 w-6 flex-shrink-0" />
</div> }
)} onClick={() => {
{showExamples && loadingExamples && ( addFlow(example);
<div className="flex align-middle justify-center items-center"> setModalOpen(false);
<LoadingComponent remSize={30} /> }}
</div> textColor="text-emerald-500 dark:text-emerald-500/75"
)} title={example.name}
{showExamples && ></ButtonBox>
!loadingExamples &&
examples.map((example, index) => {
return (
<div key={index}>
{" "}
<ButtonBox
size="small"
bgColor="bg-emerald-500 dark:bg-emerald-500/75"
description={
example.description ?? "Prebuilt Examples"
}
icon={
<DocumentDuplicateIcon className="h-6 w-6 flex-shrink-0" />
}
onClick={() => {
addFlow(example);
setModalOpen(false);
}}
textColor="text-emerald-500 dark:text-emerald-500/75"
title={example.name}
></ButtonBox>
</div>
);
})}
</div>
<div className="bg-white dark:bg-gray-800 w-full h-20 flex items-center justify-center">
<a
href="https://github.com/logspace-ai/langflow_examples"
target="_blank"
className="flex items-center justify-center text-gray-600 dark:text-gray-300"
rel="noreferrer"
>
<svg
width="24"
viewBox="0 0 98 96"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
fill="currentColor"
/>
</svg>
<span className="ml-2 ">LangFlow Examples</span>
</a>
</div>
</div> </div>
</Dialog.Panel> );
</Transition.Child> })}
</div>
</div> </div>
</Dialog>
</Transition.Root> <DialogFooter>
<div className="bg-white dark:bg-gray-800 w-full flex items-center justify-center">
<a
href="https://github.com/logspace-ai/langflow_examples"
target="_blank"
className="flex items-center justify-center text-gray-600 dark:text-gray-300"
rel="noreferrer"
>
<svg
width="24"
viewBox="0 0 98 96"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
fill="currentColor"
/>
</svg>
<span className="ml-2 ">LangFlow Examples</span>
</a>
</div>
</DialogFooter>
</DialogContent>
</Dialog>
); );
} }

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

@ -56,7 +56,7 @@ export default function ExtraSidebar() {
name="search" name="search"
id="search" id="search"
placeholder="Search nodes" placeholder="Search nodes"
className="dark:text-white focus:outline-none block w-full rounded-md py-1.5 ps-3 pr-9 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 sm:text-sm sm:leading-6 dark:ring-0 dark:bg-[#2d3747] dark:focus:outline-none" className="border-1 dark:border-slate-600 dark:border-0.5 dark:ring-0 focus-visible:dark:ring-0 focus-visible:dark:ring-offset-1 rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
onChange={(e) => { onChange={(e) => {
handleSearchInput(e.target.value); handleSearchInput(e.target.value);
setSearch(e.target.value); setSearch(e.target.value);