CoolFace
Apppublic

admin08077/Githubgemini

sourceHugging Faceotherupdated 10mo agoView on Hugging Face
0likes
FontPreviewPicker-CKFfwwwW.js.map1 linesDownload Raw Back to assets
1{"version":3,"file":"FontPreviewPicker-CKFfwwwW.js","sources":["../../components/features/FontPreviewPicker.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', 'Great Vibes', 'EB Garamond'\n];\n\nexport const FontPreviewPicker: React.FC = () => {\n    const [text, setText] = useState('The quick brown fox jumps over the lazy dog.');\n    const [fontSize, setFontSize] = useState(24);\n\n    useEffect(() => {\n        const fontsToLoad = popularFonts.join('|').replace(/ /g, '+');\n        const linkId = 'font-picker-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}:400,700&display=swap`;\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\">\n                <h1 className=\"text-3xl font-bold flex items-center\">\n                    <TypographyLabIcon />\n                    <span className=\"ml-3\">Font Preview Picker</span>\n                </h1>\n                <p className=\"text-text-secondary mt-1\">Enter your text and see how it looks with different fonts.</p>\n            </header>\n\n            <div className=\"flex flex-col md:flex-row gap-4 mb-6\">\n                <div className=\"flex-grow\">\n                    <label htmlFor=\"preview-text\" className=\"text-sm font-medium\">Preview Text</label>\n                    <input\n                        id=\"preview-text\"\n                        type=\"text\"\n                        value={text}\n                        onChange={e => setText(e.target.value)}\n                        className=\"w-full mt-1 p-2 bg-surface border border-border rounded-md\"\n                    />\n                </div>\n                <div>\n                    <label htmlFor=\"font-size\" className=\"text-sm font-medium\">Font Size ({fontSize}px)</label>\n                    <input\n                        id=\"font-size\"\n                        type=\"range\"\n                        min=\"12\"\n                        max=\"72\"\n                        value={fontSize}\n                        onChange={e => setFontSize(Number(e.target.value))}\n                        className=\"w-full mt-1\"\n                    />\n                </div>\n            </div>\n\n            <div className=\"flex-grow bg-surface border border-border rounded-lg p-4 overflow-y-auto\">\n                <div className=\"space-y-4\">\n                    {popularFonts.map(font => (\n                        <div key={font} className=\"border-b border-border pb-2\">\n                            <p className=\"text-sm text-text-secondary\">{font}</p>\n                            <p style={{ fontFamily: `'${font}', sans-serif`, fontSize: `${fontSize}px` }}>\n                                {text}\n                            </p>\n                        </div>\n                    ))}\n                </div>\n            </div>\n        </div>\n    );\n};"],"names":["popularFonts","FontPreviewPicker","text","setText","useState","fontSize","setFontSize","useEffect","fontsToLoad","linkId","link","jsxs","jsx","TypographyLabIcon","font"],"mappings":"6mFAGA,MAAMA,EAAe,CACjB,SAAU,YAAa,OAAQ,aAAc,SAAU,kBAAmB,UAAW,UAAW,SAAU,eAC1G,mBAAoB,OAAQ,YAAa,SAAU,UAAW,aAAc,cAAe,aAC/F,EAEaC,GAA8B,IAAM,CAC7C,KAAM,CAACC,EAAMC,CAAO,EAAIC,EAAAA,SAAS,8CAA8C,EACzE,CAACC,EAAUC,CAAW,EAAIF,EAAAA,SAAS,EAAE,EAE3CG,OAAAA,EAAAA,UAAU,IAAM,CACZ,MAAMC,EAAcR,EAAa,KAAK,GAAG,EAAE,QAAQ,KAAM,GAAG,EACtDS,EAAS,yBACf,IAAIC,EAAO,SAAS,eAAeD,CAAM,EACpCC,IACDA,EAAO,SAAS,cAAc,MAAM,EACpCA,EAAK,GAAKD,EACVC,EAAK,IAAM,aACX,SAAS,KAAK,YAAYA,CAAI,GAElCA,EAAK,KAAO,2CAA2CF,CAAW,uBACtE,EAAG,CAAA,CAAE,EAGDG,EAAAA,KAAC,MAAA,CAAI,UAAU,2DACX,SAAA,CAAAA,EAAAA,KAAC,SAAA,CAAO,UAAU,OACd,SAAA,CAAAA,EAAAA,KAAC,KAAA,CAAG,UAAU,uCACV,SAAA,CAAAC,EAAAA,IAACC,EAAA,EAAkB,EACnBD,EAAAA,IAAC,OAAA,CAAK,UAAU,OAAO,SAAA,qBAAA,CAAmB,CAAA,EAC9C,EACAA,EAAAA,IAAC,IAAA,CAAE,UAAU,2BAA2B,SAAA,4DAAA,CAA0D,CAAA,EACtG,EAEAD,EAAAA,KAAC,MAAA,CAAI,UAAU,uCACX,SAAA,CAAAA,EAAAA,KAAC,MAAA,CAAI,UAAU,YACX,SAAA,CAAAC,MAAC,QAAA,CAAM,QAAQ,eAAe,UAAU,sBAAsB,SAAA,eAAY,EAC1EA,EAAAA,IAAC,QAAA,CACG,GAAG,eACH,KAAK,OACL,MAAOV,EACP,SAAU,GAAKC,EAAQ,EAAE,OAAO,KAAK,EACrC,UAAU,4DAAA,CAAA,CACd,EACJ,SACC,MAAA,CACG,SAAA,CAAAQ,EAAAA,KAAC,QAAA,CAAM,QAAQ,YAAY,UAAU,sBAAsB,SAAA,CAAA,cAAYN,EAAS,KAAA,EAAG,EACnFO,EAAAA,IAAC,QAAA,CACG,GAAG,YACH,KAAK,QACL,IAAI,KACJ,IAAI,KACJ,MAAOP,EACP,SAAU,GAAKC,EAAY,OAAO,EAAE,OAAO,KAAK,CAAC,EACjD,UAAU,aAAA,CAAA,CACd,CAAA,CACJ,CAAA,EACJ,EAEAM,MAAC,MAAA,CAAI,UAAU,2EACX,eAAC,MAAA,CAAI,UAAU,YACV,SAAAZ,EAAa,IAAIc,GACdH,EAAAA,KAAC,MAAA,CAAe,UAAU,8BACtB,SAAA,CAAAC,EAAAA,IAAC,IAAA,CAAE,UAAU,8BAA+B,SAAAE,EAAK,EACjDF,EAAAA,IAAC,IAAA,CAAE,MAAO,CAAE,WAAY,IAAIE,CAAI,gBAAiB,SAAU,GAAGT,CAAQ,IAAA,EACjE,SAAAH,CAAA,CACL,CAAA,GAJMY,CAKV,CACH,CAAA,CACL,CAAA,CACJ,CAAA,EACJ,CAER"}