'use client'; import { Boundary } from '#/layout/ui/playground/Boundary'; import { usePathname } from 'next/navigation'; import { useEffect, useState } from 'react'; const getMetaContent = (name: string) => document.querySelector(`meta[name="${name}"]`)?.content || ''; const getHeadTags = () => { if (typeof window === 'undefined') { // Basic initial server state to avoid content layout shift return { title: '', description: '', viewport: '', favicon: '', }; } return { title: document.title || '', description: getMetaContent('description'), viewport: getMetaContent('viewport'), favicon: document.querySelector(`link[rel="shortcut icon"]`) ?.href || '', }; }; export function HeadInfo() { const [tags, setTags] = useState( // Avoid a content layout shift by returning tags in the initial render getHeadTags, ); const pathname = usePathname(); // Ensure tags are updated on page navigation useEffect(() => { setTags(getHeadTags); }, [pathname]); return ( tags']} color="blue" animateRerendering={false} >

          {JSON.stringify(tags, null, 2)}

); }