rushilwiz/compass
1
0
Fork 0
mirror of https://github.com/cssgunc/compass.git synced 2025-04-06 20:50:17 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add non-functional search bar

Browse Source 
Does not do anything at the moment.
This commit is contained in:
Andy Chan (12beesinatrenchcoat) 2024-03-31 18:47:12 -04:00
parent af8055002c
commit d82913a45d
1 changed files with 33 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
compass/components/Table/TableAction.tsx
View File

@ -1,12 +1,36 @@
import { MagnifyingGlassIcon } from "@heroicons/react/24/solid";
import { useRef, useState } from "react";
export const TableAction = () => {
return (
<div className="w-40 flex flex-row items-center justify-between text-xs font-medium text-gray-500 p-2">
<span>Filter</span>
<span>Sort</span>
<span className="w-4 h-4"><MagnifyingGlassIcon /></span>
</div>
);
};
const searchInput = useRef<HTMLInputElement>(null);
const [searchActive, setSearchActive] = useState(false);
const activateSearch = () => {
setSearchActive(true);
if (searchInput.current === null) { return; }
searchInput.current.focus();
searchInput.current.addEventListener("focusout", () => {
if (searchInput.current?.value.trim() === "") {
searchInput.current.value = "";
deactivateSearch();
}
})
}
const deactivateSearch = () => setSearchActive(false);
return (
<div className="w-auto flex flex-row gap-x-0.5 items-center justify-between text-xs font-medium text-gray-500 p-2">
<span className="p-1 rounded hover:bg-gray-100">Filter</span>
<span className="p-1 rounded hover:bg-gray-100">Sort</span>
<span className="p-1 rounded hover:bg-gray-100" onClick={() => activateSearch()}>
<MagnifyingGlassIcon className="w-4 h-4 inline" />
</span>
<input
ref={searchInput}
className={"outline-none transition-all duration-300 " + (searchActive ? "w-48" : "w-0")}
type="text"
name="search"
placeholder="Type to search..." />
</div>
);
};