60 lines
3.1 KiB
TypeScript
60 lines
3.1 KiB
TypeScript
import React from 'react';
|
|
import { PawPrint, Heart, Sparkles, Cat } from 'lucide-react';
|
|
|
|
interface GeneratorProps {
|
|
url: string;
|
|
setUrl: (val: string) => void;
|
|
onGenerate: () => void;
|
|
}
|
|
|
|
export const Generator: React.FC<GeneratorProps> = ({ url, setUrl, onGenerate }) => (
|
|
<div className="max-w-[800px] mx-auto pt-10 sm:pt-16 px-4 flex flex-col items-center">
|
|
{/* Header - Skalowanie tekstu i ikony */}
|
|
<header className="text-center mb-8 sm:mb-12">
|
|
<h1 className="text-4xl sm:text-7xl font-black text-pink-500 mb-2 tracking-tighter flex items-center justify-center gap-2 sm:gap-4">
|
|
KittyURL <PawPrint className="w-8 h-8 sm:w-12 sm:h-12" fill="currentColor" />
|
|
</h1>
|
|
<p className="text-pink-300 text-lg sm:text-xl font-medium px-4">
|
|
Shorten KKKKKK your links with a purr!
|
|
</p>
|
|
</header>
|
|
|
|
{/* Główna karta - mniejsze paddingi i zaokrąglenia na mobile */}
|
|
<div className="w-full bg-white rounded-[2rem] sm:rounded-[3rem] shadow-2xl shadow-pink-200/50 p-6 sm:p-10 border-4 border-white relative overflow-hidden">
|
|
<div className="mb-6">
|
|
<label className="block text-[10px] sm:text-xs font-black uppercase tracking-widest text-pink-300 mb-3 ml-2">
|
|
Long URL to shorten
|
|
</label>
|
|
<div className="relative">
|
|
<input
|
|
type="url"
|
|
placeholder="https://example.com/very-long-url"
|
|
className="w-full p-4 sm:p-5 bg-pink-50/30 border-2 border-pink-100 rounded-xl sm:rounded-2xl outline-none focus:border-pink-400 focus:bg-white transition-all text-base sm:text-lg shadow-inner pr-12"
|
|
value={url}
|
|
onChange={(e) => setUrl(e.target.value)}
|
|
/>
|
|
<Heart className="absolute right-4 top-1/2 -translate-y-1/2 text-pink-200 w-5 h-5 sm:w-6 sm:h-6" />
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
onClick={onGenerate}
|
|
className="w-full bg-pink-500 hover:bg-pink-600 text-white font-black py-4 sm:py-5 rounded-xl sm:rounded-[1.5rem] transition-all shadow-xl shadow-pink-100 active:scale-[0.98] text-lg sm:text-xl flex items-center justify-center gap-3 cursor-pointer"
|
|
>
|
|
<span className="hidden xs:inline">Generate Kitty Link</span>
|
|
<span className="xs:hidden">Generate</span>
|
|
<Sparkles className="w-5 h-5 sm:w-6 sm:h-6" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Sekcja "No links yet" - Skalowanie paddingu i ikony */}
|
|
<div className="w-full mt-10 sm:mt-16 text-center">
|
|
<div className="bg-pink-100/50 rounded-[2rem] sm:rounded-[2.5rem] border-4 border-dashed border-pink-200 p-8 sm:p-12">
|
|
<Cat className="mx-auto text-pink-200 mb-4 w-12 h-12 sm:w-16 sm:h-16" />
|
|
<p className="text-pink-300 font-bold text-sm sm:text-base px-2">
|
|
No links generated yet. Feed me a URL! 🐾
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
); |