Skip to content

Commit 29a9ca5

Browse files
BryantWelchBryantWelch
committed
Created a Footer
Created a Footer for the app with some temporary links to different types of resources. Will change this in the future, but it's a start.
1 parent 496562d commit 29a9ca5

2 files changed

Lines changed: 169 additions & 1 deletion

File tree

‎src/App.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import React from 'react';
2-
import { Routes, Route } from 'react-router-dom';
2+
import { Routes, Route, useLocation } from 'react-router-dom';
33
import styled from 'styled-components';
44
import Layout from './components/Layout';
5+
import Footer from './components/Footer';
56
import Home from './pages/Home';
67
import DeadPixelTest from './pages/tests/DeadPixelTest';
78
import UniformityTest from './pages/tests/UniformityTest';
@@ -23,6 +24,9 @@ const AppContainer = styled.div`
2324
`;
2425

2526
const App = () => {
27+
const location = useLocation();
28+
const isHomePage = location.pathname === '/';
29+
2630
return (
2731
<AppContainer>
2832
<Layout>
@@ -42,6 +46,7 @@ const App = () => {
4246
<Route path="/test/matrix" element={<MatrixTest />} />
4347
</Routes>
4448
</Layout>
49+
{isHomePage && <Footer />}
4550
</AppContainer>
4651
);
4752
};

‎src/components/Footer.jsx‎

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
import React from 'react';
2+
import styled from 'styled-components';
3+
import { Link } from 'react-router-dom';
4+
5+
const FooterContainer = styled.footer`
6+
background: linear-gradient(to right, var(--primary-dark), var(--primary));
7+
color: var(--text-light);
8+
padding: 3rem 0 2rem;
9+
margin-top: auto;
10+
text-align: center;
11+
`;
12+
13+
const FooterContent = styled.div`
14+
max-width: 1200px;
15+
margin: 0 auto;
16+
display: grid;
17+
grid-template-columns: repeat(3, 1fr);
18+
gap: 4rem;
19+
padding: 0 2rem;
20+
justify-content: center;
21+
22+
@media (max-width: 768px) {
23+
grid-template-columns: 1fr;
24+
gap: 2rem;
25+
text-align: center;
26+
}
27+
`;
28+
29+
const FooterSection = styled.div`
30+
text-align: center;
31+
32+
h3 {
33+
font-size: 1.2rem;
34+
margin-bottom: 1.2rem;
35+
background: linear-gradient(to right, #fff, #60a5fa);
36+
-webkit-background-clip: text;
37+
-webkit-text-fill-color: transparent;
38+
}
39+
`;
40+
41+
const FooterLinks = styled.ul`
42+
list-style: none;
43+
padding: 0;
44+
margin: 0;
45+
text-align: center;
46+
47+
li {
48+
margin-bottom: 0.75rem;
49+
}
50+
51+
a {
52+
color: var(--text-light);
53+
text-decoration: none;
54+
opacity: 0.8;
55+
transition: opacity 0.2s ease;
56+
57+
&:hover {
58+
opacity: 1;
59+
}
60+
}
61+
`;
62+
63+
const Copyright = styled.div`
64+
text-align: center;
65+
margin-top: 3rem;
66+
padding: 2rem 2rem 0;
67+
border-top: 1px solid rgba(255, 255, 255, 0.1);
68+
color: var(--text-light);
69+
opacity: 0.6;
70+
font-size: 0.9rem;
71+
`;
72+
73+
const Footer = () => {
74+
const currentYear = new Date().getFullYear();
75+
76+
return (
77+
<FooterContainer>
78+
<FooterContent>
79+
<FooterSection>
80+
<h3>About</h3>
81+
<FooterLinks>
82+
<li>
83+
<Link to="/">Home</Link>
84+
</li>
85+
<li>
86+
<a href="https://www.displayninja.com/monitor-basics/" target="_blank" rel="noopener noreferrer">
87+
Display Technology Guide
88+
</a>
89+
</li>
90+
<li>
91+
<a href="https://www.rtings.com/monitor/tests" target="_blank" rel="noopener noreferrer">
92+
Monitor Testing Methods
93+
</a>
94+
</li>
95+
<li>
96+
<a href="https://www.tftcentral.co.uk/articles.htm" target="_blank" rel="noopener noreferrer">
97+
Display Articles
98+
</a>
99+
</li>
100+
</FooterLinks>
101+
</FooterSection>
102+
103+
<FooterSection>
104+
<h3>Resources</h3>
105+
<FooterLinks>
106+
<li>
107+
<a href="https://www.color.org/" target="_blank" rel="noopener noreferrer">
108+
ICC Color Standards
109+
</a>
110+
</li>
111+
<li>
112+
<a href="https://www.eizo.com/library/" target="_blank" rel="noopener noreferrer">
113+
Display Knowledge Base
114+
</a>
115+
</li>
116+
<li>
117+
<a href="https://www.lagom.nl/lcd-test/" target="_blank" rel="noopener noreferrer">
118+
Lagom LCD Tests
119+
</a>
120+
</li>
121+
<li>
122+
<a href="https://www.blur-busters.com/" target="_blank" rel="noopener noreferrer">
123+
Motion Blur Research
124+
</a>
125+
</li>
126+
</FooterLinks>
127+
</FooterSection>
128+
129+
<FooterSection>
130+
<h3>Community</h3>
131+
<FooterLinks>
132+
<li>
133+
<a href="https://www.reddit.com/r/Monitors/" target="_blank" rel="noopener noreferrer">
134+
r/Monitors
135+
</a>
136+
</li>
137+
<li>
138+
<a href="https://forums.blurbusters.com/" target="_blank" rel="noopener noreferrer">
139+
Display Enthusiasts Forum
140+
</a>
141+
</li>
142+
<li>
143+
<a href="https://discord.gg/monitors" target="_blank" rel="noopener noreferrer">
144+
Monitor Discord
145+
</a>
146+
</li>
147+
<li>
148+
<a href="https://github.com/topics/display-testing" target="_blank" rel="noopener noreferrer">
149+
Open Source Tools
150+
</a>
151+
</li>
152+
</FooterLinks>
153+
</FooterSection>
154+
</FooterContent>
155+
156+
<Copyright>
157+
&copy; {currentYear} Display Test App. All rights reserved.
158+
</Copyright>
159+
</FooterContainer>
160+
);
161+
};
162+
163+
export default Footer;

0 commit comments

Comments
 (0)