Files
yaak/src-web/components/responseViewers/WebPageViewer.tsx
Gregory Schier c9b4e6181c Use new theme vars (#63)
This PR swaps the theme to use the new stuff from the Theme Studio
2024-08-13 07:44:28 -07:00

32 lines
869 B
TypeScript

import { useMemo } from 'react';
import { useResponseBodyText } from '../../hooks/useResponseBodyText';
import type { HttpResponse } from '@yaakapp/api';
interface Props {
response: HttpResponse;
}
export function WebPageViewer({ response }: Props) {
const { url } = response;
const body = useResponseBodyText(response).data ?? '';
const contentForIframe: string | undefined = useMemo(() => {
if (body.includes('<head>')) {
return body.replace(/<head>/gi, `<head><base href="${url}"/>`);
}
return body;
}, [url, body]);
return (
<div className="h-full pb-3">
<iframe
key={body ? 'has-body' : 'no-body'}
title="Response preview"
srcDoc={contentForIframe}
sandbox="allow-scripts allow-same-origin"
className="h-full w-full rounded border border-border-subtle"
/>
</div>
);
}