admin08077/Githubgemini

1{"version":3,"file":"TypographyLab-Db6ABU3D.js","sources":["../../components/features/TypographyLab.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport { TypographyLabIcon } from '../icons.tsx';\n\nconst popularFonts = [\n    'Roboto', 'Open Sans', 'Lato', 'Montserrat', 'Oswald', 'Source Sans Pro', 'Raleway', 'Poppins', 'Nunito', 'Merriweather',\n    'Playfair Display', 'Lora', 'Noto Sans', 'Ubuntu', 'PT Sans', 'Slabo 27px'\n];\n\nexport const TypographyLab: React.FC = () => {\n    const [headingFont, setHeadingFont] = useState('Oswald');\n    const [bodyFont, setBodyFont] = useState('Roboto');\n\n    useEffect(() => {\n        const fontsToLoad = [headingFont, bodyFont].filter(Boolean).join('|');\n        if (fontsToLoad) {\n            const linkId = 'font-pairing-stylesheet';\n            let link = document.getElementById(linkId) as HTMLLinkElement;\n            if (!link) {\n                link = document.createElement('link');\n                link.id = linkId;\n                link.rel = 'stylesheet';\n                document.head.appendChild(link);\n            }\n            link.href = `https://fonts.googleapis.com/css?family=${fontsToLoad.replace(/ /g, '+')}:400,700&display=swap`;\n        }\n    }, [headingFont, bodyFont]);\n    \n    const FontSelector: React.FC<{ label: string, value: string, onChange: (font: string) => void }> = ({ label, value, onChange }) => (\n        <div>\n            <label className=\"block text-sm font-medium text-text-secondary\">{label}</label>\n            <select value={value} onChange={e => onChange(e.target.value)} className=\"w-full mt-1 px-3 py-2 rounded-md bg-surface border border-border\">\n                {popularFonts.map(font => <option key={font} value={font}>{font}</option>)}\n            </select>\n        </div>\n    );\n\n    const headingImport = `@import url('https://fonts.googleapis.com/css?family=${headingFont.replace(/ /g, '+')}:700&display=swap');`;\n    const bodyImport = `@import url('https://fonts.googleapis.com/css?family=${bodyFont.replace(/ /g, '+')}:400&display=swap');`;\n    const headingRule = `font-family: '${headingFont}', sans-serif;`;\n    const bodyRule = `font-family: '${bodyFont}', sans-serif;`;\n\n    return (\n        <div className=\"h-full flex flex-col p-4 sm:p-6 lg:p-8 text-text-primary\">\n            <header className=\"mb-6\">\n                <h1 className=\"text-3xl font-bold flex items-center\">\n                    <TypographyLabIcon />\n                    <span className=\"ml-3\">Typography Lab</span>\n                </h1>\n                <p className=\"text-text-secondary mt-1\">Preview font pairings and get the necessary CSS rules.</p>\n            </header>\n            <div className=\"flex-grow grid grid-cols-1 lg:grid-cols-3 gap-6 min-h-0\">\n                <div className=\"lg:col-span-1 flex flex-col gap-4 bg-surface border border-border p-6 rounded-lg\">\n                    <h3 className=\"text-xl font-bold\">Controls</h3>\n                    <FontSelector label=\"Heading Font\" value={headingFont} onChange={setHeadingFont} />\n                    <FontSelector label=\"Body Font\" value={bodyFont} onChange={setBodyFont} />\n                    <div className=\"space-y-2 mt-4 pt-4 border-t border-border\">\n                        <label className=\"block text-sm font-medium text-text-secondary\">CSS Rules</label>\n                        <div className=\"relative\"><pre className=\"bg-background p-2 rounded-md text-primary text-xs overflow-x-auto\">{headingImport}</pre><button onClick={() => navigator.clipboard.writeText(headingImport)} className=\"absolute top-1 right-1 px-2 py-0.5 bg-gray-100 hover:bg-gray-200 rounded-md text-xs\">Copy</button></div>\n                        <div className=\"relative\"><pre className=\"bg-background p-2 rounded-md text-primary text-xs overflow-x-auto\">{headingRule}</pre><button onClick={() => navigator.clipboard.writeText(headingRule)} className=\"absolute top-1 right-1 px-2 py-0.5 bg-gray-100 hover:bg-gray-200 rounded-md text-xs\">Copy</button></div>\n                        <div className=\"relative\"><pre className=\"bg-background p-2 rounded-md text-primary text-xs overflow-x-auto\">{bodyImport}</pre><button onClick={() => navigator.clipboard.writeText(bodyImport)} className=\"absolute top-1 right-1 px-2 py-0.5 bg-gray-100 hover:bg-gray-200 rounded-md text-xs\">Copy</button></div>\n                        <div className=\"relative\"><pre className=\"bg-background p-2 rounded-md text-primary text-xs overflow-x-auto\">{bodyRule}</pre><button onClick={() => navigator.clipboard.writeText(bodyRule)} className=\"absolute top-1 right-1 px-2 py-0.5 bg-gray-100 hover:bg-gray-200 rounded-md text-xs\">Copy</button></div>\n                    </div>\n                </div>\n                <div className=\"lg:col-span-2 bg-background border border-border rounded-lg p-8 overflow-y-auto\">\n                    <h2 className=\"text-4xl font-bold mb-4\" style={{ fontFamily: `'${headingFont}', sans-serif` }}>\n                        The Quick Brown Fox Jumps Over the Lazy Dog\n                    </h2>\n                    <p className=\"text-lg\" style={{ fontFamily: `'${bodyFont}', sans-serif` }}>\n                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.\n                    </p>\n                </div>\n            </div>\n        </div>\n    );\n};"],"names":["popularFonts","TypographyLab","headingFont","setHeadingFont","useState","bodyFont","setBodyFont","useEffect","fontsToLoad","linkId","link","FontSelector","label","value","onChange","jsx","e","font","headingImport","bodyImport","headingRule","bodyRule","jsxs","TypographyLabIcon"],"mappings":"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"}