93 lines
3.2 KiB
TypeScript
93 lines
3.2 KiB
TypeScript
import React from "react";
|
|
import { Fragment, useState } from "react";
|
|
import { Dialog, Transition } from "@headlessui/react";
|
|
|
|
export const RawRenderer = ({ rawData, parentColor }) => {
|
|
const buttonColorClasses = {
|
|
blue: "text-blue-500",
|
|
teal: "text-teal-500",
|
|
green: "text-green-500",
|
|
red: "text-red-500",
|
|
pink: "text-pink-500",
|
|
purple: "text-purple-500",
|
|
orange: "text-orange-500",
|
|
yellow: "text-yellow-600",
|
|
};
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
|
|
function closeModal() {
|
|
setIsOpen(false);
|
|
}
|
|
|
|
function openModal() {
|
|
setIsOpen(true);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<button
|
|
type="button"
|
|
onClick={openModal}
|
|
className={`z-10 relative flex items-center px-5 py-2 mx-3 my-2 font-semibold shadow-sm text-sm transition duration-150 ease-out rounded transform focus:shadow-outline focus:outline-none whitespace-nowrap opacity-80 hover:opacity-100 shadow-md ${
|
|
buttonColorClasses[buttonColorClasses.blue]
|
|
}`}
|
|
>
|
|
View Raw Data
|
|
<span
|
|
className={`absolute w-full h-full left-0 top-0 rounded -z-1 ${
|
|
parentColor === "primary"
|
|
? `bg-white opacity-80`
|
|
: `bg-current opacity-15`
|
|
}`}
|
|
></span>
|
|
</button>
|
|
<Transition appear show={isOpen} as={Fragment}>
|
|
<Dialog
|
|
as="div"
|
|
className="fixed inset-0 z-10 overflow-y-auto"
|
|
onClose={closeModal}
|
|
>
|
|
<div className="min-h-screen max-h-screen px-4 py-12 text-center flex flex-col items-center justify-center">
|
|
<Transition.Child
|
|
as={Fragment}
|
|
enter="ease-out duration-300"
|
|
enterFrom="opacity-0"
|
|
enterTo="opacity-100"
|
|
leave="ease-out duration-300"
|
|
leaveFrom="opacity-100"
|
|
leaveTo="opacity-0"
|
|
>
|
|
<div className="">
|
|
<Dialog.Overlay className="fixed inset-0 bg-gradient-to-br from-gray-800 to-gray-1000 opacity-80" />
|
|
</div>
|
|
</Transition.Child>
|
|
|
|
<Transition.Child
|
|
as={Fragment}
|
|
enter="ease-out duration-300"
|
|
enterFrom="opacity-0 scale-95"
|
|
enterTo="opacity-100 scale-100"
|
|
leave="ease-in duration-200"
|
|
leaveFrom="opacity-100 scale-100"
|
|
leaveTo="opacity-0 scale-95"
|
|
>
|
|
<div className="flex-1 w-full prose dark:prose-dark max-w-3xl p-6 overflow-hidden text-left align-middle transition-all transform bg-white dark:bg-gray-1000 shadow-xl rounded-xl inline-flex flex-col max-h-full">
|
|
<pre className="flex-1 overflow-y-auto">
|
|
<code>{JSON.stringify(rawData, null, 2)}</code>
|
|
</pre>
|
|
<button
|
|
type="button"
|
|
className="flex-0 font-semibold text-lg transition duration-150 ease-out opacity-80 hover:opacity-100"
|
|
onClick={closeModal}
|
|
>
|
|
Great, thanks!
|
|
</button>
|
|
</div>
|
|
</Transition.Child>
|
|
</div>
|
|
</Dialog>
|
|
</Transition>
|
|
</>
|
|
);
|
|
};
|