changed knowledge search input design
This commit is contained in:
parent
185f50af2f
commit
13040a4b8f
1 changed files with 90 additions and 90 deletions
|
|
@ -1,15 +1,15 @@
|
||||||
import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
|
import { ArrowRight, Search, X } from "lucide-react";
|
||||||
import {
|
import {
|
||||||
ChangeEvent,
|
type ChangeEvent,
|
||||||
FormEvent,
|
type FormEvent,
|
||||||
useCallback,
|
useCallback,
|
||||||
useEffect,
|
useEffect,
|
||||||
useState,
|
useState,
|
||||||
} from "react";
|
} from "react";
|
||||||
import { filterAccentClasses } from "./knowledge-filter-panel";
|
|
||||||
import { ArrowRight, Search, X } from "lucide-react";
|
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
|
import { filterAccentClasses } from "./knowledge-filter-panel";
|
||||||
|
|
||||||
export const KnowledgeSearchInput = () => {
|
export const KnowledgeSearchInput = () => {
|
||||||
const {
|
const {
|
||||||
|
|
@ -27,7 +27,7 @@ export const KnowledgeSearchInput = () => {
|
||||||
if (e) e.preventDefault();
|
if (e) e.preventDefault();
|
||||||
setQueryOverride(searchQueryInput.trim());
|
setQueryOverride(searchQueryInput.trim());
|
||||||
},
|
},
|
||||||
[searchQueryInput, setQueryOverride]
|
[searchQueryInput, setQueryOverride],
|
||||||
);
|
);
|
||||||
|
|
||||||
// Reset the query text when the selected filter changes
|
// Reset the query text when the selected filter changes
|
||||||
|
|
@ -48,7 +48,7 @@ export const KnowledgeSearchInput = () => {
|
||||||
filterAccentClasses[parsedFilterData?.color || "zinc"]
|
filterAccentClasses[parsedFilterData?.color || "zinc"]
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<span className="truncate">{selectedFilter?.name}</span>
|
<span className="truncate text-xs font-medium">{selectedFilter?.name}</span>
|
||||||
<X
|
<X
|
||||||
aria-label="Remove filter"
|
aria-label="Remove filter"
|
||||||
className="h-4 w-4 flex-shrink-0 cursor-pointer"
|
className="h-4 w-4 flex-shrink-0 cursor-pointer"
|
||||||
|
|
@ -88,7 +88,7 @@ export const KnowledgeSearchInput = () => {
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
className={cn(
|
className={cn(
|
||||||
"h-full rounded-sm !px-1.5 !py-0 hidden group-focus-within/input:block",
|
"h-full rounded-sm !px-1.5 !py-0 hidden group-focus-within/input:block",
|
||||||
searchQueryInput && "block"
|
searchQueryInput && "block",
|
||||||
)}
|
)}
|
||||||
type="submit"
|
type="submit"
|
||||||
>
|
>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue