99 lines
2.7 KiB
TypeScript
99 lines
2.7 KiB
TypeScript
import { cn } from '../lib/utils';
|
|
|
|
interface EmptyStateProps {
|
|
icon?: React.ReactNode;
|
|
title: string;
|
|
description?: string;
|
|
action?: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
export function EmptyState({ icon, title, description, action, className }: EmptyStateProps) {
|
|
return (
|
|
<div className={cn('flex flex-col items-center justify-center py-12 text-center', className)}>
|
|
{icon && <div className="mb-4 text-text-muted opacity-40">{icon}</div>}
|
|
<h3 className="text-sm font-medium text-text-primary mb-1">{title}</h3>
|
|
{description && <p className="text-xs text-text-muted max-w-xs">{description}</p>}
|
|
{action && <div className="mt-4">{action}</div>}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function NoRoomsState({ onCreate }: { onCreate?: () => void }) {
|
|
return (
|
|
<EmptyState
|
|
icon={
|
|
<svg
|
|
className="w-12 h-12"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="1.5"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
>
|
|
<rect x="3" y="3" width="7" height="7" />
|
|
<rect x="14" y="3" width="7" height="7" />
|
|
<rect x="14" y="14" width="7" height="7" />
|
|
<rect x="3" y="14" width="7" height="7" />
|
|
</svg>
|
|
}
|
|
title="暂无公开房间"
|
|
description="创建第一个房间开始游戏，或等待其他玩家创建"
|
|
action={
|
|
onCreate && (
|
|
<button onClick={onCreate} className="btn-primary">
|
|
创建房间
|
|
</button>
|
|
)
|
|
}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export function NoFriendsState() {
|
|
return (
|
|
<EmptyState
|
|
icon={
|
|
<svg
|
|
className="w-12 h-12"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="1.5"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
>
|
|
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
|
|
<circle cx="9" cy="7" r="4" />
|
|
<path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" />
|
|
</svg>
|
|
}
|
|
title="还没有好友"
|
|
description="在右侧输入用户名添加好友，一起联机游戏"
|
|
/>
|
|
);
|
|
}
|
|
|
|
export function NoRequestsState() {
|
|
return (
|
|
<EmptyState
|
|
icon={
|
|
<svg
|
|
className="w-10 h-10"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="1.5"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
>
|
|
<path d="M22 12h-4l-3 9L9 3l-3 9H2" />
|
|
</svg>
|
|
}
|
|
title="暂无好友请求"
|
|
description="当有人想添加你为好友时，请求会显示在这里"
|
|
/>
|
|
);
|
|
}
|