gabehf/Koito
1
0
Fork 0
mirror of https://github.com/gabehf/Koito.git synced 2026-03-16 19:05:54 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: v0.0.3

Browse source
This commit is contained in:
Gabe Farrell 2025-06-15 00:12:21 -04:00
parent 7ff317756f
commit 3250a4ec3f
21 changed files with 322 additions and 374 deletions
Download patch file Download diff file Expand all files Collapse all files

82
client/app/components/Popup.tsx
View file

@ -1,48 +1,64 @@
import React, { type PropsWithChildren, useState } from 'react';
import React, { type PropsWithChildren, useEffect, useState } from 'react';
interface Props {
inner: React.ReactNode
position: string
space: number
extraClasses?: string
hint?: string
inner: React.ReactNode
position: string
space: number
extraClasses?: string
hint?: string
}
export default function Popup({ inner, position, space, extraClasses, children }: PropsWithChildren<Props>) {
const [isVisible, setIsVisible] = useState(false);
const [showPopup, setShowPopup] = useState(true);
let positionClasses
let spaceCSS = {}
if (position == "top") {
positionClasses = `top-${space} -bottom-2 -translate-y-1/2 -translate-x-1/2`
} else if (position == "right") {
positionClasses = `bottom-1 -translate-x-1/2`
spaceCSS = {left: 70 + space}
useEffect(() => {
const mediaQuery = window.matchMedia('(min-width: 640px)');
const handleChange = (e: MediaQueryListEvent) => {
setShowPopup(e.matches);
};
setShowPopup(mediaQuery.matches);
mediaQuery.addEventListener('change', handleChange);
return () => mediaQuery.removeEventListener('change', handleChange);
}, []);
let positionClasses = '';
let spaceCSS: React.CSSProperties = {};
if (position === 'top') {
positionClasses = `top-${space} -bottom-2 -translate-y-1/2 -translate-x-1/2`;
} else if (position === 'right') {
positionClasses = `bottom-1 -translate-x-1/2`;
spaceCSS = { left: 70 + space };
}
return (
<div
className="relative"
onMouseEnter={() => setIsVisible(true)}
onMouseLeave={() => setIsVisible(false)}
className="relative"
onMouseEnter={() => setIsVisible(true)}
onMouseLeave={() => setIsVisible(false)}
>
{children}
<div
className={`
absolute
${positionClasses}
${extraClasses ? extraClasses : ''}
bg-(--color-bg) color-fg border-1 border-(--color-bg-tertiary)
px-3 py-2 rounded-lg
transition-opacity duration-100
${isVisible ? 'opacity-100' : 'opacity-0 pointer-events-none'}
z-50 text-center
flex
`}
style={spaceCSS}
>
{inner}
</div>
{children}
{showPopup && (
<div
className={`
absolute
${positionClasses}
${extraClasses ?? ''}
bg-(--color-bg) color-fg border-1 border-(--color-bg-tertiary)
px-3 py-2 rounded-lg
transition-opacity duration-100
${isVisible ? 'opacity-100' : 'opacity-0 pointer-events-none'}
z-50 text-center
flex
`}
style={spaceCSS}
>
{inner}
</div>
)}
</div>
);
}