59 lines
1.4 KiB
TypeScript
59 lines
1.4 KiB
TypeScript
import SearchField from "@/components/SearchField";
|
|
import { Loader2, Plus, RefreshCw } from "lucide-react";
|
|
|
|
interface DatabaseToolbarProps {
|
|
search: string;
|
|
syncing: boolean;
|
|
onSearchChange: (value: string) => void;
|
|
onSync: () => void | Promise<void>;
|
|
onAdd: () => void;
|
|
}
|
|
|
|
export default function DatabaseToolbar({
|
|
search,
|
|
syncing,
|
|
onSearchChange,
|
|
onSync,
|
|
onAdd,
|
|
}: DatabaseToolbarProps) {
|
|
return (
|
|
<div
|
|
className="card ui-responsive-toolbar"
|
|
style={{
|
|
padding: "12px 16px",
|
|
}}
|
|
>
|
|
<SearchField
|
|
placeholder="Search databases..."
|
|
value={search}
|
|
onChange={(event) => onSearchChange(event.target.value)}
|
|
containerStyle={{ flex: "1 1 360px", minWidth: 240 }}
|
|
/>
|
|
<div className="ui-toolbar-actions" style={{}}>
|
|
<button
|
|
type="button"
|
|
className="btn btn-ghost"
|
|
style={{ fontSize: 12 }}
|
|
onClick={() => void onSync()}
|
|
disabled={syncing}
|
|
>
|
|
{syncing ? (
|
|
<Loader2 size={12} className="animate-spin" />
|
|
) : (
|
|
<RefreshCw size={12} />
|
|
)}
|
|
Sync from Docker
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="btn btn-primary"
|
|
style={{ fontSize: 12 }}
|
|
onClick={onAdd}
|
|
>
|
|
<Plus size={12} /> Add Database
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|