44 lines
1.5 KiB
TypeScript
44 lines
1.5 KiB
TypeScript
import { Show } from 'solid-js';
|
|
import type { DeckStore } from './hooks/deckStore';
|
|
|
|
export interface PrintPreviewFooterProps {
|
|
store: DeckStore;
|
|
}
|
|
|
|
export function PrintPreviewFooter(props: PrintPreviewFooterProps) {
|
|
const { store } = props;
|
|
|
|
return (
|
|
<Show when={store.state.exportProgress > 0 || store.state.exportError}>
|
|
<div class="fixed bottom-0 left-0 right-0 z-50 bg-white shadow-lg rounded-lg mx-4 mb-4 px-4 py-3">
|
|
<Show when={!store.state.exportError}>
|
|
<div class="flex items-center gap-4">
|
|
<span class="text-sm text-gray-600">导出进度：</span>
|
|
<div class="flex-1 h-2 bg-gray-200 rounded-full overflow-hidden">
|
|
<div
|
|
class="h-full bg-blue-600 transition-all duration-200"
|
|
style={{ width: `${store.state.exportProgress}%` }}
|
|
/>
|
|
</div>
|
|
<span class="text-sm font-medium text-gray-700">{store.state.exportProgress}%</span>
|
|
</div>
|
|
</Show>
|
|
<Show when={store.state.exportError}>
|
|
<div class="flex items-center justify-between gap-4">
|
|
<div class="flex items-center gap-2 text-red-600">
|
|
<span>❌</span>
|
|
<span class="text-sm font-medium">{store.state.exportError}</span>
|
|
</div>
|
|
<button
|
|
onClick={() => store.actions.clearExportError()}
|
|
class="text-gray-500 hover:text-gray-700 cursor-pointer"
|
|
>
|
|
✕
|
|
</button>
|
|
</div>
|
|
</Show>
|
|
</div>
|
|
</Show>
|
|
);
|
|
}
|