rawRenderer.tsx (3278B)
1 import React from "react"; 2 import { Fragment, useState } from "react"; 3 import { Dialog, Transition } from "@headlessui/react"; 4 import { useTheme } from ".."; 5 6 export const RawRenderer = ({ rawData, parentColor }) => { 7 const theme = useTheme(); 8 const buttonColorClasses = { 9 blue: "text-blue-500", 10 teal: "text-teal-500", 11 green: "text-green-500", 12 red: "text-red-500", 13 pink: "text-pink-500", 14 purple: "text-purple-500", 15 orange: "text-orange-500", 16 yellow: "text-yellow-600", 17 }; 18 const [isOpen, setIsOpen] = useState(false); 19 20 function closeModal() { 21 setIsOpen(false); 22 } 23 24 function openModal() { 25 setIsOpen(true); 26 } 27 28 return ( 29 <> 30 <button 31 type="button" 32 onClick={openModal} 33 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 ${ 34 buttonColorClasses[theme.color] 35 }`} 36 > 37 View Raw Data 38 <span 39 className={`absolute w-full h-full left-0 top-0 rounded -z-1 ${ 40 parentColor === "primary" 41 ? `bg-white opacity-80` 42 : `bg-current opacity-15` 43 }`} 44 ></span> 45 </button> 46 <Transition appear show={isOpen} as={Fragment}> 47 <Dialog 48 as="div" 49 className="fixed inset-0 z-10 overflow-y-auto" 50 onClose={closeModal} 51 > 52 <div className="min-h-screen max-h-screen px-4 py-12 text-center flex flex-col items-center justify-center"> 53 <Transition.Child 54 as={Fragment} 55 enter="ease-out duration-300" 56 enterFrom="opacity-0" 57 enterTo="opacity-100" 58 leave="ease-out duration-300" 59 leaveFrom="opacity-100" 60 leaveTo="opacity-0" 61 > 62 <div className=""> 63 <Dialog.Overlay className="fixed inset-0 bg-gradient-to-br from-gray-800 to-gray-1000 opacity-80" /> 64 </div> 65 </Transition.Child> 66 67 <Transition.Child 68 as={Fragment} 69 enter="ease-out duration-300" 70 enterFrom="opacity-0 scale-95" 71 enterTo="opacity-100 scale-100" 72 leave="ease-in duration-200" 73 leaveFrom="opacity-100 scale-100" 74 leaveTo="opacity-0 scale-95" 75 > 76 <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"> 77 <pre className="flex-1 overflow-y-auto"> 78 <code>{JSON.stringify(rawData, null, 2)}</code> 79 </pre> 80 <button 81 type="button" 82 className="flex-0 font-semibold text-lg transition duration-150 ease-out opacity-80 hover:opacity-100" 83 onClick={closeModal} 84 > 85 Great, thanks! 86 </button> 87 </div> 88 </Transition.Child> 89 </div> 90 </Dialog> 91 </Transition> 92 </> 93 ); 94 };