function Button({ text, keyboardCommand, highlighted = false, onClick }) { const baseClasses = "inline-block px-4 py-2 rounded-lg border text-sm font-medium transition-colors duration-200 ease-in-out"; const regularClasses = "border-[#E2E2E1] text-[#191919]"; const highlightedClasses = "bg-[#6567EF] border-[#6567EF] text-white"; return /*#__PURE__*/ React.createElement("button", { onClick: onClick, className: `${baseClasses} ${highlighted ? highlightedClasses : regularClasses}`, __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, text, keyboardCommand && /*#__PURE__*/ React.createElement("span", { className: `ml-2 px-1.5 py-0.5 text-xs rounded ${highlighted ? "bg-[#7A7CF0] text-white" : "bg-[#F6F6F6] text-[#8C8C8C]"}`, __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, keyboardCommand)); } function ButtonStory() { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-start space-y-4 p-4", __source: { fileName: "", lineNumber: 37, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Button, { text: "Regular Button", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(Button, { text: "With Keyboard Command", keyboardCommand: "Ctrl+S", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(Button, { text: "Highlighted Button", highlighted: true, __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(Button, { text: "Highlighted with Command", keyboardCommand: "Cmd+P", highlighted: true, __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this })); } function VerticalSidePanel({ icons, activeIcon, avatarSrc, logoSrc = "https://cdn-icons-png.flaticon.com/512/5149/5149019.png" }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen w-20 bg-white border-r border-gray-200", __source: { fileName: "", lineNumber: 8, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center py-4", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: logoSrc, alt: "Company logo", className: "w-10 h-10", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex-grow flex flex-col items-center space-y-4 py-4", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, icons.map((icon, index)=>/*#__PURE__*/ React.createElement("button", { key: index, className: `p-2 rounded-md ${icon === activeIcon ? "bg-gray-200" : "hover:bg-gray-100"}`, __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${icon} text-gray-600`, __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center py-4", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: avatarSrc, alt: "User avatar", className: "w-10 h-10 rounded-full object-cover", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }))); } function VerticalSidePanelStory() { const icons = [ "fa-comment", "fa-user", "fa-bell", "fa-cog" ]; const activeIcon = "fa-comment"; const avatarSrc = "/path/to/avatar.jpg"; return /*#__PURE__*/ React.createElement("div", { className: "h-screen bg-gray-100", __source: { fileName: "", lineNumber: 41, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(VerticalSidePanel, { icons: icons, activeIcon: activeIcon, avatarSrc: avatarSrc, __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this })); } function NewComponent({ logoSrc, altText = "Company logo", size = "w-10 h-10" }) { return /*#__PURE__*/ React.createElement("img", { src: logoSrc, alt: altText, className: size, __source: { fileName: "", lineNumber: 2, columnNumber: 10 }, __self: this }); } function NewComponentStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 7, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(NewComponent, { logoSrc: "https://cdn-icons-png.flaticon.com/512/5149/5149019.png", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(NewComponent, { logoSrc: "https://cdn-icons-png.flaticon.com/512/5149/5149019.png", altText: "Alternate company logo", size: "w-14 h-14", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this })); } function MainComponent() { const [isAnnual, setIsAnnual] = useState(false); const [error, setError] = useState(null); const { data: user } = useUser(); const [stripeLoaded, setStripeLoaded] = useState(false); const plans = [ { name: "Beginners", price: "$10/month", features: [ "Basic features" ] }, { name: "Pro", price: "$20/month", features: [ "Advanced features" ] }, { name: "Enterprise", price: "$50/month", features: [ "All features" ] }, { name: "VR/AR Experience", price: "$30/month", features: [ "VR/AR tools" ] } ]; useEffect(()=>{ const loadStripeScript = ()=>{ const script = document.createElement("script"); script.src = "https://js.stripe.com/v3/buy-button.js"; script.async = true; script.onload = ()=>setStripeLoaded(true); document.body.appendChild(script); }; loadStripeScript(); return ()=>{ const script = document.querySelector('script[src="https://js.stripe.com/v3/buy-button.js"]'); if (script) { document.body.removeChild(script); } }; }, []); const handleBasicSignup = ()=>{ if (!user) { window.location.href = `/account/signin?callbackUrl=${encodeURIComponent("/pricing")}`; } else { window.location.href = "/dashboard"; } }; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-6", __source: { fileName: "", lineNumber: 44, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-4", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, "Subscription Plans"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, plans.map((plan)=>/*#__PURE__*/ React.createElement("div", { key: plan.name, className: "bg-white p-4 rounded-lg shadow-md hover:shadow-lg transition-shadow", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, plan.name), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mb-4", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, plan.price), /*#__PURE__*/ React.createElement("ul", { className: "list-disc pl-5 mb-4", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, plan.features.map((feature, index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 56, columnNumber: 17 }, __self: this }, feature))), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, "Choose Plan"))))); }