From 1872ff1d24af490f85304863fc51e4bc6dfd593c Mon Sep 17 00:00:00 2001
From: ChristoferMendes <christoferluizdsm@gmail.com>
Date: Fri, 10 May 2024 12:09:59 -0300
Subject: [PATCH] feat: Add tooltip component with styles and visibility logic

---
 .../src/components/tooltip/tooltip.css.ts     | 36 +++++++++++++++++++
 .../src/components/tooltip/tooltip.tsx        | 22 ++++++++++++
 2 files changed, 58 insertions(+)
 create mode 100644 src/renderer/src/components/tooltip/tooltip.css.ts
 create mode 100644 src/renderer/src/components/tooltip/tooltip.tsx

diff --git a/src/renderer/src/components/tooltip/tooltip.css.ts b/src/renderer/src/components/tooltip/tooltip.css.ts
new file mode 100644
index 00000000..6615e51d
--- /dev/null
+++ b/src/renderer/src/components/tooltip/tooltip.css.ts
@@ -0,0 +1,36 @@
+import { style } from "@vanilla-extract/css";
+
+export const tooltipStyle = style({
+  position: 'relative',
+  display: 'flex',
+  cursor: 'pointer',
+  alignItems: 'center'
+});
+
+export const tooltipTextStyle = style({
+  visibility: 'hidden',
+  backgroundColor: '#555',
+  color: '#fff',
+  textAlign: 'center',
+  borderRadius: '6px',
+  padding: '5px 5px',
+  position: 'absolute',
+  zIndex: '1',
+  bottom: '125%',
+  left: 'max(0%, min(100%, 50%))',
+  transform: 'translateX(-50%)',
+  ':after': {
+    content: '""',
+    position: 'absolute',
+    top: '100%',
+    left: '50%',
+    marginLeft: '-5px',
+    borderWidth: '5px',
+    borderStyle: 'solid',
+    borderColor: '#555 transparent transparent transparent',
+  },
+});
+
+export const tooltipVisible = style({
+  visibility: 'visible',
+});
diff --git a/src/renderer/src/components/tooltip/tooltip.tsx b/src/renderer/src/components/tooltip/tooltip.tsx
new file mode 100644
index 00000000..75b0061e
--- /dev/null
+++ b/src/renderer/src/components/tooltip/tooltip.tsx
@@ -0,0 +1,22 @@
+import { useState } from 'react';
+import * as styles from './tooltip.css'
+
+interface TooltipProps {
+  children: React.ReactNode;
+  tooltipText: string;
+}
+
+export function Tooltip({ children, tooltipText }: Readonly<TooltipProps>) {
+  const [isVisible, setIsVisible] = useState(false);
+
+  return (
+    <div
+    className={styles.tooltipStyle}
+    onMouseEnter={() => setIsVisible(true)}
+    onMouseLeave={() => setIsVisible(false)}
+  >
+    {children}
+    <span className={`${styles.tooltipTextStyle} ${isVisible ? styles.tooltipVisible : ''}`}>{tooltipText}</span>
+  </div>
+  );
+}