CronJobsTab.Header.tsx63 lines · main

1	import { RefreshCw, Search, X } from 'lucide-react'
2	import type { KeyboardEvent } from 'react'
3	import { Button } from 'ui'
4	import { Input } from 'ui-patterns/DataInputs/Input'
5
6	interface CronJobsTabHeaderProps {
7	search: string
8	isRefreshing: boolean
9	onSearchChange: (value: string) => void
10	onSearchSubmit: () => void
11	onClearSearch: () => void
12	onRefresh: () => void
13	onCreateJob: () => void
14	}
15
16	export const CronJobsTabHeader = ({
17	search,
18	isRefreshing,
19	onSearchChange,
20	onSearchSubmit,
21	onClearSearch,
22	onRefresh,
23	onCreateJob,
24	}: CronJobsTabHeaderProps) => {
25	const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
26	if (event.key === 'Enter' || event.code === 'NumpadEnter') {
27	onSearchSubmit()
28	}
29	}
30
31	return (
32	<div className="bg-surface-200 py-3 px-10 flex items-center justify-between flex-wrap gap-y-2">
33	<Input
34	size="tiny"
35	className="w-52"
36	placeholder="Search for a job"
37	icon={<Search />}
38	value={search}
39	onChange={(e) => onSearchChange(e.target.value)}
40	onKeyDown={handleKeyDown}
41	actions={[
42	search && (
43	<Button
44	key="clear-search"
45	size="tiny"
46	type="text"
47	icon={<X />}
48	onClick={onClearSearch}
49	className="p-0 h-5 w-5"
50	/>
51	),
52	]}
53	/>
54
55	<div className="flex items-center gap-x-2">
56	<Button type="default" icon={<RefreshCw />} loading={isRefreshing} onClick={onRefresh}>
57	Refresh
58	</Button>
59	<Button onClick={onCreateJob}>Create job</Button>
60	</div>
61	</div>
62	)
63	}