initial commit

2025-08-01 17:13:52 +02:00
commit 49bb62fc4e
47 changed files with 11431 additions and 0 deletions
--- a/components/EnhancedTextInput.jsx
+++ b/components/EnhancedTextInput.jsx
@@ -0,0 +1,139 @@
+import React, { useRef, useState } from "react";
+import { motion } from "framer-motion";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Type, X, Sparkles, Shuffle } from "lucide-react";
+
+export default function EnhancedTextInput({
+  text: _text,
+  inputText,
+  onChange: _onChange,
+  onTextChange,
+  placeholder,
+  onRandomFont,
+}) {
+  const text = _text ?? inputText ?? "";
+  const change = _onChange ?? onTextChange ?? (() => {});
+  const safeLen = (v) => (typeof v === "string" ? v.length : 0);
+
+  const inputRef = useRef(null);
+  const [focused, setFocused] = useState(false);
+
+  const quickTexts = [
+    "Hello Instagram! 👋",
+    "Follow me! ✨",
+    "New Post 🔥",
+    "Story Time 📖",
+    "Good Vibes Only ✌️",
+  ];
+
+  const handleClear = () => {
+    change("");
+    inputRef.current?.focus();
+  };
+
+  const handleQuickText = (qt) => {
+    change(qt);
+    inputRef.current?.focus();
+  };
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ delay: 0.2 }}
+      className="mb-6 sm:mb-8"
+    >
+      {/* Stylischer Button über dem Textfeld */}
+      <div className="flex justify-start mb-4">
+        <Button
+          onClick={onRandomFont}
+          className="bg-pink-600 hover:bg-pink-700 text-white text-sm font-semibold px-4 py-2 rounded-xl shadow-md flex items-center gap-2 transition-all duration-200 hover:scale-105"
+        >
+          <Shuffle className="w-4 h-4" />
+          Try Random Font
+        </Button>
+      </div>
+
+      {/* Eingabe */}
+      <div className="relative mb-4">
+        <div
+          className={`relative bg-white/95 backdrop-blur-sm rounded-2xl transition-all duration-300 ${
+            focused
+              ? "ring-2 ring-pink-400 shadow-xl scale-[1.02]"
+              : "shadow-lg hover:shadow-xl"
+          }`}
+        >
+          <div className="flex items-center p-1">
+            <div className="flex items-center justify-center w-12 h-12 bg-gradient-to-br from-pink-500 to-purple-600 rounded-xl mr-3">
+              <Type className="w-5 h-5 text-white" />
+            </div>
+
+            <Input
+              ref={inputRef}
+              value={text}
+              onChange={(e) => change(e.target.value)}
+              onFocus={() => setFocused(true)}
+              onBlur={() => setFocused(false)}
+              placeholder={placeholder}
+              className="flex-1 border-0 bg-transparent text-gray-800 text-lg font-medium placeholder:text-gray-400 focus-visible:ring-0 focus-visible:ring-offset-0"
+              maxLength={100}
+            />
+
+            {!!safeLen(text) && (
+              <Button
+                onClick={handleClear}
+                variant="ghost"
+                size="sm"
+                style={{ pointerEvents: "auto" }}
+                className="mr-2 border border-black/20 hover:border-black/40 hover:bg-black/10 text-black rounded-full w-8 h-8 p-0 transition"
+                aria-label="Clear text"
+              >
+                <X className="w-4 h-4" />
+              </Button>
+            )}
+          </div>
+        </div>
+
+        {/* Counter */}
+        <span className="absolute -bottom-1 right-4 text-xs text-black font-medium">
+          {safeLen(text)}/100
+        </span>
+      </div>
+
+      {/* Quick Examples */}
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ delay: 0.4 }}
+        className="mb-4"
+      >
+        <div className="flex items-center gap-2 mb-3">
+          <Sparkles className="w-4 h-4 text-yellow-300" />
+          <span className="text-white/80 text-sm font-medium">Quick Examples:</span>
+        </div>
+
+        <div className="flex flex-wrap gap-2">
+          {quickTexts.map((qt) => (
+            <Button
+              key={qt}
+              onClick={() => handleQuickText(qt)}
+              variant="outline"
+              size="sm"
+              className="bg-white/10 border-white/20 text-white hover:bg-white/20 backdrop-blur-sm text-xs transition-all duration-200 hover:scale-105"
+            >
+              {qt}
+            </Button>
+          ))}
+        </div>
+      </motion.div>
+
+      {/* USP / SEO-Text */}
+      <div className="text-sm text-white/80 text-center space-y-1 mt-6">
+        <p>📱 Optimized for Instagram, TikTok, Threads & WhatsApp</p>
+        <p>🔍 SEO-safe Unicode – 100% copy-paste ready</p>
+        <p>🚀 Built for speed & mobile-first UX</p>
+      </div>
+    </motion.div>
+  );
+}