function PostCard({ avatarUrl, username, timestamp, content, likes, comments, shares }) { return /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-4 max-w-[600px]", __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-4", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: avatarUrl || "/default-avatar.jpg", alt: `${username}'s profile picture`, className: "w-12 h-12 rounded-full object-cover", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "ml-3", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto font-medium", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, username), /*#__PURE__*/ React.createElement("p", { className: "text-gray-500 text-sm", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, timestamp))), /*#__PURE__*/ React.createElement("div", { className: "font-roboto mb-4", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, content), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between border-t pt-3", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "flex items-center gap-2 text-gray-600 hover:text-blue-600", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-heart", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, likes || 0)), /*#__PURE__*/ React.createElement("button", { className: "flex items-center gap-2 text-gray-600 hover:text-blue-600", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-comment", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, comments || 0)), /*#__PURE__*/ React.createElement("button", { className: "flex items-center gap-2 text-gray-600 hover:text-blue-600", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-share", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, shares || 0)))); } function PostCardStory() { const samplePost = { avatarUrl: "/sample-avatar.jpg", username: "John Doe", timestamp: "2 hours ago", content: "Just had an amazing day at the beach! The sunset was absolutely breathtaking. 🌅", likes: 42, comments: 8, shares: 3 }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-gray-100", __source: { fileName: "", lineNumber: 57, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(PostCard, { ...samplePost, __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this })); } function FriendSuggestions({ friends = [] }) { return /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-64 bg-white p-4 rounded-lg shadow-lg hidden md:block", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl mb-4", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, "People you may know"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, friends.map((friend)=>/*#__PURE__*/ React.createElement("div", { key: friend.id, className: "flex items-center gap-3", __source: { fileName: "", lineNumber: 8, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: friend.avatar, alt: `${friend.name}'s profile`, className: "w-10 h-10 rounded-full object-cover", __source: { fileName: "", lineNumber: 9, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 14, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm", __source: { fileName: "", lineNumber: 15, columnNumber: 17 }, __self: this }, friend.name)), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white px-3 py-1 rounded-full text-sm hover:bg-blue-600", __source: { fileName: "", lineNumber: 17, columnNumber: 15 }, __self: this }, "Add")))))); } function FriendSuggestionsStory() { const sampleFriends = [ { id: 1, name: "Sarah Wilson", avatar: "/avatar1.jpg" }, { id: 2, name: "Mike Johnson", avatar: "/avatar2.jpg" }, { id: 3, name: "Emily Davis", avatar: "/avatar3.jpg" }, { id: 4, name: "Chris Thompson", avatar: "/avatar4.jpg" }, { id: 5, name: "Alex Rivera", avatar: "/avatar5.jpg" } ]; return /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 min-h-screen p-4", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(FriendSuggestions, { friends: sampleFriends, __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this })); } function PostCreator() { const [postContent, setPostContent] = useState(""); const [privacy, setPrivacy] = useState("public"); const [showPollFields, setShowPollFields] = useState(false); const [pollOptions, setPollOptions] = useState([ "", "" ]); const [upload, { loading }] = useUpload(); const [media, setMedia] = useState(null); const [error, setError] = useState(null); const handleFileUpload = async (e)=>{ if (e.target.files) { const { url, error } = await upload({ file: e.target.files[0] }); if (error) { setError(error); return; } setMedia(url); } }; const addPollOption = ()=>{ setPollOptions([ ...pollOptions, "" ]); }; const updatePollOption = (index, value)=>{ const newOptions = [ ...pollOptions ]; newOptions[index] = value; setPollOptions(newOptions); }; return /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto p-4 bg-white rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 32, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { className: "w-full p-3 border rounded-lg resize-none font-roboto", placeholder: "What's on your mind?", rows: 4, value: postContent, onChange: (e)=>setPostContent(e.target.value), __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "cursor-pointer flex items-center text-gray-600 hover:text-gray-800", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*,video/*", className: "hidden", onChange: handleFileUpload, __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-image mr-2", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }), "Media"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowPollFields(!showPollFields), className: "flex items-center text-gray-600 hover:text-gray-800", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-poll mr-2", __source: { fileName: "", lineNumber: 59, columnNumber: 15 }, __self: this }), "Poll")), /*#__PURE__*/ React.createElement("select", { value: privacy, onChange: (e)=>setPrivacy(e.target.value), className: "border rounded-lg px-3 py-1 font-roboto", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "public", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, "🌍 Public"), /*#__PURE__*/ React.createElement("option", { value: "friends", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, "👥 Friends"), /*#__PURE__*/ React.createElement("option", { value: "private", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, "🔒 Private"))), media && /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, media.includes("video") ? /*#__PURE__*/ React.createElement("video", { src: media, className: "w-full rounded", controls: true, __source: { fileName: "", lineNumber: 78, columnNumber: 15 }, __self: this }) : /*#__PURE__*/ React.createElement("img", { src: media, alt: "Uploaded media", className: "w-full rounded", __source: { fileName: "", lineNumber: 80, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setMedia(null), className: "absolute top-2 right-2 bg-gray-800 text-white rounded-full w-8 h-8 flex items-center justify-center opacity-75 hover:opacity-100", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 90, columnNumber: 15 }, __self: this }))), showPollFields && /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }, pollOptions.map((option, index)=>/*#__PURE__*/ React.createElement("input", { key: index, type: "text", value: option, onChange: (e)=>updatePollOption(index, e.target.value), placeholder: `Option ${index + 1}`, className: "w-full p-2 border rounded font-roboto", __source: { fileName: "", lineNumber: 98, columnNumber: 15 }, __self: this })), pollOptions.length < 4 && /*#__PURE__*/ React.createElement("button", { onClick: addPollOption, className: "text-blue-500 hover:text-blue-600", __source: { fileName: "", lineNumber: 108, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus mr-2", __source: { fileName: "", lineNumber: 112, columnNumber: 17 }, __self: this }), "Add Option")), /*#__PURE__*/ React.createElement("button", { className: "w-full bg-blue-500 text-white py-2 rounded-lg hover:bg-blue-600 font-roboto", disabled: loading, __source: { fileName: "", lineNumber: 119, columnNumber: 9 }, __self: this }, loading ? "Posting..." : "Post"))); } function PostCreatorStory() { return /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 min-h-screen p-4", __source: { fileName: "", lineNumber: 132, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(PostCreator, { __source: { fileName: "", lineNumber: 133, columnNumber: 7 }, __self: this })); } function NavigationBar() { const [isSearchFocused, setIsSearchFocused] = useState(false); return /*#__PURE__*/ React.createElement("nav", { className: "bg-white shadow-md p-4", __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto flex items-center justify-between", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-8", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/78853027-203c-4420-ab55-843a44957308/-/format/auto/", alt: "Company logo", className: "h-8 w-auto", __source: { fileName: "", lineNumber: 8, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: `relative ${isSearchFocused ? "flex-grow" : ""}`, __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", placeholder: "Search...", className: "pl-10 pr-4 py-2 rounded-full border focus:outline-none focus:border-blue-500 w-[300px]", onFocus: ()=>setIsSearchFocused(true), onBlur: ()=>setIsSearchFocused(false), __source: { fileName: "", lineNumber: 15, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-search absolute left-3 top-3 text-gray-400", __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-6", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-gray-600 hover:text-gray-900", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-home text-xl", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-gray-600 hover:text-gray-900", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-envelope text-xl", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-gray-600 hover:text-gray-900", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bell text-xl", __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full w-4 h-4 flex items-center justify-center", __source: { fileName: "", lineNumber: 37, columnNumber: 15 }, __self: this }, "3"))), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-gray-600 hover:text-gray-900", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user text-xl", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-gray-600 hover:text-gray-900", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-cog text-xl", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }))))); } function NavigationBarStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 56, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(NavigationBar, { __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this })); } function MainComponent() { const [isLogin, setIsLogin] = useState(true); const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const handleSubmit = (e)=>{ e.preventDefault(); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-br from-[#1a1a2e] to-[#16213e]", __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 py-8", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "flex justify-between items-center mb-16", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/78853027-203c-4420-ab55-843a44957308/-/format/auto/", alt: "WorldWeb Logo", className: "h-12 w-auto", __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsLogin(!isLogin), className: "text-white hover:text-blue-400 transition-colors font-poppins", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, isLogin ? "Sign Up" : "Login")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row items-center justify-between gap-12", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-4xl md:text-6xl font-bold text-white mb-6 font-poppins", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, "Connect with the World"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-300 text-xl mb-8 font-poppins", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, "Join our global community and experience a new way of connecting"), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 37, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-globe text-blue-400 text-2xl", __source: { fileName: "", lineNumber: 38, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-white font-poppins", __source: { fileName: "", lineNumber: 39, columnNumber: 17 }, __self: this }, "Global Connectivity")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-shield-alt text-blue-400 text-2xl", __source: { fileName: "", lineNumber: 42, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-white font-poppins", __source: { fileName: "", lineNumber: 43, columnNumber: 17 }, __self: this }, "Secure Communication")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-users text-blue-400 text-2xl", __source: { fileName: "", lineNumber: 46, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-white font-poppins", __source: { fileName: "", lineNumber: 47, columnNumber: 17 }, __self: this }, "Community Driven")))), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 max-w-md", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "bg-[#1f2937] p-8 rounded-lg shadow-xl", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-bold text-white mb-6 font-poppins", __source: { fileName: "", lineNumber: 57, columnNumber: 15 }, __self: this }, isLogin ? "Welcome Back" : "Create Account"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 60, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", placeholder: "Email", value: email, onChange: (e)=>setEmail(e.target.value), className: "w-full p-3 rounded bg-[#374151] text-white border border-gray-600 focus:border-blue-400 focus:outline-none transition-colors", __source: { fileName: "", lineNumber: 61, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "password", name: "password", placeholder: "Password", value: password, onChange: (e)=>setPassword(e.target.value), className: "w-full p-3 rounded bg-[#374151] text-white border border-gray-600 focus:border-blue-400 focus:outline-none transition-colors", __source: { fileName: "", lineNumber: 69, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded transition-colors", __source: { fileName: "", lineNumber: 77, columnNumber: 17 }, __self: this }, isLogin ? "Login" : "Sign Up")))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 85, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .container > * { animation: fadeIn 0.6s ease-out forwards; } `)); }