-
Notifications
You must be signed in to change notification settings - Fork 20
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #27 from xeptagondev/undp-compass-192
cookie-consent mobile reponsive
- Loading branch information
Showing
1 changed file
with
37 additions
and
29 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,37 +1,45 @@ | ||
| import { useState, useEffect } from 'react'; | ||
| import { useState, useEffect } from "react"; | ||
|
|
||
| const CookieConsent = () => { | ||
| const [isVisible, setIsVisible] = useState(false); | ||
| const [isVisible, setIsVisible] = useState(false); | ||
|
|
||
| useEffect(() => { | ||
| const cookieConsent = localStorage.getItem('cookieConsent'); | ||
| if (!cookieConsent) { | ||
| setIsVisible(true); | ||
| } | ||
| }, []); | ||
| useEffect(() => { | ||
| const cookieConsent = localStorage.getItem("cookieConsent"); | ||
| if (!cookieConsent) { | ||
| setIsVisible(true); | ||
| } | ||
| }, []); | ||
|
|
||
| const handleAccept = () => { | ||
| localStorage.setItem('cookieConsent', 'true'); | ||
| setIsVisible(false); | ||
| }; | ||
| const handleAccept = () => { | ||
| localStorage.setItem("cookieConsent", "true"); | ||
| setIsVisible(false); | ||
| }; | ||
|
|
||
| if (!isVisible) return null; | ||
| if (!isVisible) return null; | ||
|
|
||
| return ( | ||
| <div className="fixed inset-x-0 bottom-0 cookie-bg-color text-white p-4 flex justify-between items-center"> | ||
| <div className="max-w-[calc(100%-250px)]"> {/* Adjust max-width accordingly */} | ||
| <p>We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept All”, you consent to the use of ALL the cookies. However, you may visit "Cookie Settings" to provide a controlled consent.</p> | ||
| </div> | ||
| <div className="flex items-center space-x-2"> | ||
| <button onClick={handleAccept} className="bg-white hover:bg-brand-blue text-brand-blue-dark hover:text-white font-semibold py-2 px-4 rounded"> | ||
| Accept All | ||
| </button> | ||
| <a href="https://www.undp.org/copyright-terms-use" target='_blank' > | ||
| Cookie Settings | ||
| </a> | ||
| </div> | ||
| </div> | ||
| ); | ||
| return ( | ||
| <div className="fixed inset-x-0 bottom-0 cookie-bg-color text-white p-4 flex flex-col md:flex-row justify-between items-center"> | ||
| <div className="max-w-full md:max-w-[calc(100%-250px)] space-y-4 md:space-y-0"> | ||
| <p> | ||
| We use cookies on our website to give you the most relevant experience | ||
| by remembering your preferences and repeat visits. By clicking “Accept | ||
| All”, you consent to the use of ALL the cookies. However, you may | ||
| visit "Cookie Settings" to provide a controlled consent. | ||
| </p> | ||
| </div> | ||
| <div className="flex flex-wrap items-center space-x-2 mt-4 md:mt-0"> | ||
| <button | ||
| onClick={handleAccept} | ||
| className="bg-white hover:bg-brand-blue text-brand-blue-dark hover:text-white font-semibold py-2 px-4 rounded" | ||
| > | ||
| Accept All | ||
| </button> | ||
| <a href="https://www.undp.org/copyright-terms-use" target="_blank"> | ||
| Cookie Settings | ||
| </a> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default CookieConsent; | ||
| export default CookieConsent; |