From a328d3671529935929ade8c0ca28ccb465699f8e Mon Sep 17 00:00:00 2001
From: Nate Sesti <sestinj@gmail.com>
Date: Thu, 15 Jun 2023 18:22:35 -0700
Subject: hover icons for description

---
 .../src/components/HeaderButtonWithText.tsx        | 26 ++++++++++++++++++++++
 1 file changed, 26 insertions(+)
 create mode 100644 extension/react-app/src/components/HeaderButtonWithText.tsx

(limited to 'extension/react-app/src/components/HeaderButtonWithText.tsx')

diff --git a/extension/react-app/src/components/HeaderButtonWithText.tsx b/extension/react-app/src/components/HeaderButtonWithText.tsx
new file mode 100644
index 00000000..d70a3d70
--- /dev/null
+++ b/extension/react-app/src/components/HeaderButtonWithText.tsx
@@ -0,0 +1,26 @@
+import React, { useState } from "react";
+
+import { HeaderButton } from ".";
+
+interface HeaderButtonWithTextProps {
+  text: string;
+  onClick?: (e: any) => void;
+  children: React.ReactNode;
+}
+
+const HeaderButtonWithText = (props: HeaderButtonWithTextProps) => {
+  const [hover, setHover] = useState(false);
+  return (
+    <HeaderButton
+      style={{ padding: "3px" }}
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
+      onClick={props.onClick}
+    >
+      <span hidden={!hover}>{props.text}</span>
+      {props.children}
+    </HeaderButton>
+  );
+};
+
+export default HeaderButtonWithText;
-- 
cgit v1.2.3-70-g09d2