\n \n Transaction Details\n <CloseButton aria-label=\"close modal\" onClick={closeModal}>\n <FontAwesomeIcon icon=\"times\" size=\"xs\" />\n <AccessibleText>Close</AccessibleText>\n </CloseButton>\n \n \n \n Total Amount $567.20 \n \n \n
\n - \n
- \n Payment Amount\n
$572.00 \n \n - \n Fee\n
$4.80 \n \n
- \n
- Paid by: \n
- HDFC Bank \n
- \n
- Transaction ID: \n
- 26566689645685976589 \n
- \n
- Description: \n
- Withdraw to Bank account \n
- \n
- Status: \n
- Completed \n
\n
\n )\n}\n","import styled from \"styled-components\"\n\nexport const Wrapper = styled.div`\n display: flex;\n justify-content: center;\n align-items: center;\n margin-top: 1.5rem;\n`\n\nexport const Arrow = styled.a.attrs({ href: \"#\" })`\n color: ${({ disabled }) => disabled ? \"#6c757d\" : \"#2dbe60\"};\n pointer-events: ${({ disabled }) => disabled ? \"none\" : \"auto\"};\n padding: 0.5rem 0.5rem;\n background-color: transparent;\n text-align: center;\n\n &:first-child {\n margin-right: 5px;\n }\n\n &:last-child {\n margin-left: 5px;\n }\n\n &:hover,\n &:focus {\n text-decoration: none;\n color: #2dbe60;\n }\n`\n\nexport const Link = styled.a.attrs({ href: \"#\" })`\n display: ${({ hide }) => hide ? \"none\" : \"block\"};\n color: ${({ activeLink }) => activeLink ? \"#ffffff\" : \"#2dbe60\" };\n font-size: 1rem;\n text-align: center;\n padding: 0.40rem 0.65rem;\n border-radius: 0.25rem;\n background-color: ${({ activeLink }) => activeLink ? \"#2dbe60\" : \"#ffffff\" };\n border-width: 1px;\n border-style: solid;\n border-color: ${({ activeLink }) => activeLink ? \"#2dbe60\" : \"#ffffff\" };\n margin: 0 0.22rem;\n outline: 0;\n\n &:hover {\n text-decoration: none;\n color: ${({ activeLink }) => activeLink ? \"#ffffff\" : \"#2dbe60\" };\n border-color: ${({ activeLink }) => activeLink ? \"#2dbe60\" : \"#e9eff0\" };\n background-color: ${({ activeLink }) => activeLink ? \"#2dbe60\" : \"#e9eff0\" };\n }\n\n &:focus {\n box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);\n }\n`\n\nexport const Dots = styled.div`\n display: ${({ hide }) => hide ? \"none\" : \"block\"};\n color: #8e9a9d;\n font-size: 1.3125rem;\n margin: 0.25rem;\n`","import React, { useState, useEffect } from \"react\"\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\"\nimport { Wrapper, Arrow, Link, Dots } from \"./styles\"\n\nexport function Pagination({ currentIndex, setCurrentIndex, total }) {\n const pages = Array.from({ length: total }, (_, i) => i + 1)\n const firstIndex = 0\n const lastIndex = pages.length - 1\n const [chunk, setChunk] = useState(\n pages.slice(currentIndex, currentIndex + 3)\n )\n\n useEffect(() => {\n if (\n currentIndex + 1 > chunk[chunk.length - 1] &&\n currentIndex + 5 !== pages[lastIndex]\n ) {\n setChunk(pages.slice(currentIndex, currentIndex + 3))\n }\n\n if (currentIndex + 1 < chunk[firstIndex]) {\n setChunk(pages.slice(currentIndex - 2, currentIndex + 1))\n }\n\n if (currentIndex + 5 === pages[lastIndex]) {\n setChunk(pages.slice(currentIndex))\n }\n\n if (currentIndex + 1 === pages[lastIndex]) {\n setChunk(pages.slice(-5))\n }\n //eslint-disable-next-line\n }, [currentIndex])\n\n const onPreviousArrowClick = e => {\n e.preventDefault()\n if (currentIndex > firstIndex) {\n setCurrentIndex(currentIndex - 1)\n }\n }\n\n const onNextArrowClick = e => {\n e.preventDefault()\n if (currentIndex < lastIndex) {\n setCurrentIndex(currentIndex + 1)\n }\n }\n\n const onLinkClick = (e, i) => {\n e.preventDefault()\n setCurrentIndex(i)\n }\n\n return (\n \n {feature.title} \n {feature.description} \n
\n United States\n