https://colb.ai/assets/TypographyTest-D8WRNHT3.js

1import{r,j as e}from"./index-DtQD1PkE.js";import{l as o}from"./ICON-COLOR-small-QndIJIpw.js";const n=[{name:"Space Mono",category:"Monospace"},{name:"Inter",category:"Sans Serif"},{name:"Roboto",category:"Sans Serif"},{name:"Open Sans",category:"Sans Serif"},{name:"Montserrat",category:"Sans Serif"},{name:"Lato",category:"Sans Serif"},{name:"Poppins",category:"Sans Serif"},{name:"Raleway",category:"Sans Serif"},{name:"Ubuntu",category:"Sans Serif"},{name:"Rubik",category:"Sans Serif"},{name:"Lora",category:"Serif"},{name:"Roboto Mono",category:"Monospace"},{name:"Source Code Pro",category:"Monospace"},{name:"Space Grotesk",category:"Sans Serif"},{name:"Syne",category:"Sans Serif"},{name:"Outfit",category:"Sans Serif"},{name:"DM Sans",category:"Sans Serif"},{name:"Manrope",category:"Sans Serif"}],g=()=>{r.useEffect(()=>{const a=document.createElement("link");return a.href=`https://fonts.googleapis.com/css2?${n.map(c=>`family=${c.name.replace(/ /g,"+")}:wght@300;400;500;600;700;800;900`).join("&")}&display=swap`,a.rel="stylesheet",document.head.appendChild(a),()=>{document.head.removeChild(a)}},[]);const[t,i]=r.useState("Colb.ai"),[s,l]=r.useState(!1);return e.jsx("div",{className:`min-h-screen p-8 transition-colors duration-300 ${s?"bg-slate-950 text-white":"bg-gray-50 text-slate-900"}`,children:e.jsxs("div",{className:"max-w-6xl mx-auto",children:[e.jsxs("div",{className:"flex flex-col md:flex-row justify-between items-center mb-12 gap-6 sticky top-0 z-10 py-4 bg-inherit/80 backdrop-blur-md border-b border-gray-200/20",children:[e.jsxs("div",{children:[e.jsx("h1",{className:"text-3xl font-bold mb-2",children:"Logo Typography Tester"}),e.jsx("p",{className:"opacity-70",children:"Compare how the logo icon pairs with different typefaces."})]}),e.jsxs("div",{className:"flex gap-4 items-center",children:[e.jsxs("div",{className:"flex flex-col",children:[e.jsx("label",{className:"text-xs font-semibold uppercase tracking-wider mb-1 opacity-70",children:"Test Text"}),e.jsx("input",{type:"text",value:t,onChange:a=>i(a.target.value),className:`px-4 py-2 rounded-lg border ${s?"bg-slate-800 border-slate-700":"bg-white border-gray-300"} focus:ring-2 focus:ring-blue-500 outline-none transition-all`})]}),e.jsx("button",{onClick:()=>l(!s),className:`p-3 rounded-lg border ${s?"bg-slate-800 border-slate-700 hover:bg-slate-700":"bg-white border-gray-300 hover:bg-gray-100"} transition-all`,children:s?"🌙 Dark":"☀️ Light"})]})]}),e.jsx("div",{className:"grid grid-cols-1 gap-12",children:n.map(a=>e.jsx("div",{className:`p-8 rounded-2xl border ${s?"bg-slate-900/50 border-slate-800":"bg-white border-gray-200"} hover:shadow-xl transition-shadow duration-300`,children:e.jsxs("div",{className:"flex flex-col gap-6",children:[e.jsxs("div",{className:"flex justify-between items-center border-b pb-4 border-gray-200/10",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("span",{className:"text-lg font-mono opacity-50",children:a.name}),e.jsx("span",{className:`text-xs px-2 py-1 rounded-full ${s?"bg-slate-800 text-slate-400":"bg-gray-100 text-gray-500"}`,children:a.category})]}),e.jsx("a",{href:`https://fonts.google.com/specimen/${a.name.replace(/ /g,"+")}`,target:"_blank",rel:"noopener noreferrer",className:"text-blue-500 hover:underline text-sm",children:"View on Google Fonts"})]}),e.jsxs("div",{className:"grid grid-cols-1 lg:grid-cols-2 gap-12 items-center",children:[e.jsxs("div",{className:"space-y-8",children:[e.jsxs("div",{className:"flex items-center gap-4 group",children:[e.jsx("img",{src:o,alt:"Logo",className:"w-12 h-12 object-contain group-hover:rotate-12 transition-transform duration-500"}),e.jsx("span",{style:{fontFamily:a.name,fontWeight:700},className:"text-5xl tracking-tight",children:t})]}),e.jsxs("div",{className:"flex items-center gap-4 opacity-80",children:[e.jsx("img",{src:o,alt:"Logo",className:"w-8 h-8 object-contain opacity-80"}),e.jsx("span",{style:{fontFamily:a.name,fontWeight:400},className:"text-3xl tracking-tight",children:t})]}),e.jsxs("div",{className:"flex items-center gap-3 opacity-70",children:[e.jsx("img",{src:o,alt:"Logo",className:"w-6 h-6 object-contain opacity-70"}),e.jsx("span",{style:{fontFamily:a.name,fontWeight:600},className:"text-xl uppercase tracking-[0.2em]",children:t})]})]}),e.jsxs("div",{className:"opacity-60 space-y-4 text-sm break-words hidden sm:block",children:[e.jsx("p",{style:{fontFamily:a.name,fontWeight:400},children:"The quick brown fox jumps over the lazy dog. 1234567890"}),e.jsx("p",{style:{fontFamily:a.name,fontWeight:700},children:"The quick brown fox jumps over the lazy dog. 1234567890"}),e.jsx("div",{className:"h-1 w-full bg-gradient-to-r from-transparent via-current to-transparent opacity-20"}),e.jsxs("p",{style:{fontFamily:a.name},className:"text-xs leading-relaxed",children:["This is a sample paragraph to show how the font looks in a body text context. Good typography is invisible, but it makes the reading experience effortless. Testing ",a.name," for the Colb.ai brand identity."]})]})]})]})},a.name))}),e.jsx("div",{className:"mt-20 text-center opacity-40 pb-10",children:e.jsx("p",{children:"Typography Playground for Colb.ai"})})]})})};export{g as default};
2//# sourceMappingURL=TypographyTest-D8WRNHT3.js.map