diff options
| -rw-r--r-- | src/components/Footer.tsx | 40 | ||||
| -rw-r--r-- | src/pages/HomePage.tsx | 24 | ||||
| -rw-r--r-- | src/pages/chart/ChartPage.tsx | 30 |
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>© {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>© {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>© {new Date().getFullYear()} Morse Hero</p> - </div> - </div> - </div> - </footer> + <Footer currentPage="chart" /> </div> ); }; |