12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061 |
- import React from "react";
- import { useTranslation } from "react-i18next";
- import ItemLibrary from "./ItemLibrary";
- import Touch from "./ui/Touch";
- import SidePanel from "./ui/SidePanel";
- const AddItemPanel = ({ itemLibraries, open, onClose }) => {
- const [tab, setTab] = React.useState(itemLibraries[0]?.key || "standard");
- React.useEffect(() => {
- setTab(itemLibraries[0]?.key || "standard");
- }, [itemLibraries]);
- return (
- <SidePanel open={open} onClose={onClose} position="right" width="33%">
- <nav className="tabs">
- {itemLibraries.map(({ name, key }) => (
- <a
- onClick={() => setTab(key)}
- className={tab === key ? "active" : ""}
- style={{ cursor: "pointer" }}
- key={key}
- >
- {name}
- </a>
- ))}
- </nav>
- <section className="content">
- {itemLibraries.map(({ key, items }) =>
- tab === key ? <ItemLibrary items={items} key={key} /> : null
- )}
- </section>
- </SidePanel>
- );
- };
- const AddItemButton = ({ itemLibraries }) => {
- const { t } = useTranslation();
- const [showAddPanel, setShowAddPanel] = React.useState(false);
- return (
- <>
- <Touch
- onClick={() => setShowAddPanel((prev) => !prev)}
- alt={t("Add item")}
- title={t("Add item")}
- label={t("Add")}
- icon={showAddPanel ? "cross" : "plus"}
- />
- <AddItemPanel
- itemLibraries={itemLibraries}
- open={showAddPanel}
- onClose={() => setShowAddPanel(false)}
- />
- </>
- );
- };
- export default AddItemButton;
|