Skip to content

Commit b74bed9

Browse files
izadoesdevizadoesdev
committed
feat: improve consistency in data table full screen and search UI
1 parent 1049931 commit b74bed9

File tree

1 file changed

+35
-35
lines changed

1 file changed

+35
-35
lines changed

‎apps/dashboard/components/analytics/data-table.tsx‎

Lines changed: 35 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
1-
import { ArrowsOutSimpleIcon, XIcon } from '@phosphor-icons/react';
1+
import {
2+
ArrowsOutSimpleIcon,
3+
XIcon,
4+
ArrowDownIcon,
5+
ArrowUpIcon,
6+
ArrowsDownUpIcon,
7+
DatabaseIcon,
8+
MagnifyingGlassIcon,
9+
} from '@phosphor-icons/react';
210
import {
311
type ColumnDef,
412
flexRender,
@@ -9,14 +17,6 @@ import {
917
useReactTable,
1018
} from '@tanstack/react-table';
1119
import { AnimatePresence, motion } from 'framer-motion';
12-
import {
13-
ArrowDown,
14-
ArrowUp,
15-
ArrowUpDown,
16-
DatabaseIcon,
17-
Search,
18-
X,
19-
} from 'lucide-react';
2020
import React, {
2121
Fragment,
2222
useCallback,
@@ -345,20 +345,20 @@ function FullScreenTable<TData extends { name: string | number }, TValue>({
345345
<div className="relative w-full max-w-xs">
346346
<Input
347347
aria-label="Search table"
348-
className="h-7 w-full border-0 bg-muted/30 pr-2 pl-7 text-xs focus:bg-background focus:ring-1 focus:ring-primary/20"
348+
className="h-8 w-full border border-border/50 bg-muted/30 pr-2 pl-7 text-xs focus:bg-background focus:ring-1 focus:ring-primary/20"
349349
onChange={(event) => setGlobalFilter(event.target.value)}
350350
placeholder="Filter data..."
351351
value={globalFilter ?? ''}
352352
/>
353-
<Search className="-translate-y-1/2 absolute top-1/2 left-2 h-3 w-3 transform text-muted-foreground/50" />
353+
<MagnifyingGlassIcon className="-translate-y-1/2 absolute top-1/2 left-2 h-3 w-3 transform text-muted-foreground/50" />
354354
{globalFilter && (
355355
<button
356356
aria-label="Clear search"
357357
className="-translate-y-1/2 absolute top-1/2 right-2 rounded p-1 hover:bg-muted/30 focus:outline-none"
358358
onClick={() => setGlobalFilter('')}
359359
type="button"
360360
>
361-
<X className="h-3 w-3 text-muted-foreground/60" />
361+
<XIcon className="h-3 w-3 text-muted-foreground/60" />
362362
</button>
363363
)}
364364
</div>
@@ -416,13 +416,13 @@ function FullScreenTable<TData extends { name: string | number }, TValue>({
416416
{header.column.getCanSort() && (
417417
<div className="flex h-3 w-3 flex-col items-center justify-center">
418418
{!header.column.getIsSorted() && (
419-
<ArrowUpDown className="h-3 w-3 text-muted-foreground/40 transition-colors group-hover:text-muted-foreground/70" />
419+
<ArrowsDownUpIcon className="h-3 w-3 text-muted-foreground/40 transition-colors group-hover:text-muted-foreground/70" />
420420
)}
421421
{header.column.getIsSorted() === 'asc' && (
422-
<ArrowUp className="h-3 w-3 text-primary" />
422+
<ArrowUpIcon className="h-3 w-3 text-primary" />
423423
)}
424424
{header.column.getIsSorted() === 'desc' && (
425-
<ArrowDown className="h-3 w-3 text-primary" />
425+
<ArrowDownIcon className="h-3 w-3 text-primary" />
426426
)}
427427
</div>
428428
)}
@@ -490,9 +490,9 @@ function FullScreenTable<TData extends { name: string | number }, TValue>({
490490
type="button"
491491
>
492492
{isExpanded ? (
493-
<ArrowDown className="h-3.5 w-3.5 text-muted-foreground" />
493+
<ArrowDownIcon className="h-3.5 w-3.5 text-muted-foreground" />
494494
) : (
495-
<ArrowUp className="h-3.5 w-3.5 text-muted-foreground" />
495+
<ArrowUpIcon className="h-3.5 w-3.5 text-muted-foreground" />
496496
)}
497497
</button>
498498
)}
@@ -794,11 +794,11 @@ export function DataTable<TData extends { name: string | number }, TValue>({
794794
</div>
795795
<div className="flex items-center gap-2">
796796
{showSearch && (
797-
<div className="relative w-full flex-shrink-0 border sm:w-auto">
798-
<Search className="-translate-y-1/2 absolute top-1/2 left-2 h-3 w-3 transform text-muted-foreground/50" />
797+
<div className="relative w-full flex-shrink-0 sm:w-auto">
798+
<MagnifyingGlassIcon className="-translate-y-1/2 absolute top-1/2 left-2 h-3 w-3 transform text-muted-foreground/50" />
799799
<Input
800800
aria-label={`Search ${title}`}
801-
className="h-7 w-full border-0 bg-muted/30 pr-2 pl-7 text-xs focus:bg-background focus:ring-1 focus:ring-primary/20 sm:w-36"
801+
className="h-8 w-full border border-border/50 bg-muted/30 pr-2 pl-7 text-xs focus:bg-background focus:ring-1 focus:ring-primary/20 sm:w-36"
802802
onChange={(event) => setGlobalFilter(event.target.value)}
803803
placeholder="Filter data..."
804804
value={globalFilter ?? ''}
@@ -808,12 +808,12 @@ export function DataTable<TData extends { name: string | number }, TValue>({
808808
{!fullScreen && (
809809
<button
810810
aria-label="Full screen"
811-
className="ml-2 flex items-center justify-center rounded border bg-muted/30 p-2 text-muted-foreground transition hover:bg-muted/50 focus:outline-none focus:ring-2 focus:ring-primary/20"
811+
className="flex h-8 w-8 items-center justify-center rounded border border-border/50 bg-muted/30 text-muted-foreground transition hover:bg-muted/50 focus:outline-none focus:ring-2 focus:ring-primary/20"
812812
onClick={() => setFullScreen(true)}
813813
title="Full screen"
814814
type="button"
815815
>
816-
<ArrowsOutSimpleIcon size={18} />
816+
<ArrowsOutSimpleIcon size={16} />
817817
</button>
818818
)}
819819
</div>
@@ -970,15 +970,15 @@ export function DataTable<TData extends { name: string | number }, TValue>({
970970
</span>
971971
{header.column.getCanSort() && (
972972
<div className="flex h-3 w-3 flex-col items-center justify-center">
973-
{!header.column.getIsSorted() && (
974-
<ArrowUpDown className="h-3 w-3 text-muted-foreground/40 transition-colors group-hover:text-muted-foreground/70" />
975-
)}
976-
{header.column.getIsSorted() === 'asc' && (
977-
<ArrowUp className="h-3 w-3 text-primary" />
978-
)}
979-
{header.column.getIsSorted() === 'desc' && (
980-
<ArrowDown className="h-3 w-3 text-primary" />
981-
)}
973+
{!header.column.getIsSorted() && (
974+
<ArrowsDownUpIcon className="h-3 w-3 text-muted-foreground/40 transition-colors group-hover:text-muted-foreground/70" />
975+
)}
976+
{header.column.getIsSorted() === 'asc' && (
977+
<ArrowUpIcon className="h-3 w-3 text-primary" />
978+
)}
979+
{header.column.getIsSorted() === 'desc' && (
980+
<ArrowDownIcon className="h-3 w-3 text-primary" />
981+
)}
982982
</div>
983983
)}
984984
</div>
@@ -1077,9 +1077,9 @@ export function DataTable<TData extends { name: string | number }, TValue>({
10771077
type="button"
10781078
>
10791079
{isExpanded ? (
1080-
<ArrowDown className="h-3.5 w-3.5 text-muted-foreground" />
1080+
<ArrowDownIcon className="h-3.5 w-3.5 text-muted-foreground" />
10811081
) : (
1082-
<ArrowUp className="h-3.5 w-3.5 text-muted-foreground" />
1082+
<ArrowUpIcon className="h-3.5 w-3.5 text-muted-foreground" />
10831083
)}
10841084
</button>
10851085
)}
@@ -1157,7 +1157,7 @@ export function DataTable<TData extends { name: string | number }, TValue>({
11571157
<div className="mb-4">
11581158
<div className="mx-auto mb-3 flex h-16 w-16 items-center justify-center rounded-2xl bg-muted/20">
11591159
{globalFilter ? (
1160-
<Search className="h-7 w-7 text-muted-foreground/50" />
1160+
<MagnifyingGlassIcon className="h-7 w-7 text-muted-foreground/50" />
11611161
) : (
11621162
<DatabaseIcon className="h-7 w-7 text-muted-foreground/50" />
11631163
)}
@@ -1177,7 +1177,7 @@ export function DataTable<TData extends { name: string | number }, TValue>({
11771177
onClick={() => setGlobalFilter('')}
11781178
type="button"
11791179
>
1180-
<X className="h-4 w-4" />
1180+
<XIcon className="h-4 w-4" />
11811181
Clear search
11821182
</button>
11831183
)}

0 commit comments

Comments
 (0)