You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

97 lines
2.7 KiB

2 years ago
2 years ago
  1. /* eslint react/prop-types: 0 */
  2. import React from "react";
  3. import { withTranslation } from "react-i18next";
  4. import { Link } from "react-router-dom";
  5. import Paypal from "../banner/Paypal";
  6. import { useBbox } from "./useBbox";
  7. import "./footer.css";
  8. const Footer = props => {
  9. const linkStyle = { whiteSpace: "nowrap" };
  10. const { t } = props;
  11. const [bboxLink1, link1] = useBbox();
  12. const [bboxLink2, link2] = useBbox();
  13. const [bboxLink3, link3] = useBbox();
  14. const [bboxLink4, link4] = useBbox();
  15. const [bboxLink5, link5] = useBbox();
  16. const [bboxLink6, link6] = useBbox();
  17. const [bboxLink7, link7] = useBbox();
  18. return (
  19. <footer className="text-center">
  20. <div>
  21. <ul className="tacky">
  22. <li
  23. ref={link1}
  24. className={bboxLink1.top === bboxLink2.top ? "" : "no-tack"}
  25. >
  26. <Link to="/" style={linkStyle}>
  27. {t("Homepage")}
  28. </Link>
  29. </li>
  30. <li
  31. ref={link2}
  32. className={bboxLink2.top === bboxLink3.top ? "" : "no-tack"}
  33. >
  34. <Link to="/faq" style={linkStyle}>
  35. {t("FAQ")}
  36. </Link>
  37. </li>
  38. <li
  39. ref={link3}
  40. className={bboxLink3.top === bboxLink4.top ? "" : "no-tack"}
  41. >
  42. <a href="mailto:app@mieuxvoter.fr?subject=[HELP]" style={linkStyle}>
  43. {t("Need help?")}
  44. </a>
  45. </li>
  46. <li
  47. ref={link4}
  48. className={bboxLink4.top === bboxLink5.top ? "" : "no-tack"}
  49. >
  50. <a
  51. href="https://mieuxvoter.fr/"
  52. target="_blank"
  53. rel="noopener noreferrer"
  54. style={linkStyle}
  55. >
  56. {t("Who are we?")}
  57. </a>
  58. </li>
  59. <li
  60. ref={link5}
  61. className={bboxLink5.top === bboxLink6.top ? "" : "no-tack"}
  62. >
  63. <Link to="/privacy-policy" style={linkStyle}>
  64. {t("Privacy policy")}
  65. </Link>
  66. </li>
  67. <li
  68. ref={link6}
  69. className={bboxLink6.top === bboxLink7.top ? "" : "no-tack"}
  70. >
  71. <Link to="/legal-notices" style={linkStyle}>
  72. {t("Legal notices")}
  73. </Link>
  74. </li>
  75. <li ref={link7}>
  76. {" "}
  77. <a
  78. href="https://github.com/MieuxVoter"
  79. target="_blank"
  80. rel="noopener noreferrer"
  81. style={linkStyle}
  82. >
  83. {t("Source code")}
  84. </a>
  85. </li>
  86. </ul>
  87. </div>
  88. <div className="mt-3">
  89. <Paypal btnColor="btn-primary" />
  90. </div>
  91. </footer>
  92. );
  93. };
  94. export default withTranslation()(Footer);