Skip to content

Commit 079616e

Browse files
sujatagunalesujatagunale
committed
fix: fallback layout
1 parent 3acb19d commit 079616e

File tree

2 files changed

+151
-156
lines changed

2 files changed

+151
-156
lines changed

‎app/globals.css‎

Lines changed: 56 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -362,39 +362,27 @@
362362
@apply text-xl md:text-2xl font-semibold mb-2 pl-5;
363363
}
364364

365-
.header {
366-
@apply text-purple-100;
367-
}
368-
369-
.header-row {
370-
@apply hover:bg-transparent;
371-
}
372-
373-
.head {
374-
@apply text-purple-100;
375-
}
376-
377-
.head-left {
378-
@apply pl-5 py-5;
365+
.category-cell {
366+
@apply pl-5 font-bold;
379367
}
380368

381-
.head-change {
382-
@apply pl-7;
369+
.top-gainers-cell {
370+
@apply flex gap-1 mr-5;
383371
}
384372

385-
.row {
386-
@apply md:text-base rounded-lg hover:bg-dark-400/30!;
373+
.change-header-cell {
374+
@apply font-medium;
387375
}
388376

389-
.category-cell {
390-
@apply pl-5 font-bold;
377+
.change-cell {
378+
@apply flex gap-1 items-center pl-2 text-center font-medium;
391379
}
392380

393-
.gainers-cell {
394-
@apply flex gap-1 mr-5;
381+
.market-cap-cell {
382+
@apply font-medium;
395383
}
396384

397-
.value-cell {
385+
.volume-cell {
398386
@apply font-medium;
399387
}
400388

@@ -417,37 +405,45 @@
417405
.value-skeleton-lg {
418406
@apply h-4 w-24;
419407
}
408+
409+
.change-icon {
410+
@apply h-3.5 w-3.5 rounded-full;
411+
}
420412
}
421413

422414
#coin-overview-fallback {
423415
@apply w-full h-full xl:col-span-2 px-2 bg-dark-500 rounded-xl;
424416

425-
.panel {
426-
@apply w-full h-full min-h-[420px] rounded-2xl bg-dark-500/60 p-6;
427-
}
428-
429417
.header {
430-
@apply flex items-center gap-4 mb-6;
418+
@apply flex-1 mb-2 flex gap-2 md:gap-3;
431419
}
432420

433421
.header-image {
434-
@apply h-14 w-14 rounded-full;
422+
@apply w-10 h-10 md:w-14 md:h-14 rounded-full;
435423
}
436424

437-
.header-lines {
438-
@apply flex flex-col gap-2 flex-1;
425+
.info {
426+
@apply flex flex-col gap-2;
439427
}
440428

441429
.header-line-sm {
442-
@apply h-4 w-1/3;
430+
@apply h-3 w-24 md:w-28;
443431
}
444432

445433
.header-line-lg {
446-
@apply h-8 w-1/2;
434+
@apply h-7 w-36 md:w-44;
435+
}
436+
437+
.period-button-skeleton {
438+
@apply h-7 w-9 md:w-10 rounded-sm;
439+
}
440+
441+
.chart {
442+
@apply h-[360px];
447443
}
448444

449445
.chart-skeleton {
450-
@apply h-[280px] w-full rounded-xl;
446+
@apply h-full w-full rounded-xl;
451447
}
452448
}
453449

@@ -458,56 +454,36 @@
458454
@apply text-xl md:text-2xl font-semibold mb-2 px-5;
459455
}
460456

461-
.table-wrapper {
457+
.trending-coins-table {
462458
@apply bg-dark-500 overflow-hidden;
463-
}
464-
465-
.header {
466-
@apply text-purple-100;
467-
}
468-
469-
.header-row {
470-
@apply hover:bg-transparent;
471-
}
472-
473-
.head {
474-
@apply text-purple-100;
475-
}
476-
477-
.head-left {
478-
@apply pl-4 md:pl-5 py-3;
479-
}
480-
481-
.head-right {
482-
@apply pr-4 md:pr-5;
483-
}
484459

485-
.row {
486-
@apply overflow-hidden border-none hover:bg-dark-400! rounded-lg;
487-
}
460+
.name-cell {
461+
@apply font-bold;
462+
}
488463

489-
.name-cell {
490-
@apply font-bold;
491-
}
464+
.name-link {
465+
@apply pl-1 md:pl-2 py-1 md:py-2 xl:py-1 flex items-center gap-2 md:gap-3;
466+
}
492467

493-
.name {
494-
@apply flex items-center gap-3;
495-
}
468+
.name-image {
469+
@apply rounded-full size-8 md:size-9;
470+
}
496471

497-
.name-image {
498-
@apply h-9 w-9 rounded-full;
499-
}
472+
.name-line {
473+
@apply h-4 w-24;
474+
}
500475

501-
.name-line {
502-
@apply h-4 w-24;
503-
}
476+
.change-cell {
477+
@apply font-medium py-4 pr-3 md:pr-5;
478+
}
504479

505-
.change-cell {
506-
@apply font-medium py-4 pr-3 md:pr-5;
507-
}
480+
.price-cell {
481+
@apply font-bold pr-5 text-sm max-w-full truncate;
482+
}
508483

509-
.price-cell {
510-
@apply font-bold pr-5 text-sm max-w-full truncate;
484+
.price-change {
485+
@apply flex gap-1 items-center text-sm font-medium;
486+
}
511487
}
512488

513489
.change-line {
@@ -517,6 +493,10 @@
517493
.price-line {
518494
@apply h-4 w-20;
519495
}
496+
497+
.change-icon {
498+
@apply h-3.5 w-3.5 rounded-full;
499+
}
520500
}
521501

522502
#coin-details-page {

‎components/home/Fallback.tsx‎

Lines changed: 95 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,102 +1,117 @@
1+
import { DataTable } from '@/components/DataTable';
12
import { Skeleton } from '../ui/skeleton';
2-
import {
3-
Table,
4-
TableBody,
5-
TableCell,
6-
TableHead,
7-
TableHeader,
8-
TableRow,
9-
} from '../ui/table';
103

114
export const CategoriesFallback = () => (
125
<div id='categories-fallback' className='custom-scrollbar'>
136
<h4>Top Categories</h4>
14-
<Table>
15-
<TableHeader className='header'>
16-
<TableRow className='header-row'>
17-
<TableHead className='head head-left'>Category</TableHead>
18-
<TableHead className='head'>Top Gainers</TableHead>
19-
<TableHead className='head head-change'>24h Change</TableHead>
20-
<TableHead className='head'>Market Cap</TableHead>
21-
<TableHead className='head'>24h Volume</TableHead>
22-
</TableRow>
23-
</TableHeader>
24-
<TableBody>
25-
{Array.from({ length: 6 }).map((_, index) => (
26-
<TableRow key={index} className='row'>
27-
<TableCell className='category-cell'>
28-
<Skeleton className='skeleton category-skeleton' />
29-
</TableCell>
30-
<TableCell className='gainers-cell'>
31-
{Array.from({ length: 3 }).map((__, coinIndex) => (
32-
<Skeleton
33-
key={coinIndex}
34-
className='skeleton coin-skeleton'
35-
/>
36-
))}
37-
</TableCell>
38-
<TableCell className='value-cell'>
7+
<DataTable
8+
tableClassName='mt-3'
9+
columns={[
10+
{
11+
header: 'Category',
12+
cellClassName: 'category-cell',
13+
cell: () => <Skeleton className='skeleton category-skeleton' />,
14+
},
15+
{
16+
header: 'Top Gainers',
17+
cellClassName: 'top-gainers-cell',
18+
cell: () =>
19+
Array.from({ length: 3 }).map((_, coinIndex) => (
20+
<Skeleton key={coinIndex} className='skeleton coin-skeleton' />
21+
)),
22+
},
23+
{
24+
header: '24h Change',
25+
cellClassName: 'change-header-cell',
26+
cell: () => (
27+
<div className='change-cell'>
3928
<Skeleton className='skeleton value-skeleton-sm' />
40-
</TableCell>
41-
<TableCell className='value-cell'>
42-
<Skeleton className='skeleton value-skeleton-md' />
43-
</TableCell>
44-
<TableCell className='value-cell'>
45-
<Skeleton className='skeleton value-skeleton-lg' />
46-
</TableCell>
47-
</TableRow>
48-
))}
49-
</TableBody>
50-
</Table>
29+
<Skeleton className='skeleton change-icon' />
30+
</div>
31+
),
32+
},
33+
{
34+
header: 'Market Cap',
35+
cellClassName: 'market-cap-cell',
36+
cell: () => <Skeleton className='skeleton value-skeleton-md' />,
37+
},
38+
{
39+
header: '24h Volume',
40+
cellClassName: 'volume-cell',
41+
cell: () => <Skeleton className='skeleton value-skeleton-lg' />,
42+
},
43+
]}
44+
data={Array.from({ length: 6 })}
45+
rowKey={(_, index) => index}
46+
/>
5147
</div>
5248
);
5349

5450
export const CoinOverviewFallback = () => (
5551
<div id='coin-overview-fallback'>
56-
<div className='panel'>
57-
<div className='header'>
58-
<Skeleton className='skeleton header-image' />
59-
<div className='header-lines'>
60-
<Skeleton className='skeleton header-line-sm' />
61-
<Skeleton className='skeleton header-line-lg' />
52+
<div id='candlestick-chart' className='is-fallback'>
53+
<div className='chart-header'>
54+
<div className='flex-1'>
55+
<div className='header'>
56+
<Skeleton className='skeleton header-image' />
57+
<div className='info'>
58+
<Skeleton className='skeleton header-line-sm' />
59+
<Skeleton className='skeleton header-line-lg' />
60+
</div>
61+
</div>
6262
</div>
63+
<div className='button-group'>
64+
{Array.from({ length: 7 }).map((_, index) => (
65+
<Skeleton
66+
key={index}
67+
className='skeleton period-button-skeleton'
68+
/>
69+
))}
70+
</div>
71+
</div>
72+
<div className='chart'>
73+
<Skeleton className='skeleton chart-skeleton' />
6374
</div>
64-
<Skeleton className='skeleton chart-skeleton' />
6575
</div>
6676
</div>
6777
);
6878

6979
export const TrendingCoinsFallback = () => (
7080
<div id='trending-coins-fallback'>
7181
<h4>Trending Coins</h4>
72-
<div className='table-wrapper custom-scrollbar'>
73-
<Table>
74-
<TableHeader className='header'>
75-
<TableRow className='header-row'>
76-
<TableHead className='head head-left'>Name</TableHead>
77-
<TableHead className='head'>24h Change</TableHead>
78-
<TableHead className='head head-right'>Price</TableHead>
79-
</TableRow>
80-
</TableHeader>
81-
<TableBody>
82-
{Array.from({ length: 6 }).map((_, index) => (
83-
<TableRow key={index} className='row'>
84-
<TableCell className='name-cell'>
85-
<div className='name'>
86-
<Skeleton className='skeleton name-image' />
87-
<Skeleton className='skeleton name-line' />
88-
</div>
89-
</TableCell>
90-
<TableCell className='change-cell'>
91-
<Skeleton className='skeleton change-line' />
92-
</TableCell>
93-
<TableCell className='price-cell'>
94-
<Skeleton className='skeleton price-line' />
95-
</TableCell>
96-
</TableRow>
97-
))}
98-
</TableBody>
99-
</Table>
100-
</div>
82+
<DataTable
83+
tableClassName='trending-coins-table mt-3'
84+
headerCellClassName='py-3!'
85+
bodyCellClassName='py-2!'
86+
columns={[
87+
{
88+
header: 'Name',
89+
cellClassName: 'name-cell',
90+
cell: () => (
91+
<div className='name-link'>
92+
<Skeleton className='skeleton name-image' />
93+
<Skeleton className='skeleton name-line' />
94+
</div>
95+
),
96+
},
97+
{
98+
header: '24h Change',
99+
cellClassName: 'change-cell',
100+
cell: () => (
101+
<div className='price-change'>
102+
<Skeleton className='skeleton change-line' />
103+
<Skeleton className='skeleton change-icon' />
104+
</div>
105+
),
106+
},
107+
{
108+
header: 'Price',
109+
cellClassName: 'price-cell',
110+
cell: () => <Skeleton className='skeleton price-line' />,
111+
},
112+
]}
113+
data={Array.from({ length: 6 })}
114+
rowKey={(_, index) => index}
115+
/>
101116
</div>
102117
);

0 commit comments

Comments
 (0)