39 lines
1.5 KiB
TypeScript
39 lines
1.5 KiB
TypeScript
import { FC } from 'react';
|
|
import { LoadingState } from '../../types/general';
|
|
|
|
interface ActionBarProps {
|
|
loadingState: LoadingState;
|
|
loadDisabled: boolean;
|
|
GSXSync: boolean;
|
|
load: () => void;
|
|
unload: () => void;
|
|
}
|
|
|
|
const ActionBar: FC<ActionBarProps> = ({ loadingState, loadDisabled, GSXSync, 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>
|
|
);
|
|
};
|
|
|
|
export default ActionBar;
|