react-floating-profile
Version:
React component to display your github profile <p align="left"> <a href="https://www.npmjs.com/package/react-floating-profile"><img src="https://flat.badgen.net/npm/v/react-floating-profile" alt="react-floating-profile version" /></a> <a href="http
30 lines (29 loc) • 1.32 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { ProfileIcon } from "../../../components/index.js";
import { useProfile } from "../../../context/index.js";
import { useEffect, useState } from "react";
export default function FloatingIcon(_a) {
var avatar_url = _a.avatar_url, location = _a.location;
var _b = useProfile(), isOpen = _b.isOpen, setIsOpen = _b.setIsOpen;
var _c = useState({}), iconOffset = _c[0], setIconOffset = _c[1];
var onClickIcon = function () {
setIsOpen(!isOpen);
};
useEffect(function () {
switch (location) {
case "top-right":
setIconOffset({ top: "20px", right: "20px" });
break;
case "top-left":
setIconOffset({ top: "20px", left: "20px" });
break;
case "bottom-right":
setIconOffset({ bottom: "20px", right: "20px" });
break;
case "bottom-left":
setIconOffset({ bottom: "20px", left: "20px" });
break;
}
}, [location]); // ✅ location 변경 시 useEffect 실행
return (_jsx("div", { className: "icon-button-container", onClick: onClickIcon, style: iconOffset, children: _jsx(ProfileIcon, { avatar_url: avatar_url, onClickIcon: function () { } }) }));
}