44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
import { Show } from 'solid-js';
|
|
import { CardPreview } from './CardPreview';
|
|
import type { DeckStore } from './hooks/deckStore';
|
|
|
|
export interface DeckContentProps {
|
|
store: DeckStore;
|
|
isLoading: boolean;
|
|
}
|
|
|
|
/**
|
|
* 卡牌预览内容区域：错误/加载/卡牌预览/空状态
|
|
*/
|
|
export function DeckContent(props: DeckContentProps) {
|
|
return (
|
|
<>
|
|
{/* 错误提示 */}
|
|
<Show when={props.store.state.error}>
|
|
<div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded mb-4">
|
|
{props.store.state.error}
|
|
</div>
|
|
</Show>
|
|
|
|
{/* 加载状态 */}
|
|
<Show when={props.isLoading}>
|
|
<div class="text-center text-gray-500 py-8">
|
|
加载卡牌数据中...
|
|
</div>
|
|
</Show>
|
|
|
|
{/* 卡牌预览 */}
|
|
<Show when={!props.isLoading && props.store.state.cards.length > 0 && !props.store.state.error}>
|
|
<CardPreview store={props.store} />
|
|
</Show>
|
|
|
|
{/* 空状态 */}
|
|
<Show when={!props.isLoading && props.store.state.cards.length === 0 && !props.store.state.error}>
|
|
<div class="text-center text-gray-500 py-8">
|
|
暂无卡牌数据
|
|
</div>
|
|
</Show>
|
|
</>
|
|
);
|
|
}
|