54 lines
2.2 KiB
TypeScript

import { FC } from 'react';
import { LoadingState } from '../../types/general';
interface ActionBarProps {
loadingState: LoadingState;
loadDisabled: boolean;
GSXSync: boolean;
GSXActive: boolean;
importSB?: () => void;
load: () => void;
unload: () => void;
}
const ActionBar: FC<ActionBarProps> = ({ loadingState, loadDisabled, GSXSync, GSXActive, importSB, load, unload }) => {
return (
<div className="relative flex w-full items-center justify-start gap-x-6">
{loadingState === 'preview' && !GSXSync && (
<button
className="middle none center rounded-lg bg-green-600 px-6 py-3 font-sans text-xs font-bold uppercase text-white shadow-md shadow-green-500/20 transition-all hover:shadow-lg hover:shadow-green-500/40 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
data-ripple-light="true"
onClick={load}
disabled={loadDisabled}
>
Load
</button>
)}
{loadingState === 'loaded' && !GSXSync && (
<button
className="middle none center rounded-lg bg-red-600 px-6 py-3 font-sans text-xs font-bold uppercase text-white shadow-md shadow-red-500/20 transition-all hover:shadow-lg hover:shadow-red-500/40 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
data-ripple-light="true"
onClick={unload}
>
Unload
</button>
)}
<div className="grow" />
{!!importSB && loadingState === 'preview' && (
<button
className="middle none center rounded-lg bg-green-600 px-6 py-3 font-sans text-xs font-bold uppercase text-white shadow-md shadow-green-500/20 transition-all hover:shadow-lg hover:shadow-green-500/40 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
data-ripple-light="true"
onClick={importSB}
disabled={GSXActive}
>
Import from SimBrief
</button>
)}
</div>
);
};
export default ActionBar;