index.tsx - AiToEarn

index.tsx

1	/**
2	* PublishDialogSkeleton 组件
3	* 功能描述: 发布弹窗账号列表初次加载与预填加载时的骨架屏占位
4	*/
5
6	import { Skeleton } from '@/components/ui/skeleton'
7
8	interface PublishDialogSkeletonProps {
9	isMobile: boolean
10	}
11
12	export function PublishDialogSkeleton({ isMobile }: PublishDialogSkeletonProps) {
13	if (isMobile) {
14	return (
15	<div className="absolute inset-0 z-50 flex flex-col bg-background p-4" aria-hidden="true">
16	<div className="mb-5 flex items-center justify-between">
17	<Skeleton className="h-6 w-28" />
18	<Skeleton className="h-8 w-8 rounded-full" />
19	</div>
20
21	<div className="mb-5 flex gap-3 overflow-hidden">
22	{Array.from({ length: 4 }).map((_, index) => (
23	<div key={index} className="flex shrink-0 flex-col items-center gap-2">
24	<Skeleton className="h-12 w-12 rounded-full" />
25	<Skeleton className="h-3 w-12" />
26	</div>
27	))}
28	</div>
29
30	<div className="flex-1 space-y-4 rounded-xl border border-border bg-card p-4">
31	<Skeleton className="h-5 w-2/5" />
32	<Skeleton className="h-28 w-full" />
33	<div className="grid grid-cols-3 gap-3">
34	<Skeleton className="aspect-square w-full rounded-lg" />
35	<Skeleton className="aspect-square w-full rounded-lg" />
36	<Skeleton className="aspect-square w-full rounded-lg" />
37	</div>
38	<Skeleton className="h-10 w-full rounded-full" />
39	</div>
40	</div>
41	)
42	}
43
44	return (
45	<div className="absolute inset-0 z-50 overflow-hidden rounded-xl bg-background" aria-hidden="true">
46	<div className="flex h-full w-full overflow-hidden rounded-xl border border-border">
47	<div className="flex w-[52%] min-w-0 flex-col border-r border-border bg-card p-4">
48	<div className="mb-4 flex items-center justify-between border-b border-border pb-3">
49	<Skeleton className="h-6 w-28" />
50	<Skeleton className="h-8 w-24 rounded-md" />
51	</div>
52
53	<div className="mb-4 rounded-xl border border-border bg-background p-4">
54	<Skeleton className="mb-4 h-24 w-full rounded-lg" />
55	<div className="flex flex-wrap gap-2">
56	{Array.from({ length: 5 }).map((_, index) => (
57	<Skeleton key={index} className="h-7 w-20 rounded-full" />
58	))}
59	</div>
60	</div>
61
62	<div className="min-h-0 flex-1 space-y-4 overflow-hidden rounded-xl border border-border bg-background p-4">
63	<div className="flex gap-2">
64	{Array.from({ length: 4 }).map((_, index) => (
65	<Skeleton key={index} className="h-8 w-16 rounded-md" />
66	))}
67	</div>
68	<div className="grid grid-cols-3 gap-4">
69	{Array.from({ length: 6 }).map((_, index) => (
70	<Skeleton key={index} className="aspect-square w-full rounded-lg" />
71	))}
72	</div>
73	</div>
74	</div>
75
76	<div className="flex min-w-0 flex-1 flex-col bg-background p-5">
77	<div className="mb-5 flex items-center justify-between">
78	<Skeleton className="h-6 w-24" />
79	<Skeleton className="h-8 w-8 rounded-full" />
80	</div>
81
82	<div className="mb-5 flex gap-3 overflow-hidden">
83	{Array.from({ length: 6 }).map((_, index) => (
84	<div key={index} className="flex shrink-0 flex-col items-center gap-2">
85	<Skeleton className="h-12 w-12 rounded-full" />
86	<Skeleton className="h-3 w-14" />
87	</div>
88	))}
89	</div>
90
91	<div className="min-h-0 flex-1 space-y-4 rounded-xl border border-border bg-card p-4">
92	<Skeleton className="h-5 w-2/5" />
93	<Skeleton className="h-40 w-full" />
94	<div className="grid grid-cols-3 gap-3">
95	{Array.from({ length: 3 }).map((_, index) => (
96	<Skeleton key={index} className="aspect-square w-full rounded-lg" />
97	))}
98	</div>
99	</div>
100
101	<div className="mt-5 flex justify-end gap-3">
102	<Skeleton className="h-10 w-24 rounded-full" />
103	<Skeleton className="h-10 w-28 rounded-full" />
104	</div>
105	</div>
106	</div>
107	</div>
108	)
109	}
110

110 lines Plain Text