admin08077/Githubgemini

1{"version":3,"file":"ResponsiveTester-DppCccuL.js","sources":["../../components/features/ResponsiveTester.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport { EyeIcon } from '../icons.tsx';\n\nconst devices = {\n    'iPhone 12': { width: 390, height: 844 },\n    'Pixel 5': { width: 393, height: 851 },\n    'iPad Air': { width: 820, height: 1180 },\n    'Surface Duo': { width: 540, height: 720 },\n    'Laptop': { width: 1366, height: 768 },\n    'Desktop': { width: 1920, height: 1080 },\n    'Auto': { width: '100%', height: '100%' },\n};\n\ntype DeviceName = keyof typeof devices;\n\nexport const ResponsiveTester: React.FC = () => {\n    const [url, setUrl] = useState('https://react.dev');\n    const [displayUrl, setDisplayUrl] = useState(url);\n    const [size, setSize] = useState<{width: number | string, height: number | string}>(devices['Auto']);\n\n    useEffect(() => {\n        const handleResize = () => {\n            if (size.width === '100%') {\n                setSize({ width: '100%', height: '100%' });\n            }\n        };\n        window.addEventListener('resize', handleResize);\n        return () => window.removeEventListener('resize', handleResize);\n    }, [size.width]);\n\n    const handleUrlSubmit = (e: React.FormEvent) => {\n        e.preventDefault();\n        setDisplayUrl(url.startsWith('http') ? url : `https://${url}`);\n    };\n\n    const handleRotate = () => {\n        if(typeof size.width === 'number' && typeof size.height === 'number') {\n            setSize({ width: size.height, height: size.width });\n        }\n    };\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\"><h1 className=\"text-3xl font-bold flex items-center\"><EyeIcon /><span className=\"ml-3\">Responsive Tester</span></h1><p className=\"text-text-secondary mt-1\">Preview your web pages at different screen sizes.</p></header>\n            <form onSubmit={handleUrlSubmit} className=\"flex items-center gap-2 mb-2\">\n                <input type=\"text\" value={url} onChange={(e) => setUrl(e.target.value)} placeholder=\"https://example.com\" className=\"flex-grow px-4 py-2 rounded-md bg-surface border border-border focus:ring-2 focus:ring-primary focus:outline-none\"/>\n                <button type=\"submit\" className=\"btn-primary px-6 py-2\">Load</button>\n            </form>\n            <div className=\"bg-surface p-2 rounded-lg flex flex-wrap justify-center items-center gap-2 mb-4 border border-border\">\n                {Object.keys(devices).map(name => (\n                    <button key={name} onClick={() => setSize(devices[name as DeviceName])} className={`px-3 py-1 rounded-md text-sm ${JSON.stringify(size) === JSON.stringify(devices[name as DeviceName]) ? 'bg-primary/10 text-primary font-semibold' : 'hover:bg-gray-100'}`}>{name}</button>\n                ))}\n                <div className=\"flex items-center gap-1 ml-4\">\n                    <input type=\"number\" value={typeof size.width === 'number' ? size.width : ''} onChange={e => setSize({ ...size, width: Number(e.target.value) })} className=\"w-20 px-2 py-1 bg-gray-100 border border-border rounded-md text-sm\"/>\n                    <span className=\"text-sm text-text-secondary\">x</span>\n                    <input type=\"number\" value={typeof size.height === 'number' ? size.height : ''} onChange={e => setSize({ ...size, height: Number(e.target.value) })} className=\"w-20 px-2 py-1 bg-gray-100 border border-border rounded-md text-sm\"/>\n                </div>\n                 <button onClick={handleRotate} className=\"px-3 py-1 rounded-md text-sm hover:bg-gray-100\" title=\"Rotate\">🔄</button>\n            </div>\n            <div className=\"flex-grow bg-background rounded-lg p-4 overflow-auto border border-border\">\n                <iframe key={displayUrl} src={displayUrl} style={{ width: size.width, height: size.height }} className=\"bg-white border-4 border-gray-300 rounded-md transition-all duration-300 shadow-lg mx-auto\" title=\"Responsive Preview\"/>\n            </div>\n        </div>\n    );\n};"],"names":["devices","ResponsiveTester","url","setUrl","useState","displayUrl","setDisplayUrl","size","setSize","useEffect","handleResize","handleUrlSubmit","e","handleRotate","jsxs","jsx","EyeIcon","name"],"mappings":"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"}