@premieroctet/next-admin
Version:
Next-Admin provides a customizable and turnkey admin dashboard for applications built with Next.js and powered by the Prisma ORM. It aims to simplify the development process by providing a turnkey admin system that can be easily integrated into your proje
51 lines (50 loc) • 2.13 kB
JavaScript
"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { Editor } from "@monaco-editor/react";
import { useMemo } from "react";
import { useColorScheme } from "../../context/ColorSchemeContext.mjs";
const JsonField = ({ value, onChange, name, disabled, required })=>{
const { colorScheme } = useColorScheme();
const defaultValue = useMemo(()=>{
try {
return JSON.stringify(JSON.parse(value), null, 2);
} catch {
return "";
}
}, [
value
]);
return /*#__PURE__*/ jsxs("div", {
className: "relative",
children: [
/*#__PURE__*/ jsx("input", {
name: name,
defaultValue: value ?? "",
className: "absolute inset-0 -z-10 h-full w-full opacity-0",
required: required
}),
/*#__PURE__*/ jsx(Editor, {
height: "20vh",
defaultLanguage: "json",
defaultValue: defaultValue,
onChange: (val, evt)=>{
onChange?.({
target: {
value: val ?? ""
}
});
},
options: {
minimap: {
enabled: false
},
readOnly: disabled
},
theme: "light" === colorScheme ? "light" : "vs-dark",
className: "dark:bg-dark-nextadmin-background-subtle dark:ring-dark-nextadmin-border-strong text-nextadmin-content-inverted dark:text-dark-nextadmin-content-inverted ring-nextadmin-border-default focus:ring-nextadmin-brand-default dark:focus:ring-dark-nextadmin-brand-default block w-full rounded-md border-0 px-2 py-1.5 text-sm shadow-sm ring-1 ring-inset transition-all duration-300 placeholder:text-gray-400 focus:ring-1 focus:ring-inset disabled:cursor-not-allowed disabled:opacity-50 sm:leading-6 [&>div]:border-none"
})
]
});
};
const inputs_JsonField = JsonField;
export { inputs_JsonField as default };