kevin/portfolio
1
0
Fork 0
Code

Update footer to make use of light and dark themes and update links.

Browse Source
This commit is contained in:
PA4KEV 2023-08-10 20:54:58 +02:00
parent de8ffc4b5b
commit ad9b85d47f
1 changed files with 19 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/UI/Footer.js
View File

@ -1,12 +1,28 @@
import React from 'react'; import React, {useEffect, useState} from 'react';
import './Footer.css'; import './Footer.css';
const Footer = (props) => { const Footer = (props) => {
const [theme, setTheme] = useState(
localStorage.getItem('theme') || 'light'
);
useEffect(() => {
localStorage.setItem('theme', theme);
document.body.className = theme;
}, [theme]);
return ( return (
<footer className="bg-primary text-center text-lg-start text-light"> <footer className={`bg-${theme} text-center text-lg-start text-${theme}`}>
<p className="small">This site was made with: <a className="link-light" href="https://reactjs.org/" target="_blank"rel="noopener noreferrer">React</a>, <a className="link-light" href="https://getbootstrap.com/" target="_blank" rel="noopener noreferrer">Bootstrap</a>, <a className="link-light" href="https://www.nginx.com/" target="_blank" rel="noopener noreferrer">Nginx</a> and <a className="link-light" href="https://www.docker.com/" target="_blank" rel="noopener noreferrer">Docker</a> on <a className="link-light" href="https://www.digitalocean.com/" target="_blank" rel="noopener noreferrer">DigitalOcean</a> cloud droplets.</p> <p className="small">This site was made with:&nbsp;
<a className={`link-${theme}`} href="https://reactjs.org/" target="_blank"rel="noopener noreferrer">React</a>,&nbsp;
<a className={`link-${theme}`} href="https://fsharp.org/" target="_blank" rel="noopener noreferrer">F#</a>,&nbsp;
<a className={`link-${theme}`} href="https://github.com/giraffe-fsharp/Giraffe" target="_blank" rel="noopener noreferrer">Giraffe</a>,&nbsp;
<a className={`link-${theme}`} href="https://getbootstrap.com/" target="_blank" rel="noopener noreferrer">Bootstrap</a>,&nbsp;
<a className={`link-${theme}`} href="https://www.nginx.com/" target="_blank" rel="noopener noreferrer">Nginx</a>&nbsp;and&nbsp;
<a className={`link-${theme}`} href="https://www.docker.com/" target="_blank" rel="noopener noreferrer">Docker</a>&nbsp;on&nbsp;
<a className={`link-${theme}`} href="https://www.digitalocean.com/" target="_blank" rel="noopener noreferrer">DigitalOcean</a>&nbsp;cloud droplets.</p>
</footer> </footer>
) )
} }