3 files changed, 47 insertions, 47 deletions
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
new file mode 100644
index 0000000..9ad24b8
--- /dev/null
+++ b/src/components/Footer.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { Link } from 'react-router';
+
+interface FooterProps {
+  currentPage?: 'home' | 'chart';
+}
+
+const Footer: React.FC<FooterProps> = ({ currentPage = 'home' }) => {
+  return (
+    <footer className="footer">
+      <div className="footer-unified">
+        <div className="footer-sections">
+          <div className="footer-section">
+            <h3>About Morse Code</h3>
+            <p>Morse code is a method of transmitting text as a series of on-off tones, lights, or clicks that can be understood by a skilled listener without specialized equipment.</p>
+          </div>
+          <div className="footer-section">
+            <h3>Quick Links</h3>
+            <ul>
+              {currentPage === 'chart' && (
+                <li><Link to="/">Morse Hero Game</Link></li>
+              )}
+              {currentPage === 'home' && (
+                <li><Link to="/chart">Morse Code Chart</Link></li>
+              )}
+              <li><a href="https://en.wikipedia.org/wiki/Morse_code" target="_blank" rel="noopener noreferrer">Learn More</a></li>
+            </ul>
+          </div>
+          <div className="footer-section">
+            <h3>Resources</h3>
+            <p>Created with <a href="https://www.mastercw.com/cw.js/">CW.js</a>. For a complete Morse Code training solution visit <a href="https://www.mastercw.com">Master CW</a>.</p>
+            <p>&copy; {new Date().getFullYear()} Morse Hero</p>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 931ccce..ab977aa 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -2,6 +2,7 @@ import { useState, useEffect, useRef } from 'react';
 import { Link } from 'react-router';
 import cw from 'cw';
 import '../styles.css';
+import Footer from '../components/Footer';
 
 declare global {
   interface Window {
@@ -368,28 +369,7 @@ const HomePage = () => {
         )
       }
 
-      <footer className="footer">
-        <div className="footer-unified">
-          <div className="footer-sections">
-            <div className="footer-section">
-              <h3>About Morse Code</h3>
-              <p>Morse code is a method of transmitting text as a series of on-off tones, lights, or clicks that can be understood by a skilled listener without specialized equipment.</p>
-            </div>
-            <div className="footer-section">
-              <h3>Quick Links</h3>
-              <ul>
-                <li><Link to="/chart">Morse Code Chart</Link></li>
-                <li><a href="https://en.wikipedia.org/wiki/Morse_code" target="_blank" rel="noopener noreferrer">Learn More</a></li>
-              </ul>
-            </div>
-            <div className="footer-section">
-              <h3>Resources</h3>
-              <p>Created with <a href="https://www.mastercw.com/cw.js/">CW.js</a>. For a complete Morse Code training solution visit <a href="https://www.mastercw.com">Master CW</a>.</p>
-              <p>&copy; {new Date().getFullYear()} Morse Hero</p>
-            </div>
-          </div>
-        </div>
-      </footer>
+      <Footer currentPage="home" />
     </div >
   );
 };
diff --git a/src/pages/chart/ChartPage.tsx b/src/pages/chart/ChartPage.tsx
index 1eac1ad..7f1569d 100644
--- a/src/pages/chart/ChartPage.tsx
+++ b/src/pages/chart/ChartPage.tsx
@@ -2,6 +2,7 @@ import { useEffect, useRef } from 'react';
 import { Link } from 'react-router';
 import cw from 'cw';
 import '../../styles.css';
+import Footer from '../../components/Footer';
 
 declare global {
   interface Window {
@@ -83,7 +84,7 @@ const ChartPage = () => {
       <h1 className="title-link">
         <Link to="/" style={{ color: 'inherit', textDecoration: 'inherit' }}>Morse Hero</Link>
       </h1>
-      
+
       <div className="page-intro">
         <h2>Morse Code Reference Chart</h2>
         <p>Click on any character to hear its Morse code sound. Practice recognizing these patterns to improve your Morse code skills.</p>
@@ -137,7 +138,7 @@ const ChartPage = () => {
           ))}
         </div>
       </div>
-      
+
       <div className="morse-history">
         <h3>History of Morse Code</h3>
         <div className="history-content">
@@ -148,31 +149,10 @@ const ChartPage = () => {
       </div>
 
       <div className="back-link">
-        <Link to="/">Back to Morse Hero Game</Link>
+        <Link to="/">Back to Game</Link>
       </div>
 
-      <footer className="footer">
-        <div className="footer-unified">
-          <div className="footer-sections">
-            <div className="footer-section">
-              <h3>About Morse Code</h3>
-              <p>Morse code is a method of transmitting text as a series of on-off tones, lights, or clicks that can be understood by a skilled listener without specialized equipment.</p>
-            </div>
-            <div className="footer-section">
-              <h3>Quick Links</h3>
-              <ul>
-                <li><Link to="/">Morse Hero Game</Link></li>
-                <li><a href="https://en.wikipedia.org/wiki/Morse_code" target="_blank" rel="noopener noreferrer">Learn More</a></li>
-              </ul>
-            </div>
-            <div className="footer-section">
-              <h3>Resources</h3>
-              <p>Created with <a href="https://www.mastercw.com/cw.js/">CW.js</a>. For a complete Morse Code training solution visit <a href="https://www.mastercw.com">Master CW</a>.</p>
-              <p>&copy; {new Date().getFullYear()} Morse Hero</p>
-            </div>
-          </div>
-        </div>
-      </footer>
+      <Footer currentPage="chart" />
     </div>
   );
 };