From 639547a26790fdb68945113f4f6b2be445535b87 Mon Sep 17 00:00:00 2001
From: Yuval Adam <_@yuv.al>
Date: Fri, 7 Mar 2025 13:17:59 +0100
Subject: Unify footer component

---
 src/pages/HomePage.tsx        | 24 ++----------------------
 src/pages/chart/ChartPage.tsx | 30 +++++-------------------------
 2 files changed, 7 insertions(+), 47 deletions(-)

(limited to 'src/pages')

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>
   );
 };
-- 
cgit v1.3.1