-
Notifications
You must be signed in to change notification settings - Fork 0
/
show-hide-all.tsx
56 lines (52 loc) · 1.98 KB
/
show-hide-all.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
import { memo } from 'react';
import { BoltIcon, EyeIcon, EyeSlashIcon } from '@heroicons/react/24/outline';
export interface ShowHideAllProps {
showAll: () => void;
hideAll: () => void;
showAffected: () => void;
hasAffected: boolean;
label: string;
}
export const ShowHideAll = memo(
({
showAll,
hideAll,
showAffected,
hasAffected,
label,
}: ShowHideAllProps): JSX.Element => {
return (
<div className="mt-8 px-4">
<button
onClick={showAll}
type="button"
className="flex w-full items-center rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700"
data-cy="selectAllButton"
>
<EyeIcon className="-ml-1 mr-2 h-5 w-5 text-slate-400"></EyeIcon>
Show all {label}
</button>
{hasAffected ? (
<button
onClick={showAffected}
type="button"
className="mt-3 flex w-full items-center rounded-md border border-pink-500 bg-pink-400 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-pink-500 dark:border-fuchsia-800 dark:bg-fuchsia-700 dark:text-white hover:dark:bg-fuchsia-600"
data-cy="affectedButton"
>
<BoltIcon className="-ml-1 mr-2 h-5 w-5 text-white"></BoltIcon>
Show affected {label}
</button>
) : null}
<button
onClick={hideAll}
type="button"
className="mt-3 flex w-full items-center rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700"
data-cy="deselectAllButton"
>
<EyeSlashIcon className="-ml-1 mr-2 h-5 w-5 text-slate-500"></EyeSlashIcon>
Hide all {label}
</button>
</div>
);
}
);