admin08077/Githubgemini

1import{r as n,j as e}from"./react-DKy9e2uO.js";import{p as u}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 b=["Roboto","Open Sans","Lato","Montserrat","Oswald","Source Sans Pro","Raleway","Poppins","Nunito","Merriweather","Playfair Display","Lora","Noto Sans","Ubuntu","PT Sans","Slabo 27px"],S=()=>{const[t,x]=n.useState("Oswald"),[o,g]=n.useState("Roboto");n.useEffect(()=>{const a=[t,o].filter(Boolean).join("|");if(a){const l="font-pairing-stylesheet";let s=document.getElementById(l);s||(s=document.createElement("link"),s.id=l,s.rel="stylesheet",document.head.appendChild(s)),s.href=`https://fonts.googleapis.com/css?family=${a.replace(/ /g,"+")}:400,700&display=swap`}},[t,o]);const i=({label:a,value:l,onChange:s})=>e.jsxs("div",{children:[e.jsx("label",{className:"block text-sm font-medium text-text-secondary",children:a}),e.jsx("select",{value:l,onChange:r=>s(r.target.value),className:"w-full mt-1 px-3 py-2 rounded-md bg-surface border border-border",children:b.map(r=>e.jsx("option",{value:r,children:r},r))})]}),d=`@import url('https://fonts.googleapis.com/css?family=${t.replace(/ /g,"+")}:700&display=swap');`,c=`@import url('https://fonts.googleapis.com/css?family=${o.replace(/ /g,"+")}:400&display=swap');`,m=`font-family: '${t}', sans-serif;`,p=`font-family: '${o}', sans-serif;`;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(u,{}),e.jsx("span",{className:"ml-3",children:"Typography Lab"})]}),e.jsx("p",{className:"text-text-secondary mt-1",children:"Preview font pairings and get the necessary CSS rules."})]}),e.jsxs("div",{className:"flex-grow grid grid-cols-1 lg:grid-cols-3 gap-6 min-h-0",children:[e.jsxs("div",{className:"lg:col-span-1 flex flex-col gap-4 bg-surface border border-border p-6 rounded-lg",children:[e.jsx("h3",{className:"text-xl font-bold",children:"Controls"}),e.jsx(i,{label:"Heading Font",value:t,onChange:x}),e.jsx(i,{label:"Body Font",value:o,onChange:g}),e.jsxs("div",{className:"space-y-2 mt-4 pt-4 border-t border-border",children:[e.jsx("label",{className:"block text-sm font-medium text-text-secondary",children:"CSS Rules"}),e.jsxs("div",{className:"relative",children:[e.jsx("pre",{className:"bg-background p-2 rounded-md text-primary text-xs overflow-x-auto",children:d}),e.jsx("button",{onClick:()=>navigator.clipboard.writeText(d),className:"absolute top-1 right-1 px-2 py-0.5 bg-gray-100 hover:bg-gray-200 rounded-md text-xs",children:"Copy"})]}),e.jsxs("div",{className:"relative",children:[e.jsx("pre",{className:"bg-background p-2 rounded-md text-primary text-xs overflow-x-auto",children:m}),e.jsx("button",{onClick:()=>navigator.clipboard.writeText(m),className:"absolute top-1 right-1 px-2 py-0.5 bg-gray-100 hover:bg-gray-200 rounded-md text-xs",children:"Copy"})]}),e.jsxs("div",{className:"relative",children:[e.jsx("pre",{className:"bg-background p-2 rounded-md text-primary text-xs overflow-x-auto",children:c}),e.jsx("button",{onClick:()=>navigator.clipboard.writeText(c),className:"absolute top-1 right-1 px-2 py-0.5 bg-gray-100 hover:bg-gray-200 rounded-md text-xs",children:"Copy"})]}),e.jsxs("div",{className:"relative",children:[e.jsx("pre",{className:"bg-background p-2 rounded-md text-primary text-xs overflow-x-auto",children:p}),e.jsx("button",{onClick:()=>navigator.clipboard.writeText(p),className:"absolute top-1 right-1 px-2 py-0.5 bg-gray-100 hover:bg-gray-200 rounded-md text-xs",children:"Copy"})]})]})]}),e.jsxs("div",{className:"lg:col-span-2 bg-background border border-border rounded-lg p-8 overflow-y-auto",children:[e.jsx("h2",{className:"text-4xl font-bold mb-4",style:{fontFamily:`'${t}', sans-serif`},children:"The Quick Brown Fox Jumps Over the Lazy Dog"}),e.jsx("p",{className:"text-lg",style:{fontFamily:`'${o}', sans-serif`},children:"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."})]})]})]})};export{S as TypographyLab};2//# sourceMappingURL=TypographyLab-Db6ABU3D.js.map3