diff --git a/src/components/FlickerList.tsx b/src/components/FlickerList.tsx
index f59899b..e67c58f 100644
--- a/src/components/FlickerList.tsx
+++ b/src/components/FlickerList.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { forwardRef } from "react";
import { css, cx } from "@emotion/css";
import { intersperse, sleep } from "../util";
@@ -39,6 +39,9 @@ const opaque = css`&& { opacity: 1 }`;
const halfVisible = css`&&& {opacity: 0.5}`;
// prettier-ignore
+const invisible = css`& { opacity: 0 }`;
+
+// prettier-ignore
const opacities = [0.05, 0.1, 0.15, 0.2, 0.25, 0.3, 0.35, 0.4, 0.45].map(each => css`&&& { opacity: ${0.5 + each} }`);
const tripleBlink = async (el: HTMLElement) => {
@@ -58,12 +61,14 @@ const tripleBlink = async (el: HTMLElement) => {
el.classList.remove(halfVisible);
};
-const Flicker: React.FC<{
- children: React.ReactNode;
- index: number;
- description: string;
- style?: React.CSSProperties;
-}> = ({ children, index, description, style }) => {
+export const Tooltip = forwardRef<
+ HTMLButtonElement,
+ {
+ children: React.ReactNode;
+ description: React.ReactNode;
+ style?: React.CSSProperties;
+ }
+>(({ children, description, style }, ref) => {
return (
- {description}
+
+ {description}
+
);
-};
+});
const FlickerList: React.FC<{
- list: { text: string; description: string }[];
+ list: { text: string; description: React.ReactNode }[];
style?: React.CSSProperties;
}> = ({ list, style }) => {
return (
@@ -159,13 +155,13 @@ const FlickerList: React.FC<{
className={css`
display: flex;
flex-wrap: wrap;
- gap: 0.5rem;
+ gap: 0.8rem;
margin: 0;
padding: 0;
list-style: none;
- &:has(> li button:focus) li button:not(:focus),
- &:has(> li button:hover) li button:not(:hover) {
+ &:has(:focus) li button:not(:focus),
+ &:has(:hover) li button:not(:hover) {
opacity: 0.5;
}
@@ -184,9 +180,32 @@ const FlickerList: React.FC<{
className={css`
display: inline-block;
`}>
-