diff --git a/package.json b/package.json index c94f305..47c5744 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "proximity-demo", + "name": "proximitydemo", "version": "1.0.0", "description": "Demo Proximity site for my test", "homepage": "/", diff --git a/src/App.js b/src/App.js index 3d79e37..71e0b60 100644 --- a/src/App.js +++ b/src/App.js @@ -1,115 +1,11 @@ -import React, { useState } from 'react'; +import React from 'react'; -import proximity_logo from './assets/images/proximity_logo.svg'; -// import down_arrow from './assets/images/down_arrow.svg'; - -// import backgroundHeader from './assets/videos/video-poster.jpg'; -import backgroundVideo from './assets/videos/video.mp4'; +import Header from './components/Header'; export default function App() { - const [currentLanguage, setCurrentLanguage] = useState('en'); - const [showCookies, setShowCookies] = useState(true); - - const headerLinkClasses = - 'text-gray-100 font-avenirbook font-normal hover:underline focus:underline text-lg'; - - const cookies = ( -
-
- This website uses cookies to improve your experience. We'll assume - you're ok with this, but you can opt out if you wish. -
- - - - - Read more - -
- ); - return (
-
-
- Proximity Logo - -
- - About - - - Work - - - Latest - - - People & Careers - - - Contact - - -
- - -
-
-
- -
-

- We make people -
- more valuable to brands -

-
- -
-
- {showCookies && cookies} -
- - -
+
); } diff --git a/src/components/Header.js b/src/components/Header.js new file mode 100644 index 0000000..f6812e2 --- /dev/null +++ b/src/components/Header.js @@ -0,0 +1,110 @@ +import React, { useState } from 'react'; + +import proximity_logo from '../assets/images/proximity_logo.svg'; +import backgroundVideo from '../assets/videos/video.mp4'; + +export default function Header() { + const [currentLanguage, setCurrentLanguage] = useState('en'); + const [showCookies, setShowCookies] = useState(true); + + const headerLinkClasses = + 'text-gray-100 font-avenirbook font-normal hover:underline focus:underline text-lg'; + + const cookies = ( +
+
+ This website uses cookies to improve your experience. We'll assume + you're ok with this, but you can opt out if you wish. +
+ + + + + Read more + +
+ ); + + return ( +
+
+ Proximity Logo + +
+ + About + + + Work + + + Latest + + + People & Careers + + + Contact + + +
+ + +
+
+
+ +
+

+ We make people +
+ more valuable to brands +

+
+ +
+
+ {showCookies && cookies} +
+ + +
+ ); +} diff --git a/src/useWindowSize.js b/src/useWindowSize.js new file mode 100644 index 0000000..422b95c --- /dev/null +++ b/src/useWindowSize.js @@ -0,0 +1,32 @@ +import { useState, useEffect } from 'react'; + +export default function useWindowSize() { + // Initialize state with undefined width/height so server and client renders match + // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/ + const [windowSize, setWindowSize] = useState({ + width: undefined, + height: undefined, + }); + + useEffect(() => { + // Handler to call on window resize + function handleResize() { + // Set window width/height to state + setWindowSize({ + width: window.innerWidth, + height: window.innerHeight, + }); + } + + // Add event listener + window.addEventListener('resize', handleResize); + + // Call handler right away so state gets updated with initial window size + handleResize(); + + // Remove event listener on cleanup + return () => window.removeEventListener('resize', handleResize); + }, []); // Empty array ensures that effect is only run on mount + + return windowSize; +}