Merge pull request #5 from AccessiTech/modularize-content

Modularize content
AccessiTech · Jan 28, 2025 · 8274be9 · 8274be9
2 parents 78a3dc4 + 82771d2
commit 8274be9
Show file tree

Hide file tree

Showing 15 changed files with 186 additions and 89 deletions.
diff --git a/index.html b/index.html
@@ -25,12 +25,14 @@
     <meta name="msapplication-starturl" content="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
-    <link rel="icon" sizes="192x192" href="android-chrome-192x192.png">
-    <link rel="apple-touch-icon" sizes="192x192" href="android-chrome-192x192.png">
-    <link rel="icon" sizes="512x512" href="android-chrome-512x512">
-    <link rel="apple-touch-icon" sizes="512x512" href="android-chrome-512x512">
-    <link rel="icon" sizes="180x180" href="apple-touch-icon.png">
-    <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
+    <link rel="icon" sizes="16x16" href="assets/favicon-16x16.png">
+    <link rel="icon" sizes="32x32" href="assets/favicon-32x32.png">
+    <link rel="icon" sizes="192x192" href="assets/android-chrome-192x192.png">
+    <link rel="apple-touch-icon" sizes="192x192" href="assets/android-chrome-192x192.png">
+    <link rel="icon" sizes="512x512" href="assets/android-chrome-512x512.png">
+    <link rel="apple-touch-icon" sizes="512x512" href="assets/android-chrome-512x512.png">
+    <link rel="icon" sizes="180x180" href="assets/apple-touch-icon.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="assets/apple-touch-icon.png">
 </head>
 
 <body>

diff --git a/public/favicon-16x16.png → public/assets/favicon-16x16.png b/public/favicon-16x16.png → public/assets/favicon-16x16.png
diff --git a/public/favicon-32x32.png → public/assets/favicon-32x32.png b/public/favicon-32x32.png → public/assets/favicon-32x32.png
diff --git a/src/Components/Header/Header.jsx b/src/Components/Header/Header.jsx
@@ -1,20 +1,25 @@
 import { Col, Row } from "react-bootstrap";
 import Translate from "../Translate/Translate";
+import PropTypes from "prop-types";
 
-function Header() {
+function Header({ title, lead, disableTranslate }) {
   return (
     <header>
       <Row>
         <Col>
-          <h1>Know Your Rights</h1>
-          <Translate />
-          {/* <p className="lead">
-              If you are reading this, you have constitutional rights.
-            </p> */}
+          <h1>{title || "Know Your Rights"}</h1>
+          {!disableTranslate && <Translate />}
+          {lead && <p className="lead">{lead}</p>}
         </Col>
       </Row>
     </header>
   );
 }
 
+Header.propTypes = {
+  title: PropTypes.string,
+  lead: PropTypes.string,
+  disableTranslate: PropTypes.bool,
+};
+
 export default Header;
diff --git a/src/Components/Resources/ResourceBtn.jsx b/src/Components/Resources/ResourceBtn.jsx
@@ -1,3 +1,4 @@
+import PropTypes from "prop-types";
 import { Button } from "react-bootstrap";
 
 function ResourceBtn({ source, data, setModalContent, setShowModal }) {
@@ -25,4 +26,11 @@ function ResourceBtn({ source, data, setModalContent, setShowModal }) {
   );
 }
 
+ResourceBtn.prototype = {
+  source: PropTypes.string,
+  data: PropTypes.object,
+  setModalContent: PropTypes.func,
+  setShowModal: PropTypes.func,
+};
+
 export default ResourceBtn;
diff --git a/src/Components/Resources/Resources.jsx b/src/Components/Resources/Resources.jsx
@@ -6,15 +6,16 @@ import {
   digitalResources,
   printableResources,
 } from "./content";
+import PropTypes from "prop-types";
 
 
-
-function Resources() {
+function Resources({ hideDigitals, hidePrintables }) {
   const [showModal, setShowModal] = useState(false);
   const [modalContent, setModalContent] = useState(null);
 
   return (
     <section id="resources">
+      {!hideDigitals && (
       <Row>
         <Col>
           <h2 id="digital-resources">Digital Resources</h2>
@@ -38,6 +39,8 @@ function Resources() {
           </Row>
         </Col>
       </Row>
+      )}
+      {!hidePrintables && (
       <Row>
         <Col>
           <h2 id="printable-resources">Printable Resources</h2>
@@ -56,6 +59,7 @@ function Resources() {
           </Row>
         </Col>
       </Row>
+      )}
       <Modal show={showModal} onHide={() => setShowModal(false)}>
         <Modal.Header closeButton closeVariant="white">
           <Modal.Title>{modalContent?.title}</Modal.Title>
@@ -93,4 +97,9 @@ function Resources() {
   );
 }
 
+Resources.prototype = {
+  hideDigitals: PropTypes.bool,
+  hidePrintables: PropTypes.bool,
+};
+
 export default Resources;
diff --git a/src/Components/Rights/Rights.jsx b/src/Components/Rights/Rights.jsx
@@ -1,63 +1,20 @@
 import { Button, Col, Nav, Row, Tab } from "react-bootstrap";
+import { attribution, leftColContent, rightColContent } from "./content";
+import PropTypes from "prop-types";
 
-
-const rightColContent = (
-  <>
-    <p>
-      I do not wish to speak with you, answer your questions, or sign or hand
-      you any documents based on my 5th Amendment rights under the United States
-      Constitution.
-    </p>
-    <p>
-      I do not give you permission to enter my home based on my 4th Amendment
-      rights under the United States Constitution unless you have a warrant to
-      enter, signed by a judge or magistrate with my name on it that you slide
-      under the door.
-    </p>
-    <p>
-      I do not give you permission to search any of my belongings based on my
-      4th Amendment rights.
-    </p>
-    <p>I choose to exercise my constitutional rights.</p>
-  </>
-);
-
-const leftColContent = (
-  <>
-    <h2>You have constitutional rights</h2>
-    <p>
-      <b>DO NOT OPEN THE DOOR</b> if an immigration agent is knocking on the
-      door.
-    </p>
-    <p>
-      <b>DO NOT ANSWER ANY QUESTIONS</b> from an immigration agent if they try
-      to talk to you. You have the right to remain silent.
-    </p>
-    <p>
-      <b>DO NOT SIGN ANYTHING</b> without first speaking to a lawyer. You have
-      the right to speak with a lawyer.
-    </p>
-    <p>
-      If you are outside of your home, ask the agent if you are free to leave
-      and if they say yes, leave calmly.
-    </p>
-    <p>
-      <b>GIVE THIS CARD TO THE AGENT.</b> If you are inside of your home, show
-      the card through the window or slide it under the door.
-    </p>
-  </>
-);
-
-function Rights() {
+function Rights({ ctaUrl, ctaTitle, leftHeader, rightHeader }) {
   return (
     <section id="rights">
       <Row>
-        <Col md={6}>{leftColContent}</Col>
+        <Col md={6}>
+          <h2>{leftHeader || "You have constitutional rights"}</h2>
+          {leftColContent}
+        </Col>
         <Col md={6}>
           <Tab.Container defaultActiveKey="translated" id="language-tabs">
             <Row>
               <Col>
-                <h2>To the agent</h2>
+                <h2>{rightHeader || "To the agent"}</h2>
               </Col>
               <Col style={{ width: "100%" }}>
                 <Nav variant="pills" className="justify-content-end">
@@ -90,36 +47,34 @@ function Rights() {
         </Col>
       </Row>
       <Row>
-        <Col>
-          <p className="credit">
-            {`This is a digital version of the "Red Cards" created by `}
-            <a
-              href="https://www.ilrc.org/red-cards"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              {`the Immigration Legal Resource Center`}
-            </a>
-            {`.`}
-          </p>
-        </Col>
+        <Col>{attribution}</Col>
       </Row>
       <Row>
         <Col>
           <Button
-            href="https://www.informedimmigrant.com/resources/detention-deportation/know-your-rights/"
+            href={
+              ctaUrl ||
+              "https://www.informedimmigrant.com/resources/detention-deportation/know-your-rights/"
+            }
             target="_blank"
             rel="noopener noreferrer"
             variant="primary"
             size="lg"
             className="external-link"
           >
-            More about YOUR RIGHTS
+            {ctaTitle || "More about YOUR RIGHTS"}
           </Button>
         </Col>
       </Row>
     </section>
   );
 }
 
+Rights.prototype = {
+  ctaUrl: PropTypes.string,
+  ctaTitle: PropTypes.string,
+  leftHeader: PropTypes.string,
+  rightHeader: PropTypes.string,
+};
+
 export default Rights;
diff --git a/src/Components/Rights/content.jsx b/src/Components/Rights/content.jsx
@@ -0,0 +1,61 @@
+
+
+export const rightColContent = (
+  <>
+    <p>
+      I do not wish to speak with you, answer your questions, or sign or hand
+      you any documents based on my 5th Amendment rights under the United States
+      Constitution.
+    </p>
+    <p>
+      I do not give you permission to enter my home based on my 4th Amendment
+      rights under the United States Constitution unless you have a warrant to
+      enter, signed by a judge or magistrate with my name on it that you slide
+      under the door.
+    </p>
+    <p>
+      I do not give you permission to search any of my belongings based on my
+      4th Amendment rights.
+    </p>
+    <p>I choose to exercise my constitutional rights.</p>
+  </>
+);
+
+export const leftColContent = (
+  <>
+    <p>
+      <b>DO NOT OPEN THE DOOR</b> if an immigration agent is knocking on the
+      door.
+    </p>
+    <p>
+      <b>DO NOT ANSWER ANY QUESTIONS</b> from an immigration agent if they try
+      to talk to you. You have the right to remain silent.
+    </p>
+    <p>
+      <b>DO NOT SIGN ANYTHING</b> without first speaking to a lawyer. You have
+      the right to speak with a lawyer.
+    </p>
+    <p>
+      If you are outside of your home, ask the agent if you are free to leave
+      and if they say yes, leave calmly.
+    </p>
+    <p>
+      <b>GIVE THIS CARD TO THE AGENT.</b> If you are inside of your home, show
+      the card through the window or slide it under the door.
+    </p>
+  </>
+);
+
+export const attribution = (
+  <p className="credit">
+    {`This is a digital version of the "Red Cards" created by `}
+    <a
+      href="https://www.ilrc.org/red-cards"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      {`the Immigration Legal Resource Center`}
+    </a>
+    {`.`}
+  </p>
+);
diff --git a/src/Components/Share/Share.jsx b/src/Components/Share/Share.jsx
@@ -1,20 +1,25 @@
+import PropTypes from "prop-types";
 import { Row, Col } from "react-bootstrap";
 
-function Share() {
+function Share({ siteUrl, linkText, shareTitle, shareText }) {
+  const url = siteUrl || "https://redcards.accessi.tech";
+  const text = linkText || url.slice(8);
   const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+
   const shareHandler = (e) => {
     e.preventDefault();
 
     if (!isMobile) {
-      navigator.clipboard.writeText("https://redcards.accessi.tech");
+      navigator.clipboard.writeText(url);
       alert("Link copied to clipboard");
       return;
     }
+
     navigator
       .share({
-        title: "Red Cards",
-        text: "Know Your Rights",
-        url: "https://redcards.accessi.tech",
+        title: shareTitle || document.title,
+        text: shareText || "Know Your Rights",
+        url,
       })
       .then(() => {
         console.log("Thanks for sharing!");
@@ -45,12 +50,19 @@ function Share() {
               src="/assets/qr.svg"
               alt="QR code to this website"
             />
-            <p>redcards.accessi.tech</p>
+            <p>{text}</p>
           </a>
         </Col>
       </Row>
     </section>
   );
 }
 
+Share.propTypes = {
+  siteUrl: PropTypes.string,
+  linkText: PropTypes.string,
+  shareTitle: PropTypes.string,
+  shareText: PropTypes.string,
+};
+
 export default Share;
diff --git a/src/Components/Translate/Translate.jsx b/src/Components/Translate/Translate.jsx
@@ -1,8 +1,9 @@
 import React, { useEffect } from "react";
 import { Row, Col } from "react-bootstrap";
 import "./Translate.scss";
+import PropTypes from "prop-types";
 
-function Translate() {
+function Translate({ hideCredit }) {
   useEffect(() => {
     if (document.getElementById("google_translate_element") && !window.google) {
       const script = document.createElement("script");
@@ -14,11 +15,18 @@ function Translate() {
   });
   return (
     <Row>
-      <Col style={{ textAlign: "center", colorScheme: '#B11111' }}>
-        <div id="google_translate_element"></div>
+      <Col style={{ textAlign: "center" }}>
+        <div
+          id="google_translate_element"
+          className={hideCredit ? "hide-credit" : ""}
+        ></div>
       </Col>
     </Row>
   );
 }
 
+Translate.propTypes = {
+  hideCredit: PropTypes.bool,
+};
+
 export default Translate;