diff --git a/src/components/common/AbstractCard.tsx b/src/components/common/AbstractCard.tsx index dfa71bc..47cab66 100644 --- a/src/components/common/AbstractCard.tsx +++ b/src/components/common/AbstractCard.tsx @@ -1,22 +1,46 @@ import React, { FunctionComponent, ReactNode } from "react"; +import { useBoolean } from "usehooks-ts"; +import { CodeBracketIcon } from "@heroicons/react/24/solid"; type AbstractCardProps = { - children: ReactNode; + children?: ReactNode; header?: ReactNode; footer?: ReactNode; + data?: object; }; const AbstractCard: FunctionComponent = ({ children, header, footer, + data, }) => { + const { value: showRaw, toggle: toggleRaw } = useBoolean(false); + return (
- {header != null ? ( -
{header}
+ {header != undefined || data != undefined ? ( +
+
{header}
+ {data != undefined ? ( +
+ +
+ ) : null} +
) : null} -
{children}
+
+ {showRaw ? ( +
+            {JSON.stringify(data, null, 4)}
+          
+ ) : ( + children + )} +
{footer != null ? (
{footer}
) : null} diff --git a/src/components/lookup/DomainCard.tsx b/src/components/lookup/DomainCard.tsx index 381f36d..b20c0b5 100644 --- a/src/components/lookup/DomainCard.tsx +++ b/src/components/lookup/DomainCard.tsx @@ -14,6 +14,7 @@ export type DomainProps = { const DomainCard: FunctionComponent = ({ data }: DomainProps) => { return ( {data.ldhName ?? data.unicodeName}