changed knowledge search input design

This commit is contained in:
Lucas Oliveira 2025-10-23 16:36:13 -03:00
parent 185f50af2f
commit 13040a4b8f

View file

@ -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"
> >