CoolFace
Apppublic

admin08077/Githubgemini

sourceHugging Faceotherupdated 10mo agoView on Hugging Face
0likes
ResponsiveTester-DppCccuL.js3 linesDownload Raw Back to assets
1import{r as o,j as e}from"./react-DKy9e2uO.js";import{U as p}from"./index-Ck8YGBbR.js";import"./bottleneck-Cpj98o6Y.js";import"./react-dom-CpxHE_eW.js";import"./scheduler-DYLXRpC5.js";import"./idb-Dob3nYDb.js";import"./@google-D80DdW2m.js";import"./marked-CesSW9Du.js";import"./jszip-s56H2EZ-.js";const a={"iPhone 12":{width:390,height:844},"Pixel 5":{width:393,height:851},"iPad Air":{width:820,height:1180},"Surface Duo":{width:540,height:720},Laptop:{width:1366,height:768},Desktop:{width:1920,height:1080},Auto:{width:"100%",height:"100%"}},j=()=>{const[s,n]=o.useState("https://react.dev"),[d,h]=o.useState(s),[t,i]=o.useState(a.Auto);o.useEffect(()=>{const r=()=>{t.width==="100%"&&i({width:"100%",height:"100%"})};return window.addEventListener("resize",r),()=>window.removeEventListener("resize",r)},[t.width]);const l=r=>{r.preventDefault(),h(s.startsWith("http")?s:`https://${s}`)},m=()=>{typeof t.width=="number"&&typeof t.height=="number"&&i({width:t.height,height:t.width})};return e.jsxs("div",{className:"h-full flex flex-col p-4 sm:p-6 lg:p-8 text-text-primary",children:[e.jsxs("header",{className:"mb-6",children:[e.jsxs("h1",{className:"text-3xl font-bold flex items-center",children:[e.jsx(p,{}),e.jsx("span",{className:"ml-3",children:"Responsive Tester"})]}),e.jsx("p",{className:"text-text-secondary mt-1",children:"Preview your web pages at different screen sizes."})]}),e.jsxs("form",{onSubmit:l,className:"flex items-center gap-2 mb-2",children:[e.jsx("input",{type:"text",value:s,onChange:r=>n(r.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"}),e.jsx("button",{type:"submit",className:"btn-primary px-6 py-2",children:"Load"})]}),e.jsxs("div",{className:"bg-surface p-2 rounded-lg flex flex-wrap justify-center items-center gap-2 mb-4 border border-border",children:[Object.keys(a).map(r=>e.jsx("button",{onClick:()=>i(a[r]),className:`px-3 py-1 rounded-md text-sm ${JSON.stringify(t)===JSON.stringify(a[r])?"bg-primary/10 text-primary font-semibold":"hover:bg-gray-100"}`,children:r},r)),e.jsxs("div",{className:"flex items-center gap-1 ml-4",children:[e.jsx("input",{type:"number",value:typeof t.width=="number"?t.width:"",onChange:r=>i({...t,width:Number(r.target.value)}),className:"w-20 px-2 py-1 bg-gray-100 border border-border rounded-md text-sm"}),e.jsx("span",{className:"text-sm text-text-secondary",children:"x"}),e.jsx("input",{type:"number",value:typeof t.height=="number"?t.height:"",onChange:r=>i({...t,height:Number(r.target.value)}),className:"w-20 px-2 py-1 bg-gray-100 border border-border rounded-md text-sm"})]}),e.jsx("button",{onClick:m,className:"px-3 py-1 rounded-md text-sm hover:bg-gray-100",title:"Rotate",children:"๐Ÿ”„"})]}),e.jsx("div",{className:"flex-grow bg-background rounded-lg p-4 overflow-auto border border-border",children:e.jsx("iframe",{src:d,style:{width:t.width,height:t.height},className:"bg-white border-4 border-gray-300 rounded-md transition-all duration-300 shadow-lg mx-auto",title:"Responsive Preview"},d)})]})};export{j as ResponsiveTester};2//# sourceMappingURL=ResponsiveTester-DppCccuL.js.map3