Tom Boullay
97 lines
3.2 KiB
TypeScript
97 lines
3.2 KiB
TypeScript
import { SpinnerIcon, WarningIcon } from '@/components/ui/icons'
|
|
import type { GitModelMode } from '@/lib/types'
|
|
|
|
interface ActionButtonsProps {
|
|
isUploading: boolean
|
|
isChecking: boolean
|
|
isSecretEmpty: boolean
|
|
hasPendingOrErrors: boolean
|
|
allDone: boolean
|
|
hasErrors: boolean
|
|
onUpload: (gitModelMode: GitModelMode) => void
|
|
onCancel: () => void
|
|
onReset: () => void
|
|
}
|
|
|
|
export default function ActionButtons({
|
|
isUploading,
|
|
isChecking,
|
|
isSecretEmpty,
|
|
hasPendingOrErrors,
|
|
allDone,
|
|
hasErrors,
|
|
onUpload,
|
|
onCancel,
|
|
onReset,
|
|
}: ActionButtonsProps) {
|
|
const cantUpload = isSecretEmpty || isChecking
|
|
const isBusy = isUploading || isChecking
|
|
|
|
return (
|
|
<div className="flex flex-col gap-3 sm:flex-row">
|
|
{!isBusy && hasPendingOrErrors && (
|
|
<>
|
|
<button
|
|
onClick={() => onUpload('draco-glb')}
|
|
disabled={cantUpload}
|
|
className={`flex-1 font-medium text-sm py-2.5 px-6 rounded-xl transition-all duration-150
|
|
focus:outline-none focus:ring-2 focus:ring-white/50 border border-white/20
|
|
${cantUpload
|
|
? 'bg-white/30 text-gray-500 cursor-not-allowed'
|
|
: 'bg-white text-[#000000] hover:bg-gray-200'
|
|
}`}
|
|
>
|
|
Envoyer
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => onUpload('keep-gltf')}
|
|
disabled={cantUpload}
|
|
className={`flex-1 font-medium text-sm py-2.5 px-6 rounded-xl border transition-all duration-150
|
|
focus:outline-none focus:ring-2 focus:ring-white/30
|
|
${cantUpload
|
|
? 'bg-black-800 text-gray-600 border-white/10 cursor-not-allowed'
|
|
: 'bg-black-700 text-gray-300 border-black-600 hover:bg-black-600'
|
|
}`}
|
|
>
|
|
<span className="flex items-center justify-center gap-2">
|
|
<WarningIcon className="w-4 h-4 text-yellow-400" />
|
|
<span>Envoyer en GLTF</span>
|
|
</span>
|
|
</button>
|
|
</>
|
|
)}
|
|
|
|
{isBusy && (
|
|
<button
|
|
onClick={onCancel}
|
|
disabled={!isUploading}
|
|
className={`flex-1 font-medium text-sm py-2.5 px-6 rounded-xl border transition-all duration-150
|
|
disabled:opacity-50 disabled:cursor-not-allowed ${isChecking
|
|
? 'bg-black-800 text-gray-300 border-white/20 shadow-[0_0_0_1px_rgba(255,255,255,0.04)]'
|
|
: 'bg-black-700 text-gray-300 border-black-600 hover:bg-black-600'
|
|
}`}
|
|
>
|
|
{isChecking ? (
|
|
<span className="flex items-center justify-center gap-2">
|
|
<SpinnerIcon className="w-4 h-4 text-gray-400" />
|
|
<span>Verification...</span>
|
|
</span>
|
|
) : 'Annuler'}
|
|
</button>
|
|
)}
|
|
|
|
{(allDone || hasErrors) && !isBusy && (
|
|
<button
|
|
onClick={onReset}
|
|
className="flex-1 bg-black-700 text-gray-300 font-medium text-sm
|
|
py-2.5 px-6 rounded-xl border border-black-600 transition-colors duration-150
|
|
hover:bg-black-600"
|
|
>
|
|
{allDone ? 'Tout effacer' : 'Reessayer'}
|
|
</button>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|