slanted-gamedev-toolz
Version:
A slanted mix of tools for your brilliant ideas in game design.
14 lines (13 loc) • 1.31 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from "react";
import "./JournalUi.css";
export const JournalUi = ({ pageTitles = [], pageContents = [], showFooter = false, showFooterText = false, }) => {
const [currentPage, setCurrentPage] = useState(0);
const handlePrev = () => {
setCurrentPage((prev) => (prev > 0 ? prev - 1 : prev));
};
const handleNext = () => {
setCurrentPage((prev) => (prev < pageTitles.length - 1 ? prev + 1 : prev));
};
return (_jsxs("div", { className: "journal-book", children: [_jsx("div", { className: "journal-tabs", children: pageTitles.map((title, index) => (_jsx("button", { className: `journal-tab ${currentPage === index ? "active" : ""}`, onClick: () => setCurrentPage(index), children: title }, index))) }), _jsx("div", { className: "journal-content", children: pageContents[currentPage] }), showFooter && (_jsxs("div", { className: "journal-navigation", children: [_jsx("button", { onClick: handlePrev, disabled: currentPage === 0, children: "Previous" }), showFooter && showFooterText && (_jsxs("span", { children: ["Page ", currentPage + 1, " of ", pageTitles.length] })), _jsx("button", { onClick: handleNext, disabled: currentPage === pageTitles.length - 1, children: "Next" })] }))] }));
};