that looks so ugly omfg
This commit is contained in:
parent
6165b7dd75
commit
71b04ea02e
2 changed files with 49 additions and 15 deletions
|
@ -159,6 +159,8 @@ function App() {
|
||||||
url='https://yellows.ink/'></SingularOomfie>
|
url='https://yellows.ink/'></SingularOomfie>
|
||||||
<SingularOomfie name='nax' discordid='148801388938264576'
|
<SingularOomfie name='nax' discordid='148801388938264576'
|
||||||
url='https://nax.dev/'></SingularOomfie>
|
url='https://nax.dev/'></SingularOomfie>
|
||||||
|
<SingularOomfie name='squirrelly' discordid='218032723296649217'
|
||||||
|
url='https://squirrelly13.neocities.org/'></SingularOomfie>
|
||||||
<SingularOomfie name='ushie' discordid='399862294143696897'
|
<SingularOomfie name='ushie' discordid='399862294143696897'
|
||||||
url='https://ushie.dev/'></SingularOomfie>
|
url='https://ushie.dev/'></SingularOomfie>
|
||||||
<SingularOomfie name='mugman' discordid='601836455006044163'
|
<SingularOomfie name='mugman' discordid='601836455006044163'
|
||||||
|
|
|
@ -8,15 +8,31 @@ export function AdvancedBr({ count }: { count: number }) {
|
||||||
return new Array(count).fill(null).map(_ => (<br />))
|
return new Array(count).fill(null).map(_ => (<br />))
|
||||||
}
|
}
|
||||||
|
|
||||||
export function SingularOomfie(props: { name: string, url: string, discordid: string }) {
|
export function SingularOomfie(props: { name: string; url: string; discordid: string }) {
|
||||||
const [imageSrc, setImageSrc] = createSignal("");
|
const [imageSrc, setImageSrc] = createSignal("");
|
||||||
|
const [mousePosition, setMousePosition] = createSignal({ x: 0, y: 0 });
|
||||||
|
const [showTooltip, setShowTooltip] = createSignal(false);
|
||||||
|
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
const url = await theImager(props.discordid);
|
const url = await theImager(props.discordid);
|
||||||
setImageSrc(url);
|
setImageSrc(url);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const handleMouseMove = (e: MouseEvent) => {
|
||||||
|
setMousePosition({ x: e.clientX, y: e.clientY });
|
||||||
|
setShowTooltip(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleMouseLeave = () => {
|
||||||
|
setShowTooltip(false);
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<div
|
||||||
|
onMouseMove={handleMouseMove}
|
||||||
|
onMouseLeave={handleMouseLeave}
|
||||||
|
style={{ position: "relative", display: "inline-block" }}
|
||||||
|
>
|
||||||
<a href={props.url}>
|
<a href={props.url}>
|
||||||
<img
|
<img
|
||||||
class="tooltip"
|
class="tooltip"
|
||||||
|
@ -25,8 +41,24 @@ export function SingularOomfie(props: { name: string, url: string, discordid: st
|
||||||
"border-radius": "30%",
|
"border-radius": "30%",
|
||||||
}}
|
}}
|
||||||
src={imageSrc()}
|
src={imageSrc()}
|
||||||
alt={"profile picture for" + props.name}
|
alt={"profile picture for " + props.name}
|
||||||
/>
|
/>
|
||||||
</a>
|
</a>
|
||||||
|
{showTooltip() && (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
position: "absolute",
|
||||||
|
background: "rgba(0, 0, 0, 0.7)",
|
||||||
|
color: "white",
|
||||||
|
padding: "0.5em",
|
||||||
|
"border-radius": "5px",
|
||||||
|
"pointer-events": "none",
|
||||||
|
transform: "translate(20%, -100%)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{props.name}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
Loading…
Reference in a new issue