-
Notifications
You must be signed in to change notification settings - Fork 0
/
focused-panel.tsx
32 lines (30 loc) · 1.33 KB
/
focused-panel.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
import { ArrowRightCircleIcon, XCircleIcon } from '@heroicons/react/24/outline';
import { memo } from 'react';
export interface FocusedPanelProps {
focusedLabel: string;
resetFocus: () => void;
}
export const FocusedPanel = memo(
({ focusedLabel, resetFocus }: FocusedPanelProps) => {
return (
<div className="mt-10 px-4">
<div
className="group relative flex cursor-pointer items-center overflow-hidden rounded-md border border-slate-200 bg-blue-500 p-2 text-slate-50 shadow-sm dark:border-slate-700 dark:bg-sky-500"
data-cy="unfocusButton"
onClick={() => resetFocus()}
>
<p className="truncate transition duration-200 ease-in-out group-hover:opacity-60">
<ArrowRightCircleIcon className="-mt-1 mr-1 inline h-6 w-6" />
<span id="focused-project-name">Focused on {focusedLabel}</span>
</p>
<div className="absolute right-2 flex translate-x-32 items-center rounded-md bg-white pl-2 text-sm font-medium text-slate-700 shadow-sm ring-1 ring-slate-500 transition-all duration-200 ease-in-out group-hover:translate-x-0 dark:bg-slate-800 dark:text-slate-300">
Reset
<span className="rounded-md p-1">
<XCircleIcon className="h-5 w-5" />
</span>
</div>
</div>
</div>
);
}
);