1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
|
import { AnimatePresence, motion } from "framer-motion";
import { ArrowLeftIcon } from "@heroicons/react/24/outline";
import useCommandStore from "../../../store";
import { CommandInput } from "cmdk";
function CommandSearch() {
const { page, search, searchInputRef, setSearch, goBack } = useCommandStore(
(state) => {
return {
page: state.page,
setPages: state.setPages,
search: state.search,
setSearch: state.setSearch,
searchInputRef: state.searchInputRef,
goBack: state.backPage,
};
},
);
return (
<div className="h-14 flex items-center border-b border-border">
<motion.div
animate={{ opacity: !page ? 0 : 1, width: !page ? 0 : 130 }}
transition={{ ease: "easeOut" }}
className="overflow-hidden"
>
<AnimatePresence>
{page && (
<div className="shrink-0 flex items-center">
{/* @ts-ignore */}
<button
className="flex items-center shrink-0 text-icon gap-2 px-4"
onClick={goBack}
>
<ArrowLeftIcon className="size-4 " />
Go back
</button>
<motion.span
initial={{ opacity: 0, height: 0 }}
animate={{ opacity: 1, height: 24 }}
exit={{ opacity: 0, height: 0 }}
transition={{ delay: 0.3 }}
className="w-[1.5px] bg-white/30 shrink-0"
/>
</div>
)}
</AnimatePresence>
</motion.div>
<CommandInput
autoFocus
ref={searchInputRef}
value={search}
onValueChange={setSearch}
placeholder="Search for tools or simply ask anything..."
className="w-full h-full bg-transparent outline-none px-4 placeholder:text-placeholder text-[15px]"
/>
</div>
);
}
export default CommandSearch;
|