mirror of
https://github.com/yude-jp/yude.jp
synced 2024-06-09 23:36:01 +09:00
88 lines
2.7 KiB
JavaScript
88 lines
2.7 KiB
JavaScript
|
import React from "react";
|
||
|
import Popper from "popper.js";
|
||
|
|
||
|
const Dropdown = ({ color }) => {
|
||
|
// dropdown props
|
||
|
const [dropdownPopoverShow, setDropdownPopoverShow] = React.useState(false);
|
||
|
const btnDropdownRef = React.createRef();
|
||
|
const popoverDropdownRef = React.createRef();
|
||
|
const openDropdownPopover = () => {
|
||
|
new Popper(btnDropdownRef.current, popoverDropdownRef.current, {
|
||
|
placement: "bottom-start"
|
||
|
});
|
||
|
setDropdownPopoverShow(true);
|
||
|
};
|
||
|
const closeDropdownPopover = () => {
|
||
|
setDropdownPopoverShow(false);
|
||
|
};
|
||
|
// bg colors
|
||
|
let bgColor;
|
||
|
color === "white"
|
||
|
? (bgColor = "bg-gray-800")
|
||
|
: (bgColor = "bg-" + color + "-500");
|
||
|
return (
|
||
|
<>
|
||
|
<div className="flex flex-wrap">
|
||
|
<div className="w-full ">
|
||
|
<div className="relative inline-flex align-middle w-full">
|
||
|
<button
|
||
|
className={
|
||
|
"text-white font-bold text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 " +
|
||
|
bgColor
|
||
|
}
|
||
|
style={{ transition: "all .15s ease" }}
|
||
|
type="button"
|
||
|
ref={btnDropdownRef}
|
||
|
onClick={() => {
|
||
|
dropdownPopoverShow
|
||
|
? closeDropdownPopover()
|
||
|
: openDropdownPopover();
|
||
|
}}
|
||
|
>
|
||
|
Language / 言語
|
||
|
</button>
|
||
|
<div
|
||
|
ref={popoverDropdownRef}
|
||
|
className={
|
||
|
(dropdownPopoverShow ? "block " : "hidden ") +
|
||
|
(color === "white" ? "bg-white " : bgColor + " ") +
|
||
|
"text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1"
|
||
|
}
|
||
|
style={{ minWidth: "12rem" }}
|
||
|
>
|
||
|
<a
|
||
|
href="#pablo"
|
||
|
className={
|
||
|
"text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent " +
|
||
|
(color === "white" ? " text-gray-800" : "text-white")
|
||
|
}
|
||
|
onClick={e => e.preventDefault()}
|
||
|
>
|
||
|
Japanese
|
||
|
</a>
|
||
|
<a
|
||
|
href="#pablo"
|
||
|
className={
|
||
|
"text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent " +
|
||
|
(color === "white" ? " text-gray-800" : "text-white")
|
||
|
}
|
||
|
onClick={e => e.preventDefault()}
|
||
|
>
|
||
|
English
|
||
|
</a>
|
||
|
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</>
|
||
|
);
|
||
|
};
|
||
|
|
||
|
export default function LangSelector() {
|
||
|
return (
|
||
|
<>
|
||
|
<Dropdown color="white" />
|
||
|
</>
|
||
|
);
|
||
|
}
|