function CartSummary({ items = [], currency = "EGP" }) { const total = items.reduce((sum, item)=>sum + item.price, 0); return /*#__PURE__*/ React.createElement("div", { className: "rounded-lg bg-white p-4 shadow-md w-full max-w-md", __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-crimson-text text-xl mb-4", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, "Order Summary"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2 mb-4", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, items.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 10, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto", __source: { fileName: "", lineNumber: 11, columnNumber: 13 }, __self: this }, item.name), /*#__PURE__*/ React.createElement("span", { className: "font-roboto", __source: { fileName: "", lineNumber: 12, columnNumber: 13 }, __self: this }, currency, " ", item.price.toFixed(2))))), /*#__PURE__*/ React.createElement("div", { className: "border-t pt-4", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center font-bold", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-crimson-text", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, "Total"), /*#__PURE__*/ React.createElement("span", { className: "font-crimson-text", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, currency, " ", total.toFixed(2))))); } function CartSummaryStory() { const sampleItems = [ { name: "Product 1", price: 299.99 }, { name: "Product 2", price: 149.5 }, { name: "Product 3", price: 599.99 } ]; return /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-gray-100 min-h-screen", __source: { fileName: "", lineNumber: 39, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(CartSummary, { items: sampleItems, __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(CartSummary, { items: [], __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }))); } function VideoPlayer({ src = "/path/to/video.mp4" }) { const [isPlaying, setIsPlaying] = useState(false); const videoRef = useRef(null); const togglePlay = ()=>{ if (videoRef.current) { if (isPlaying) { videoRef.current.pause(); } else { videoRef.current.play(); } setIsPlaying(!isPlaying); } }; return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[800px] rounded-lg overflow-hidden bg-[#000000]", __source: { fileName: "", lineNumber: 17, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("video", { ref: videoRef, className: "w-full", src: src, onClick: togglePlay, __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, "Your browser does not support the video tag."), /*#__PURE__*/ React.createElement("div", { className: "p-4 flex items-center justify-center bg-[#000000]", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: togglePlay, className: "text-white text-xl hover:text-gray-300", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fa ${isPlaying ? "fa-pause" : "fa-play"}`, __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this })))); } function VideoPlayerStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 flex justify-center", __source: { fileName: "", lineNumber: 35, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(VideoPlayer, { src: "https://example.com/sample-video.mp4", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this })); } function ServiceCard({ title, description, price, imageUrl, onAddToCart }) { return /*#__PURE__*/ React.createElement("div", { className: "max-w-sm rounded-lg overflow-hidden shadow-lg bg-white", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { className: "w-full h-[200px] object-cover", src: imageUrl || "/design-service.jpg", alt: "Design service preview", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-inter text-xl font-bold mb-2", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, title || "Website Design Service"), /*#__PURE__*/ React.createElement("p", { className: "font-inter text-gray-700 text-base mb-4", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, description || "Professional website design tailored to your needs. Modern, responsive, and user-friendly solutions."), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-inter text-xl font-bold text-[#2C5282]", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, "$", price || "299"), /*#__PURE__*/ React.createElement("button", { onClick: onAddToCart, className: "bg-[#2C5282] hover:bg-[#1A365D] text-white font-inter py-2 px-4 rounded-lg transition-colors duration-200", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, "Add to Cart")))); } function ServiceCardStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-gray-100", __source: { fileName: "", lineNumber: 35, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ServiceCard, { title: "Premium Web Design", description: "Custom website design with modern UI/UX principles. Includes responsive layouts and brand integration.", price: "499", imageUrl: "/premium-design.jpg", onAddToCart: ()=>alert("Added to cart!"), __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this })); } function MainComponent() { const [showServices, setShowServices] = useState(false); const [selectedServices, setSelectedServices] = useState([]); const stats = { totalContacts: 1234, totalEGP: 50000 }; const services = [ { id: 1, name: "Video Editing", price: 500, description: "Professional video editing service" }, { id: 2, name: "Content Creation", price: 800, description: "Creative content development" }, { id: 3, name: "Portrait Photo Editing", price: 300, description: "Expert photo retouching" } ]; const toggleService = (service)=>{ if (selectedServices.find((s)=>s.id === service.id)) { setSelectedServices(selectedServices.filter((s)=>s.id !== service.id)); } else { setSelectedServices([ ...selectedServices, service ]); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50 p-4 font-roboto", __source: { fileName: "", lineNumber: 40, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6 mb-8 bg-white rounded-lg p-6 shadow", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold text-gray-800", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, stats.totalContacts), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, "Total Contacts")), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold text-gray-800", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, stats.totalEGP, " EGP"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, "Total Earnings"))), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null)), /*#__PURE__*/ React.createElement("div", { className: "text-center mb-8", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowServices(!showServices), className: "bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg transition duration-200", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, showServices ? "Hide Services" : "Design")), showServices && /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6 mb-8", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, services.map((service)=>/*#__PURE__*/ React.createElement(React.Fragment, null))), /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-0 left-0 right-0 bg-white shadow-lg", __source: { fileName: "", lineNumber: 78, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null)))); }

1234

50000 EGP