// components/fontTransforms.jsx // Unicode-basiertes Font-Transformationsmapping fΓΌr deine aktuelle Font-Liste // Nutzt verschiedene Unicode-BlΓΆcke, damit beim Kopieren der "fancy" Stil erhalten bleibt. // 1) Definition der Unicode-BlΓΆcke (Startpunkte) const unicodeBlocks = { sansSerif: { upperStart: 0x1D5A0, lowerStart: 0x1D5BA }, // Mathematical Sans-Serif sansSerifBold: { upperStart: 0x1D5D4, lowerStart: 0x1D5EE }, // Bold Sans-Serif script: { upperStart: 0x1D49C, lowerStart: 0x1D4B6 }, // Mathematical Script scriptBold: { upperStart: 0x1D4D0, lowerStart: 0x1D4EA }, // Bold Script fraktur: { upperStart: 0x1D504, lowerStart: 0x1D51E }, // Mathematical Fraktur frakturBold: { upperStart: 0x1D56C, lowerStart: 0x1D586 }, // Bold Fraktur monospace: { upperStart: 0x1D670, lowerStart: 0x1D68A }, // Mathematical Monospace fullwidth: { upperStart: 0xFF21, lowerStart: 0xFF41 } // Fullwidth Latin }; // 2) Helfer zum Mappen von A-Z und a-z in den jeweiligen Unicode-Block const mapUnicode = (char, block) => { const code = char.charCodeAt(0); if (code >= 65 && code <= 90) return String.fromCodePoint(block.upperStart + (code - 65)); if (code >= 97 && code <= 122) return String.fromCodePoint(block.lowerStart + (code - 97)); return char; }; const createTransform = (blockKey) => (text) => text .split('') .map((c) => mapUnicode(c, unicodeBlocks[blockKey])) .join(''); // 3) Font-Transformations fΓΌr deine Liste export const fontTransforms = { // πŸ”€ Modern – Clean & professional Montserrat: { transform: createTransform('sansSerifBold'), category: 'modern', description: 'Montserrat – Sans-Serif Bold Unicode' }, Lato: { transform: createTransform('sansSerif'), category: 'modern', description: 'Lato – Humanistischer Sans-Serif Unicode' }, Raleway: { transform: createTransform('sansSerif'), category: 'modern', description: 'Raleway – Elegant Display Unicode' }, Poppins: { transform: createTransform('sansSerif'), category: 'modern', description: 'Poppins – Rund & freundlich Unicode' }, 'Open Sans': { transform: createTransform('sansSerif'), category: 'modern', description: 'Open Sans – Vielseitig Unicode' }, Roboto: { transform: createTransform('sansSerif'), category: 'modern', description: 'Roboto – Modernes Grotesk Unicode' }, 'Work Sans': { transform: createTransform('sansSerif'), category: 'modern', description: 'Work Sans – Tech & Clean Unicode' }, // ✍️ Handwriting – Personal & casual Pacifico: { transform: createTransform('scriptBold'), category: 'handwriting', description: 'Pacifico – Lockerer Pinsel Bold Script Unicode' }, Sacramento: { transform: createTransform('scriptBold'), category: 'handwriting', description: 'Sacramento – Retro-Handlettering Bold Script Unicode' }, Caveat: { transform: createTransform('scriptBold'), category: 'handwriting', description: 'Caveat – Natural Handwriting Bold Script Unicode' }, 'Dancing Script': { transform: createTransform('scriptBold'), category: 'handwriting', description: 'Dancing Script – Lebhafte Kursive Bold Script Unicode' }, 'Indie Flower': { transform: createTransform('scriptBold'), category: 'handwriting', description: 'Indie Flower – Verspieltes Bold Script Unicode' }, 'Amatic SC': { transform: createTransform('scriptBold'), category: 'handwriting', description: 'Amatic SC – Skizzenartiges Bold Script Unicode' }, 'Kaushan Script': { transform: createTransform('scriptBold'), category: 'handwriting', description: 'Kaushan Script – Fettere Kursive Bold Script Unicode' }, // πŸ§‘β€πŸŽ€ Statement – Bold & eye-catching Oswald: { transform: createTransform('sansSerifBold'), category: 'statement', description: 'Oswald – Bold Grotesk Unicode' }, 'Bebas Neue': { transform: createTransform('fullwidth'), category: 'statement', description: 'Bebas Neue – Fullwidth Caps Unicode' }, Anton: { transform: createTransform('fullwidth'), category: 'statement', description: 'Anton – Plakative Fullwidth Unicode' }, Ultra: { transform: createTransform('sansSerifBold'), category: 'statement', description: 'Ultra – Kompakte Bold Unicode' }, 'Stint Ultra Condensed': { transform: createTransform('sansSerifBold'), category: 'statement', description: 'Stint Ultra Condensed – Kompakte Bold Unicode' }, 'Playfair Display': { transform: createTransform('scriptBold'), category: 'statement', description: 'Playfair Display – Elegante Bold Script Unicode' }, 'Abril Fatface': { transform: createTransform('scriptBold'), category: 'statement', description: 'Abril Fatface – Fettere Bold Script Unicode' }, // πŸš€ Futuristic – Tech & gaming Exo: { transform: createTransform('sansSerif'), category: 'futuristic', description: 'Exo – Tech Grotesk Unicode' }, Orbitron: { transform: createTransform('monospace'), category: 'futuristic', description: 'Orbitron – Sci-Fi Monospace Unicode' }, Audiowide: { transform: createTransform('monospace'), category: 'futuristic', description: 'Audiowide – Rundes Monospace Unicode' }, Rajdhani: { transform: createTransform('monospace'), category: 'futuristic', description: 'Rajdhani – Digital Monospace Unicode' }, 'Space Mono': { transform: createTransform('monospace'), category: 'futuristic', description: 'Space Mono – Tech Monospace Unicode' }, Questrial: { transform: createTransform('sansSerif'), category: 'futuristic', description: 'Questrial – Clean Sans-Serif Unicode' }, // 🧒 Aesthetic – Retro & Instagram vibes 'Press Start 2P': { transform: createTransform('monospace'), category: 'aesthetic', description: 'Press Start 2P – Pixel Monospace Unicode' }, Righteous: { transform: createTransform('frakturBold'), category: 'aesthetic', description: 'Righteous – Stylische Bold Fraktur Unicode' }, 'Metal Mania': { transform: createTransform('scriptBold'), category: 'aesthetic', description: 'Metal Mania – Fettere Script Unicode' } }; // Hilfsfunktionen export const getPopularFonts = () => Object.keys(fontTransforms).slice(0, 10); export const getFontsByCategory = (category) => ( category === 'all' ? Object.keys(fontTransforms) : Object.keys(fontTransforms).filter(f => fontTransforms[f].category === category) ); export const transformText = (text, fontName) => { const font = fontTransforms[fontName]; if (!font || !text) return text; return font.transform(text); };