function ItemStatusComponent({ itemName, loadingPercentage, startedTimestamp, clientName, clientEmail }) { return /*#__PURE__*/ React.createElement("div", { className: "bg-[#f8f9fa] text-[#212529] min-h-screen flex flex-col items-center justify-center space-y-8 p-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-[#212529] text-4xl", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, "Item Status"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-lg", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, itemName), /*#__PURE__*/ React.createElement("div", { className: "relative w-full max-w-xl h-[40px] bg-[#fff] rounded-full overflow-hidden shadow-lg border border-[#dc3545]", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#dc3545] h-full rounded-full", style: { width: `${loadingPercentage}%` }, __source: { fileName: "", lineNumber: 8, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "absolute inset-0 font-roboto text-center text-xl w-full", __source: { fileName: "", lineNumber: 9, columnNumber: 11 }, __self: this }, loadingPercentage, "%"))), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, "Started: ", new Date(startedTimestamp).toLocaleString()), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, "Client Name: ", clientName), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, "Email: ", clientEmail)), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 rounded-lg bg-[#dc3545] text-[#fff] flex items-center space-x-2", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, "Cancel ", /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 18, columnNumber: 22 }, __self: this })))); } function ItemStatusComponentStory() { const exampleProps = { itemName: "Name of item", loadingPercentage: 75, startedTimestamp: Date.now(), clientName: "John Doe", clientEmail: "john.doe@example.com" }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(ItemStatusComponent, { ...exampleProps, __source: { fileName: "", lineNumber: 33, columnNumber: 16 }, __self: this })); } function MainComponent() { const loadingPercentage = 70; const startedTimestamp = "2023-04-01T00:00:00Z"; const clientName = "John Doe"; const clientEmail = "johndoe@example.com"; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4", __source: { fileName: "", lineNumber: 8, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ItemStatusComponent, { itemName: "Name of Item", loadingPercentage: loadingPercentage, startedTimestamp: startedTimestamp, clientName: clientName, clientEmail: clientEmail, __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this })); } /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 20, columnNumber: 1 }, __self: this }, ` @keyframes twisting { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } `);