File size: 1,994 Bytes
c990683 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
import React from 'react';
import { FaEnvelope, FaMapMarkerAlt, FaGithub, FaLinkedinIn, FaMoon, FaSun } from 'react-icons/fa';
import about from '../data/about';
const Header = ({ toggleTheme, theme }) => {
return (
<header className="bg-primary text-white">
<div className="container mx-auto px-4 py-16">
<div className="flex flex-col md:flex-row items-start md:items-center justify-between">
<div>
<h1 className="text-4xl font-bold">{about.name}</h1>
<p className="mt-2 text-xl">{about.title}</p>
</div>
<div className="flex flex-col gap-2 mt-4 md:mt-0">
<div className="flex items-center">
<FaEnvelope className="mr-2" />
<a href={`mailto:${about.email}`} className="hover:underline">
{about.email}
</a>
</div>
<div className="flex items-center">
<FaMapMarkerAlt className="mr-2" />
<span>{about.location}</span>
</div>
<div className="flex items-center">
<FaGithub className="mr-2" />
<a href={`https://github.com/${about.github}`} target="_blank" rel="noopener noreferrer" className="hover:underline">
{about.github}
</a>
</div>
<div className="flex items-center">
<FaLinkedinIn className="mr-2" />
<a href={`https://www.linkedin.com/in/${about.linkedin}`} target="_blank" rel="noopener noreferrer" className="hover:underline">
{about.linkedin}
</a>
</div>
</div>
<button
onClick={toggleTheme}
className="fixed top-4 right-4 z-50 p-2 bg-secondary text-white rounded-full"
aria-label="Toggle theme"
>
{theme === 'light' ? <FaMoon /> : <FaSun />}
</button>
</div>
</div>
</header>
);
};
export default Header; |