fix: prop types in combobox

This commit is contained in:
Dhravya Shah 2024-08-12 12:40:28 -07:00
parent 90f7850f25
commit 97daa46197
2 changed files with 17 additions and 8 deletions

View file

@ -116,6 +116,8 @@ function QueryInput({
<Divider />
<div className="flex justify-between items-center gap-6 h-auto bg-secondary rounded-b-3xl border-2 border-border">
<Combobox
selectedSpaces={selectedSpaces}
setSelectedSpaces={setSelectedSpaces}
options={options}
className="rounded-bl-3xl bg-[#3C464D] w-44"
onSelect={(v) =>
@ -146,10 +148,7 @@ function QueryInput({
]);
setSelectedSpaces((prev) => [...prev, creationTask.data!]);
} else {
toast.error(
"Space creation failed: " + creationTask.error ??
"Unknown error",
);
toast.error("Space creation failed: " + creationTask.error);
}
}}
placeholder="Chat with a space..."

View file

@ -9,6 +9,7 @@ import {
CommandItem,
CommandList,
} from "./command";
import { cn } from "../lib/utils";
interface Option {
value: string;
@ -21,6 +22,8 @@ interface ComboboxWithCreateProps {
onSubmit: (newName: string) => void;
selectedSpaces: number[];
setSelectedSpaces: React.Dispatch<React.SetStateAction<number[]>>;
className?: string;
placeholder?: string;
}
const ComboboxWithCreate = ({
@ -29,6 +32,8 @@ const ComboboxWithCreate = ({
onSubmit,
selectedSpaces,
setSelectedSpaces,
className,
placeholder,
}: ComboboxWithCreateProps) => {
const [inputValue, setInputValue] = useState("");
@ -52,7 +57,10 @@ const ComboboxWithCreate = ({
return (
<Command
className={`group flex bg-[#2F353C] h-min rounded-md ${selectedSpaces.length > 0 && "p-2"} transition-all mt-4 mb-4`}
className={cn(
`group flex bg-[#2F353C] h-min rounded-md ${selectedSpaces.length > 0 && "p-2"} transition-all mt-4 mb-4`,
className,
)}
>
<div className="inline-flex flex-wrap gap-1">
{selectedSpaces.map((spaceId) => (
@ -73,10 +81,12 @@ const ComboboxWithCreate = ({
<CommandInput
onChangeCapture={handleInputChange}
onKeyDown={handleKeyDown}
placeholder="Select or create a new space."
placeholder={placeholder}
value={inputValue}
/>
<CommandList className={`z-10 translate-x-5 opacity-0 transition-all absolute group-focus-within:opacity-100 bg-secondary p-2 rounded-b-xl max-w-64 ${selectedSpaces.length > 0 ?"translate-y-20": "translate-y-12"}`}>
<CommandList
className={`z-10 translate-x-5 opacity-0 transition-all absolute group-focus-within:opacity-100 bg-secondary p-2 rounded-b-xl max-w-64 ${selectedSpaces.length > 0 ? "translate-y-20" : "translate-y-12"}`}
>
<CommandGroup className="hidden group-focus-within:block">
{filteredOptions.map((option) => (
<CommandItem
@ -107,4 +117,4 @@ const ComboboxWithCreate = ({
);
};
export default ComboboxWithCreate;
export default ComboboxWithCreate;