function TransactionHistoryTable({ transactions }) { return /*#__PURE__*/ React.createElement("section", { id: "transaction-history", className: "mb-8", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2 font-roboto", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, "Transaction History"), /*#__PURE__*/ React.createElement("table", { className: "w-full border-collapse border border-gray-700", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "border border-gray-700 p-2", __source: { fileName: "", lineNumber: 8, columnNumber: 13 }, __self: this }, "Date"), /*#__PURE__*/ React.createElement("th", { className: "border border-gray-700 p-2", __source: { fileName: "", lineNumber: 9, columnNumber: 13 }, __self: this }, "Card Number"), /*#__PURE__*/ React.createElement("th", { className: "border border-gray-700 p-2", __source: { fileName: "", lineNumber: 10, columnNumber: 13 }, __self: this }, "Amount"), /*#__PURE__*/ React.createElement("th", { className: "border border-gray-700 p-2", __source: { fileName: "", lineNumber: 11, columnNumber: 13 }, __self: this }, "Status"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, transactions.map((transaction, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, __source: { fileName: "", lineNumber: 16, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border border-gray-700 p-2", __source: { fileName: "", lineNumber: 17, columnNumber: 15 }, __self: this }, transaction.date), /*#__PURE__*/ React.createElement("td", { className: "border border-gray-700 p-2", __source: { fileName: "", lineNumber: 18, columnNumber: 15 }, __self: this }, transaction.cardNumber), /*#__PURE__*/ React.createElement("td", { className: "border border-gray-700 p-2", __source: { fileName: "", lineNumber: 19, columnNumber: 15 }, __self: this }, transaction.amount), /*#__PURE__*/ React.createElement("td", { className: "border border-gray-700 p-2", __source: { fileName: "", lineNumber: 20, columnNumber: 15 }, __self: this }, transaction.status)))))); } function TransactionHistoryTableStory() { const transactions = [ { date: "2023-10-01", cardNumber: "**** **** **** 1234", amount: "$123.45", status: "Completed" }, { date: "2023-10-02", cardNumber: "**** **** **** 5678", amount: "$67.89", status: "Pending" } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 46, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(TransactionHistoryTable, { transactions: transactions, __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this })); } function ClickableLinksList({ links }) { return /*#__PURE__*/ React.createElement("ul", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, links.map((link, index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: link.href, className: "text-blue-400 hover:underline", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }, link.label)))); } function ClickableLinksListStory() { const links = [ { href: '#credit-card-validation', label: 'Credit Card Validation' }, { href: '#transaction-history', label: 'Transaction History' }, { href: '#settings', label: 'Settings' } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ClickableLinksList, { links: links, __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this })); } "use client"; function generateRandomCreditCard() { const randomCardNumber = ()=>Array.from({ length: 16 }, ()=>Math.floor(Math.random() * 10)).join(""); const randomDate = ()=>{ const month = String(Math.floor(Math.random() * 12) + 1).padStart(2, "0"); const year = String(Math.floor(Math.random() * 10) + 22).padStart(2, "0"); return `${month}/${year}`; }; const randomCVV = ()=>String(Math.floor(Math.random() * 900) + 100); return { cardNumber: randomCardNumber(), expirationDate: randomDate(), cvv: randomCVV() }; } function CreditCardValidator({ onValidate, onGenerate }) { const [creditCard, setCreditCard] = useState(generateRandomCreditCard()); const handleGenerateClick = ()=>{ const newCreditCard = generateRandomCreditCard(); setCreditCard(newCreditCard); onGenerate(newCreditCard); }; return /*#__PURE__*/ React.createElement("section", { id: "credit-card-validation", className: "mb-8", __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2 font-roboto", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, "Credit Card Validation"), /*#__PURE__*/ React.createElement("form", { __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "credit-card-number", className: "block mb-2 font-medium font-roboto", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, "Credit Card Number:"), /*#__PURE__*/ React.createElement("input", { name: "credit-card-number", type: "text", id: "credit-card-number", value: creditCard.cardNumber, className: "w-full p-2 border border-gray-700 rounded bg-gray-800 text-white mb-4", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "expiration-date", className: "block mb-2 font-medium font-roboto", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, "Expiration Date:"), /*#__PURE__*/ React.createElement("input", { name: "expiration-date", type: "text", id: "expiration-date", value: creditCard.expirationDate, className: "w-full p-2 border border-gray-700 rounded bg-gray-800 text-white mb-4", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "cvv", className: "block mb-2 font-medium font-roboto", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, "CVV:"), /*#__PURE__*/ React.createElement("input", { name: "cvv", type: "text", id: "cvv", value: creditCard.cvv, className: "w-full p-2 border border-gray-700 rounded bg-gray-800 text-white mb-4", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: ()=>onValidate(creditCard), id: "validate", className: "bg-blue-500 text-white p-2 rounded", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, "Validate"), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: handleGenerateClick, className: "ml-2 bg-green-500 text-white p-2 rounded", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, "Auto Generate"))); } function CreditCardValidatorStory() { const handleValidate = (cardDetails)=>{ console.log("Card validated", cardDetails); }; const handleGenerate = (newCardDetails)=>{ console.log("Card details generated", newCardDetails); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 56, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(CreditCardValidator, { onValidate: handleValidate, onGenerate: handleGenerate, __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this })); } function MainComponent({ transactions }) { const handleValidate = (cardDetails)=>{ console.log("Card validated", cardDetails); }; const handleGenerate = (newCardDetails)=>{ console.log("Card details generated", newCardDetails); setGeneratedCard(newCardDetails); }; const [generatedCard, setGeneratedCard] = React.useState(null); const links = [ { href: '#credit-card-validation', label: 'Credit Card Validation' }, { href: '#transaction-history', label: 'Transaction History' }, { href: '#settings', label: 'Settings' } ]; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4 bg-gray-900 text-white", __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "mb-4", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold font-roboto", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, "Credit Card Validation Tool")), /*#__PURE__*/ React.createElement("nav", { className: "mb-4", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(ClickableLinksList, { links: links, __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("main", { __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { id: "credit-card-validation", className: "flex space-x-8 mb-8", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null), generatedCard && /*#__PURE__*/ React.createElement(React.Fragment, null)), /*#__PURE__*/ React.createElement(TransactionHistoryTable, { transactions: transactions, __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("section", { id: "settings", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2 font-roboto", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, "Settings"), /*#__PURE__*/ React.createElement("form", { __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "api-key", className: "block mb-2 font-medium font-roboto", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, "API Key:"), /*#__PURE__*/ React.createElement("input", { name: "api-key", type: "text", id: "api-key", className: "w-full p-2 border border-gray-700 rounded bg-gray-800 text-white mb-4", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "payment-gateway", className: "block mb-2 font-medium font-roboto", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, "Payment Gateway:"), /*#__PURE__*/ React.createElement("select", { name: "payment-gateway", id: "payment-gateway", className: "w-full p-2 border border-gray-700 rounded bg-gray-800 text-white mb-4", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "gateway1", __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this }, "Gateway 1"), /*#__PURE__*/ React.createElement("option", { value: "gateway2", __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, "Gateway 2")), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white p-2 rounded", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, "Save Settings"))))); } function StoryComponent() { const sampleTransactions = [ { date: '2023-10-01', cardNumber: '**** **** **** 1234', amount: '$50.00', status: 'Approved' }, { date: '2023-10-02', cardNumber: '**** **** **** 5678', amount: '$75.00', status: 'Denied' } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 62, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { transactions: sampleTransactions, __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this })); }

Date	Card Number	Amount	Status
2023-10-01	** ** 1234	$50.00	Approved
2023-10-02	** ** 5678	$75.00	Denied