function BottomNavigation() { const [activeTab, setActiveTab] = useState("photos"); const navItems = [ { id: "photos", label: "Мои фото", icon: "fas fa-image", link: "/my-photos" }, { id: "photoshoot", label: "Фотосессии", icon: "fas fa-camera-retro", link: "/photoshoot" }, { id: "video", label: "Видео", icon: "fas fa-play-circle", link: "/video" }, { id: "subscription", label: "Подписка", icon: "fas fa-crown", link: "/subscription" } ]; const handleTabClick = (tabId)=>{ setActiveTab(tabId); }; return /*#__PURE__*/ React.createElement("nav", { className: "fixed bottom-0 left-0 right-0 bg-gradient-to-r from-[#67E8F9] to-[#553C9A] px-4 py-2", __source: { fileName: "", lineNumber: 36, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-screen-xl mx-auto", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, navItems.map((item)=>/*#__PURE__*/ React.createElement("a", { key: item.id, href: item.link, className: "flex flex-col items-center p-2 text-white hover:text-white/80 transition-colors", onClick: ()=>handleTabClick(item.id), __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${item.icon} text-xl mb-1 ${activeTab === item.id ? "text-white" : "text-white/80"}`, __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-xs font-inter", __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, item.label)))))); } function BottomNavigationStory() { return /*#__PURE__*/ React.createElement("div", { className: "h-screen bg-white dark:bg-gray-900", __source: { fileName: "", lineNumber: 60, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-gray-900 dark:text-white font-inter font-bold mb-4", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, "Нижняя навигация"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 dark:text-gray-300 font-inter mb-8", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, "Пример навигационной панели в обычном состоянии")), /*#__PURE__*/ React.createElement(BottomNavigation, { __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this })); } function MainComponent() { const [selectedImage, setSelectedImage] = useState(null); const [isLoading, setIsLoading] = useState(false); const photos = [ { id: 1, src: "/photos/photo1.jpg", alt: "Портрет девушки в парке" }, { id: 2, src: "/photos/photo2.jpg", alt: "Фотосессия на природе" }, { id: 3, src: "/photos/photo3.jpg", alt: "Студийный портрет" }, { id: 4, src: "/photos/photo4.jpg", alt: "Уличная фотосессия" }, { id: 5, src: "/photos/photo5.jpg", alt: "Модельные фото" }, { id: 6, src: "/photos/photo6.jpg", alt: "Портретная съемка" } ]; const openFullscreen = (photo)=>{ setIsLoading(true); setSelectedImage(photo); }; const navigateImage = (direction)=>{ const currentIndex = photos.findIndex((photo)=>photo.id === selectedImage.id); const newIndex = direction === "next" ? (currentIndex + 1) % photos.length : (currentIndex - 1 + photos.length) % photos.length; setSelectedImage(photos[newIndex]); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#000000] pb-20 overflow-hidden", __source: { fileName: "", lineNumber: 28, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 py-8 relative", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border-b border-white/20 pb-8 mb-8", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-6xl font-bold font-inter bg-gradient-to-r from-[#67E8F9] to-[#553C9A] text-transparent bg-clip-text inline-block", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, "Face Me")), /*#__PURE__*/ React.createElement("div", { className: "text-center mb-12", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-4xl font-bold font-inter bg-gradient-to-r from-[#67E8F9] to-[#553C9A] text-transparent bg-clip-text inline-block", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, "Мои фото")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, photos.map((photo)=>/*#__PURE__*/ React.createElement("div", { key: photo.id, className: "group relative aspect-square cursor-pointer rounded-xl overflow-hidden backdrop-blur-md bg-black/30 border border-[#67E8F9]/20 hover:scale-105 transition-all duration-500 hover:neon-glow floating", onClick: ()=>openFullscreen(photo), __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-gradient-to-t from-[#67E8F9]/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: photo.src, alt: photo.alt, className: "w-full h-full object-cover transition-transform duration-500 group-hover:scale-110", onLoad: ()=>setIsLoading(false), __source: { fileName: "", lineNumber: 55, columnNumber: 15 }, __self: this }))))), selectedImage && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black/95 z-50 backdrop-blur-lg flex items-center justify-center p-4 animate-[fadeIn_0.3s_ease-in-out]", onClick: (e)=>{ if (e.target === e.currentTarget) setSelectedImage(null); }, __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative max-w-6xl max-h-[90vh] w-full", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: selectedImage.src, alt: selectedImage.alt, className: "w-full h-full object-contain animate-[scaleIn_0.3s_ease-in-out]", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "absolute top-4 right-4 w-10 h-10 rounded-full bg-black/30 backdrop-blur-sm flex items-center justify-center text-white/70 hover:text-white hover:bg-black/50 transition-all duration-300", onClick: (e)=>{ e.stopPropagation(); setSelectedImage(null); }, __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times text-lg", __source: { fileName: "", lineNumber: 89, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "absolute left-4 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-black/30 backdrop-blur-sm flex items-center justify-center text-white/70 hover:text-white hover:bg-black/50 transition-all duration-300", onClick: (e)=>{ e.stopPropagation(); navigateImage("prev"); }, __source: { fileName: "", lineNumber: 91, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-left text-lg", __source: { fileName: "", lineNumber: 100, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "absolute right-4 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-black/30 backdrop-blur-sm flex items-center justify-center text-white/70 hover:text-white hover:bg-black/50 transition-all duration-300", onClick: (e)=>{ e.stopPropagation(); navigateImage("next"); }, __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-right text-lg", __source: { fileName: "", lineNumber: 111, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement(BottomNavigation, { __source: { fileName: "", lineNumber: 117, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 118, columnNumber: 7 }, __self: this }, ` .neon-glow { box-shadow: 0 0 15px #67E8F9, 0 0 30px #553C9A; } .floating { animation: float 6s ease-in-out infinite; } @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } } .bg-animate { background: linear-gradient(45deg, #000000, #1a1a2e); background-size: 400% 400%; animation: gradientBG 15s ease infinite; } @keyframes gradientBG { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .neon-loader { border: 2px solid #67E8F9; box-shadow: 0 0 10px #553C9A; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes scaleIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } } `)); }