function Navigation() { const [loading, setLoading] = useState(false); const [shellImages, setShellImages] = useState({}); const [isMenuOpen, setIsMenuOpen] = useState(false); const [searchTerm, setSearchTerm] = useState(""); const generateImage = useCallback(async (prompt, family)=>{ try { setLoading(true); const useStable = family === "conidae" || family === "muricidae"; const endpoint = useStable ? `/integrations/stable-diffusion-v-3/?prompt=${encodeURIComponent(prompt)}` : `/integrations/dall-e-3/?prompt=${encodeURIComponent(prompt)}`; const response = await fetch(endpoint); const result = await response.json(); setShellImages((prev)=>({ ...prev, [family]: result.data[0] })); } catch (error) { console.error(error); } finally{ setLoading(false); } }, []); useEffect(()=>{ generateImage("realistic detailed conch shell on white background, high resolution photo", "strombidae"); generateImage("realistic detailed cone shell on white background, high resolution photo", "conidae"); generateImage("realistic detailed murex shell spiky on white background, high resolution photo", "muricidae"); generateImage("realistic detailed scallop shell on white background, high resolution photo", "pectinidae"); }, []); const navLinks = [ { name: "Home", path: "/" }, { name: "Types", path: "/types" }, { name: "Common Shells", path: "/common-shells" }, { name: "Geological History", path: "/geological-history" }, { name: "Cultural Significance", path: "/cultural-significance" }, { name: "Conservation", path: "/conservation" }, { name: "Growth & Size", path: "/growth-size" }, { name: "Threats", path: "/threats" }, { name: "Research", path: "/research" }, { name: "Shell Identifier", path: "/shell-identifier" } ]; const shellFamilies = [ { name: "Strombidae (Conch Shells)", description: "Large spiral shells with flared outer lips. Often found in tropical waters.", features: [ "Prominent spire", "Wide aperture", "Flared outer lip", "Thick shell wall" ], image: shellImages.strombidae }, { name: "Conidae (Cone Shells)", description: "Cone-shaped shells with narrow openings. Some species are venomous.", features: [ "Conical shape", "Smooth surface", "Narrow aperture", "Pattern variations" ], image: shellImages.conidae }, { name: "Muricidae (Murex Shells)", description: "Ornate shells with spines and frills. Known for their elaborate decorations.", features: [ "Spiky projections", "Long siphonal canal", "Varices (ridges)", "Complex texture" ], image: shellImages.muricidae }, { name: "Pectinidae (Scallop Shells)", description: "Fan-shaped shells with radiating ribs. Often found in pairs.", features: [ "Fan shape", "Radiating ribs", "Symmetrical ears", "Colorful patterns" ], image: shellImages.pectinidae } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 108, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "bg-gradient-to-r from-[#1a4b6e] to-[#2c3e50] text-white shadow-lg", __source: { fileName: "", lineNumber: 109, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4", __source: { fileName: "", lineNumber: 110, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between h-16", __source: { fileName: "", lineNumber: 111, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 112, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-2xl font-crimson-text", __source: { fileName: "", lineNumber: 113, columnNumber: 15 }, __self: this }, "🐚 Seashell Guide")), /*#__PURE__*/ React.createElement("div", { className: "hidden md:flex items-center space-x-4", __source: { fileName: "", lineNumber: 118, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 119, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Search...", value: searchTerm, onChange: (e)=>setSearchTerm(e.target.value), className: "px-4 py-1 rounded-full text-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-[#3498db] w-48", __source: { fileName: "", lineNumber: 120, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-search absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400", __source: { fileName: "", lineNumber: 127, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "md:hidden flex items-center", __source: { fileName: "", lineNumber: 131, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsMenuOpen(!isMenuOpen), className: "text-white", __source: { fileName: "", lineNumber: 132, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fa-solid ${isMenuOpen ? "fa-times" : "fa-bars"} text-xl`, __source: { fileName: "", lineNumber: 136, columnNumber: 17 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: `${isMenuOpen ? "block" : "hidden"} md:block pb-4`, __source: { fileName: "", lineNumber: 143, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row md:items-center md:justify-center md:space-x-6 space-y-2 md:space-y-0", __source: { fileName: "", lineNumber: 144, columnNumber: 13 }, __self: this }, navLinks.map((link, index)=>/*#__PURE__*/ React.createElement("a", { key: index, href: link.path, className: "text-gray-300 hover:text-white hover:bg-[#34495e] px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200", __source: { fileName: "", lineNumber: 146, columnNumber: 17 }, __self: this }, link.name))), /*#__PURE__*/ React.createElement("div", { className: "mt-4 md:hidden", __source: { fileName: "", lineNumber: 155, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Search...", value: searchTerm, onChange: (e)=>setSearchTerm(e.target.value), className: "w-full px-4 py-2 rounded-full text-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-[#3498db]", __source: { fileName: "", lineNumber: 156, columnNumber: 15 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f5f5f5] p-6", __source: { fileName: "", lineNumber: 168, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto", __source: { fileName: "", lineNumber: 169, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-crimson-text text-center mb-8 text-[#2c3e50]", __source: { fileName: "", lineNumber: 170, columnNumber: 11 }, __self: this }, "Seashell Identification Guide"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-8", __source: { fileName: "", lineNumber: 174, columnNumber: 11 }, __self: this }, shellFamilies.map((family, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white rounded-lg shadow-lg overflow-hidden", __source: { fileName: "", lineNumber: 176, columnNumber: 15 }, __self: this }, family.image ? /*#__PURE__*/ React.createElement("img", { src: family.image, alt: `Example of ${family.name}`, className: "w-full h-[300px] object-cover", __source: { fileName: "", lineNumber: 181, columnNumber: 19 }, __self: this }) : /*#__PURE__*/ React.createElement("div", { className: "w-full h-[300px] bg-gray-200 flex items-center justify-center", __source: { fileName: "", lineNumber: 187, columnNumber: 19 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("div", { className: "text-2xl", __source: { fileName: "", lineNumber: 189, columnNumber: 23 }, __self: this }, "🐚 Loading...") : /*#__PURE__*/ React.createElement("div", { className: "text-2xl", __source: { fileName: "", lineNumber: 191, columnNumber: 23 }, __self: this }, "🐚")), /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 196, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-crimson-text mb-3 text-[#34495e]", __source: { fileName: "", lineNumber: 197, columnNumber: 19 }, __self: this }, family.name), /*#__PURE__*/ React.createElement("p", { className: "text-[#7f8c8d] mb-4", __source: { fileName: "", lineNumber: 200, columnNumber: 19 }, __self: this }, family.description), /*#__PURE__*/ React.createElement("h3", { className: "font-crimson-text text-lg mb-2 text-[#34495e]", __source: { fileName: "", lineNumber: 201, columnNumber: 19 }, __self: this }, "Key Features:"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc pl-5", __source: { fileName: "", lineNumber: 204, columnNumber: 19 }, __self: this }, family.features.map((feature, idx)=>/*#__PURE__*/ React.createElement("li", { key: idx, className: "text-[#7f8c8d] mb-1", __source: { fileName: "", lineNumber: 206, columnNumber: 23 }, __self: this }, feature)))))))))); } function NavigationStory() { return /*#__PURE__*/ React.createElement(Navigation, { __source: { fileName: "", lineNumber: 222, columnNumber: 10 }, __self: this }); } function MainComponent() { const [loading, setLoading] = useState(false); const [shellImages, setShellImages] = useState({}); const generateImage = useCallback(async (prompt, shellType)=>{ try { setLoading(true); const response = await fetch(`/integrations/dall-e-3/?prompt=${encodeURIComponent(`${prompt}, photorealistic, white background, detailed`)}`); const result = await response.json(); setShellImages((prev)=>({ ...prev, [shellType]: result.data[0] })); } catch (error) { console.error(error); } finally{ setLoading(false); } }, []); const [selectedShell, setSelectedShell] = useState(null); const [bookData, setBookData] = useState([]); useEffect(()=>{ generateImage("common Maldivian seashells on beach", "commonShells"); generateImage("rare Maldivian seashells collection", "rareShells"); generateImage("Maldivian shell habitat underwater", "habitat"); const fetchBookData = async ()=>{ try { const response = await fetch("/integrations/book-search/?q=maldives+seashells+marine+biology&fields=*"); const data = await response.json(); setBookData(data.docs.slice(0, 3)); } catch (error) { console.error("Error fetching book data:", error); } }; fetchBookData(); }, []); const commonShellTypes = [ { category: "Common Beach Shells", description: "Frequently found along Maldivian shorelines. These shells are abundant and play a crucial role in the beach ecosystem. Sizes typically range from 2-10cm.", examples: [ "Olive Shells (2-5cm)", "Auger Shells (3-8cm)", "Sand Dollars (5-10cm)", "Common Cowries (3-7cm)" ], habitat: "Sandy beaches and shallow waters, often found in the intertidal zone where waves deposit shells", image: shellImages.commonShells, conservationStatus: "Stable population" }, { category: "Rare Specimens", description: "Uncommon and protected species that require special conservation attention. These shells are larger, ranging from 10-30cm.", examples: [ "Glory of the Sea Cone (15-20cm)", "Golden Cowrie (10-15cm)", "Precious Wentletrap (12-18cm)", "Imperial Volute (25-30cm)" ], habitat: "Deep waters and protected reefs, typically found at depths of 30-100 meters", image: shellImages.rareShells, conservationStatus: "Endangered - Protected species" }, { category: "Habitat Zones", description: "Distribution across different environments, showing size variations from 1-40cm depending on species and location.", examples: [ "Reef-dwelling species (5-40cm)", "Lagoon inhabitants (1-15cm)", "Deep water shells (10-30cm)", "Intertidal species (2-10cm)" ], habitat: "Various marine environments from shallow lagoons to deep reef slopes", image: shellImages.habitat, conservationStatus: "Varies by species and location" } ]; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f5f5f5] p-6 flex flex-col", __source: { fileName: "", lineNumber: 91, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto flex-grow", __source: { fileName: "", lineNumber: 92, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-crimson-text text-center mb-8 text-[#2c3e50]", __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this }, "Common Shells of the Maldives"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8 mb-8", __source: { fileName: "", lineNumber: 97, columnNumber: 9 }, __self: this }, commonShellTypes.map((type, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white rounded-lg shadow-lg overflow-hidden cursor-pointer transform transition-transform hover:scale-105", onClick: ()=>setSelectedShell(type), __source: { fileName: "", lineNumber: 99, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative h-[250px]", __source: { fileName: "", lineNumber: 104, columnNumber: 15 }, __self: this }, type.image ? /*#__PURE__*/ React.createElement("img", { src: type.image, alt: `${type.category} examples`, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 106, columnNumber: 19 }, __self: this }) : /*#__PURE__*/ React.createElement("div", { className: "w-full h-full bg-gray-200 flex items-center justify-center", __source: { fileName: "", lineNumber: 112, columnNumber: 19 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("div", { className: "text-2xl", __source: { fileName: "", lineNumber: 114, columnNumber: 23 }, __self: this }, "🐚 Loading...") : /*#__PURE__*/ React.createElement("div", { className: "text-2xl", __source: { fileName: "", lineNumber: 116, columnNumber: 23 }, __self: this }, "🐚")), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 text-white p-4", __source: { fileName: "", lineNumber: 120, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-crimson-text", __source: { fileName: "", lineNumber: 121, columnNumber: 19 }, __self: this }, type.category)))))), selectedShell && /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-lg p-6 mb-8", __source: { fileName: "", lineNumber: 129, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-start mb-6", __source: { fileName: "", lineNumber: 130, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-crimson-text text-[#34495e]", __source: { fileName: "", lineNumber: 131, columnNumber: 15 }, __self: this }, selectedShell.category), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSelectedShell(null), className: "text-[#7f8c8d] hover:text-[#34495e]", __source: { fileName: "", lineNumber: 134, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-times text-xl", __source: { fileName: "", lineNumber: 138, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-8", __source: { fileName: "", lineNumber: 142, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 143, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: selectedShell.image, alt: selectedShell.category, className: "w-full h-[400px] object-cover rounded-lg", __source: { fileName: "", lineNumber: 144, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 150, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 151, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-crimson-text mb-2 text-[#34495e]", __source: { fileName: "", lineNumber: 152, columnNumber: 19 }, __self: this }, "Description"), /*#__PURE__*/ React.createElement("p", { className: "text-[#7f8c8d]", __source: { fileName: "", lineNumber: 155, columnNumber: 19 }, __self: this }, selectedShell.description)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 157, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-crimson-text mb-2 text-[#34495e]", __source: { fileName: "", lineNumber: 158, columnNumber: 19 }, __self: this }, "Examples"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc pl-5 text-[#7f8c8d]", __source: { fileName: "", lineNumber: 161, columnNumber: 19 }, __self: this }, selectedShell.examples.map((example, idx)=>/*#__PURE__*/ React.createElement("li", { key: idx, __source: { fileName: "", lineNumber: 163, columnNumber: 23 }, __self: this }, example)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 167, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-crimson-text mb-2 text-[#34495e]", __source: { fileName: "", lineNumber: 168, columnNumber: 19 }, __self: this }, "Habitat"), /*#__PURE__*/ React.createElement("p", { className: "text-[#7f8c8d]", __source: { fileName: "", lineNumber: 171, columnNumber: 19 }, __self: this }, selectedShell.habitat))))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-lg p-6 mb-8", __source: { fileName: "", lineNumber: 178, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-crimson-text mb-6 text-[#34495e]", __source: { fileName: "", lineNumber: 179, columnNumber: 11 }, __self: this }, "Scientific References"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 182, columnNumber: 11 }, __self: this }, bookData.map((book, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "border-l-4 border-[#3498db] pl-4", __source: { fileName: "", lineNumber: 184, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-crimson-text text-lg mb-2 text-[#34495e]", __source: { fileName: "", lineNumber: 185, columnNumber: 17 }, __self: this }, book.title), /*#__PURE__*/ React.createElement("p", { className: "text-[#7f8c8d] text-sm mb-2", __source: { fileName: "", lineNumber: 188, columnNumber: 17 }, __self: this }, "By ", book.author_name?.[0] || "Unknown Author"), /*#__PURE__*/ React.createElement("p", { className: "text-[#7f8c8d] text-sm", __source: { fileName: "", lineNumber: 191, columnNumber: 17 }, __self: this }, "Published: ", book.first_publish_year || "N/A")))))), /*#__PURE__*/ React.createElement("footer", { className: "text-center py-4 text-[#7f8c8d]", __source: { fileName: "", lineNumber: 199, columnNumber: 7 }, __self: this }, "Made by Aaiz Mohamed Naeem")); }