Drop in OG error detector

gistfile1.tsx

import { useEffect, useState } from 'react';
import { PopoverContent, PopoverTrigger } from '../primitives/ui/popover';
import { Popover } from '../primitives/ui/popover';
import { BsCardHeading } from 'react-icons/bs';
import { Button } from '~ui/components/primitives/ui/button';
import { FiAlertCircle } from 'react-icons/fi';
import { TbAlertCircleFilled } from 'react-icons/tb';
type HeadValues = {
	title?: string;
	canonical?: string;
	icon?: string;
	meta: {
		robots?: string;
		description?: string;
		siteName?: string;
		title?: string;
		type?: string;
		image?: string;
		imageWidth?: string;
		imageHeight?: string;
		url?: string;
	};
};
function useHeadWatcher() {
	const [headValues, setHeadValues] = useState<HeadValues>({
		meta: {},
	});

	useEffect(() => {
		const handleHeadChange = () => {
			const newHeadValues: HeadValues = {
				...headValues,
			};
			const headElements = document.head.children;

			for (const element of headElements) {
				switch (element.tagName.toLowerCase()) {
					case 'title': {
						newHeadValues.title = element.textContent ?? undefined;
						break;
					}
					case 'meta': {
						const property =
							element.getAttribute('property') ?? element.getAttribute('name');
						switch (property) {
							case 'robots':
								newHeadValues.meta.robots =
									element.getAttribute('content') ?? undefined;
								break;
							case 'description':
								newHeadValues.meta.description =
									element.getAttribute('content') ?? undefined;
								break;
							case 'og:site_name':
								newHeadValues.meta.siteName =
									element.getAttribute('content') ?? undefined;
								break;
							case 'title':
								newHeadValues.meta.title =
									element.getAttribute('content') ?? undefined;
								break;
							case 'type':
								newHeadValues.meta.type =
									element.getAttribute('content') ?? undefined;
								break;
							case 'og:image':
								newHeadValues.meta.image =
									element.getAttribute('content') ?? undefined;
						}
						break;
					}
					case 'link': {
						const rel = element.getAttribute('rel');
						switch (rel) {
							case 'canonical':
								newHeadValues.canonical =
									element.getAttribute('href') ?? undefined;
								break;
							case 'icon':
								newHeadValues.icon = element.getAttribute('href') ?? undefined;
								break;
						}
						break;
					}
				}
			}

			setHeadValues(newHeadValues);
		};

		document.head.addEventListener('DOMContentLoaded', handleHeadChange);
		document.head.addEventListener('DOMSubtreeModified', handleHeadChange);

		return () => {
			document.head.removeEventListener('DOMContentLoaded', handleHeadChange);
			document.head.removeEventListener('DOMSubtreeModified', handleHeadChange);
		};
	}, []);

	return headValues;
}

export function HeadPreview() {
	const headValues = useHeadWatcher();
	console.log(headValues.meta?.image);
	const HeadPopover = () => (
		<div
			className={
				'z-50 flex grid h-full w-full  grid-cols-1 gap-4 overflow-x-hidden overflow-y-scroll'
			}
		>
			<span className={'text-xl font-bold'}>OG Data</span>
			<img src={headValues.meta?.image} className={'max-h-[200px]'} />
			<div className={'grid grid-cols-2 divide-x-1 divide-y-1 border-solid '}>
				<span>Title</span>
				<span>{headValues.title}</span>
				<span>Canonical</span>
				<span>{headValues.canonical}</span>
				<span>Icon</span>
				<span className="bg-red-300">{headValues.icon}</span>
				<span>Description</span>
				<span>{headValues.meta?.description}</span>
				<span>Site Name</span>
				<span>{headValues.meta?.siteName}</span>
			</div>
		</div>
	);

	return (
		<Popover>
			<PopoverTrigger className={'absolute bottom-10 right-10 z-50'}>
				<div className={'relative'}>
					<BsCardHeading className={' h-10 w-10'} />
					<TbAlertCircleFilled
						className={
							'absolute right-0 top-0 z-10 h-4 w-4 font-bold text-red-600'
						}
					/>
				</div>
			</PopoverTrigger>
			<PopoverContent className=" h-[400px] w-[800px]">
				<HeadPopover />
			</PopoverContent>
		</Popover>
	);
}