46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
import { clsx } from 'clsx/lite';
|
|
import Checkbox from './primitives/Checkbox';
|
|
|
|
export default function SelectTileOverlay({
|
|
isSelected,
|
|
onSelectChange,
|
|
}: {
|
|
isSelected: boolean
|
|
onSelectChange: () => void
|
|
}) {
|
|
return (
|
|
<>
|
|
{/* Admin Select Border */}
|
|
<div className={clsx(
|
|
'absolute w-full h-full pointer-events-none',
|
|
)}>
|
|
<div
|
|
className={clsx(
|
|
'w-full h-full',
|
|
'border-black dark:border-white',
|
|
'transition-opacity',
|
|
!isSelected && 'opacity-0',
|
|
'group-hover:opacity-100',
|
|
// eslint-disable-next-line max-len
|
|
'bg-[radial-gradient(169.40%_89.55%_at_94.76%_6.29%,rgba(1,0,0,0.40)_0%,rgba(255,255,255,0.00)_75%)]',
|
|
isSelected && 'border-4',
|
|
)}
|
|
/>
|
|
</div>
|
|
{/* Admin Select Action */}
|
|
<div className="absolute top-0 right-0 p-2">
|
|
<Checkbox
|
|
className={clsx(
|
|
'text-white',
|
|
!isSelected && 'opacity-0 group-hover:opacity-100',
|
|
// Required to prevent Safari jitter
|
|
'translate-x-[0.1px]',
|
|
)}
|
|
checked={isSelected}
|
|
onChange={onSelectChange}
|
|
/>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|