initial commit

components/fontTransforms.jsx

@@ -0,0 +1,86 @@
+// 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);
+};