75 lines
3.3 KiB
TypeScript
75 lines
3.3 KiB
TypeScript
import { FC } from 'react';
|
|
import { LoadingState } from '../../types/general';
|
|
|
|
interface ActionBarProps {
|
|
loadingState: LoadingState;
|
|
acceptDisabled: boolean;
|
|
accept: () => void;
|
|
reject: () => void;
|
|
importSB?: () => void;
|
|
load: () => void;
|
|
unload: () => void;
|
|
}
|
|
|
|
const ActionBar: FC<ActionBarProps> = ({ loadingState, acceptDisabled, accept, reject, importSB, load, unload }) => {
|
|
return (
|
|
<div className="relative flex w-full items-center justify-start gap-x-6">
|
|
{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={accept}
|
|
disabled={acceptDisabled}
|
|
>
|
|
Accept
|
|
</button>
|
|
)}
|
|
{/*TODO: Make GSX optional (accepted state for NON GSX) */}
|
|
{loadingState === 'loaded' && (
|
|
<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={reject}
|
|
>
|
|
Reject
|
|
</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}
|
|
>
|
|
Import from SimBrief
|
|
</button>
|
|
)}
|
|
{/*TODO: Make GSX optional */}
|
|
{/*
|
|
{loadingState === 'accepted' && (
|
|
<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}
|
|
>
|
|
Load
|
|
</button>
|
|
)}
|
|
{loadingState === 'loaded' && (
|
|
<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>
|
|
);
|
|
};
|
|
|
|
export default ActionBar;
|