@ducor/react
Version:
admin template ui interface
20 lines (19 loc) • 1.37 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Heading } from "../components";
import Flex from "../components/flex";
import typographies from "../helpers/typographies";
import { useAdmin } from "../hooks/use-admin";
const Typography = () => {
const { adminData, setAdminData } = useAdmin();
// Handle change in font selection
const handleChange = (e) => {
if (e.target && e.target.value) {
setAdminData("TYPOGRAPHY_" + adminData.HTML_DIRECTION.toUpperCase(), e.target.value); // Update typography setting
}
};
// Handle keyboard arrow keys (up/down)
const ltrFonts = Object.keys(typographies.ltr);
const rtlFonts = Object.keys(typographies.rtl);
return (_jsxs(Flex, { gap: 2, direction: 'col', children: [_jsx(Heading, { as: 'h3', className: 'underline ', children: "Typography" }), adminData.HTML_DIRECTION === "ltr" ? (_jsx("div", { children: _jsx("select", { value: adminData.TYPOGRAPHY_LTR, onChange: handleChange, children: ltrFonts.map((font, key) => (_jsx("option", { value: font, className: 'text-gray-800', children: font }, key))) }) })) : (_jsx("div", { children: _jsx("select", { value: adminData.TYPOGRAPHY_RTL, onChange: handleChange, children: rtlFonts.map((font, key) => (_jsx("option", { value: font, children: font }, key))) }) }))] }));
};
export default Typography;