-
Notifications
You must be signed in to change notification settings - Fork 60
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 #635 from CodeWritingCow/codewritingcow/597-cookie…
…-banner 597: Accept or Decline Cookies
- Loading branch information
Showing
9 changed files
with
208 additions
and
48 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
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 |
---|---|---|
@@ -0,0 +1,11 @@ | ||
"use client"; | ||
|
||
import { CookieProvider } from "@/context/CookieContext"; | ||
|
||
export const CookieProviderWrapper = ({ | ||
children, | ||
}: { | ||
children: React.ReactNode; | ||
}) => { | ||
return <CookieProvider>{children}</CookieProvider>; | ||
}; |
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
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
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 |
---|---|---|
@@ -0,0 +1,53 @@ | ||
"use client"; | ||
|
||
import { ThemeButton } from "./ThemeButton"; | ||
import { Check, X } from "@phosphor-icons/react"; | ||
import { useCookieContext } from "@/context/CookieContext"; | ||
|
||
const CookieConsentBanner = () => { | ||
const { shouldShowBanner, setShouldAllowCookies, setShouldShowBanner } = | ||
useCookieContext(); | ||
|
||
const onClickButton = (shouldSaveCookies: boolean) => { | ||
setShouldAllowCookies(shouldSaveCookies); | ||
setShouldShowBanner(false); | ||
}; | ||
|
||
return ( | ||
<div | ||
className={`${ | ||
shouldShowBanner | ||
? "md:flex fixed inset-x-0 bottom-0 z-20 justify-between bg-blue-200 p-4 sm:p-6" | ||
: "hidden" | ||
}`} | ||
> | ||
<div> | ||
<div className="heading-md">Can we store cookies to your browser?</div> | ||
<div className="body-sm"> | ||
This provides you a nice experience preserving your filtering, your | ||
position on the map and your property saved list. | ||
</div> | ||
</div> | ||
|
||
<div className="flex justify-end gap-2 pt-4 sm:pt-0"> | ||
<div className="flex flex-none items-center gap-x-2"> | ||
<ThemeButton | ||
color="tertiary" | ||
label="Decline" | ||
startContent={<X />} | ||
onPress={() => onClickButton(false)} | ||
/> | ||
|
||
<ThemeButton | ||
color="primary" | ||
label="Accept" | ||
startContent={<Check />} | ||
onPress={() => onClickButton(true)} | ||
/> | ||
</div> | ||
</div> | ||
</div> | ||
); | ||
}; | ||
|
||
export default CookieConsentBanner; |
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,32 +1,63 @@ | ||
const Footer = () => ( | ||
<div className="flex flex-col"> | ||
<footer className="px-6 h-16 flex flex-grow w-full items-center"> | ||
<nav className="w-full" aria-label="content info"> | ||
<ul className="flex flex-wrap gap-x-4 justify-between items-center w-full backdrop-saturate-150 bg-background/70"> | ||
<li> | ||
<span className="base-sm text-gray-600"> | ||
© 2024 Clean & Green Philly | ||
</span> | ||
</li> | ||
|
||
<li className="base-sm underline text-gray-600 mx-auto"> | ||
<a href="/legal-disclaimer" className="hover:text-gray-800"> | ||
Legal Disclaimer | ||
</a> | ||
</li> | ||
|
||
<li> | ||
<a | ||
href="mailto:[email protected]" | ||
className="base-sm underline text-gray-600 hover:text-gray-800" | ||
> | ||
Contact Us | ||
</a> | ||
</li> | ||
</ul> | ||
</nav> | ||
</footer> | ||
</div> | ||
); | ||
"use client"; | ||
|
||
import { useCookieContext } from "@/context/CookieContext"; | ||
import CookieConsentBanner from "./CookieConsentBanner"; | ||
import Link from "next/link"; | ||
|
||
const Footer = () => { | ||
let { setShouldShowBanner } = useCookieContext(); | ||
|
||
const onClickCookieSettings = () => { | ||
setShouldShowBanner(true); | ||
}; | ||
|
||
return ( | ||
<div className="flex flex-col"> | ||
<footer className="px-6 h-16 flex flex-grow justify-center items-center"> | ||
<nav aria-label="content info"> | ||
<ul className="flex flex-wrap gap-x-2 justify-between items-center w-full backdrop-saturate-150 bg-background/70"> | ||
<li> | ||
<span className="base-sm text-gray-600"> | ||
© 2024 Clean & Green Philly | ||
</span> | ||
</li> | ||
|
||
<span className="max-sm:hidden">—</span> | ||
|
||
<li className="base-sm underline text-gray-600 mx-auto"> | ||
<a | ||
className="hover:text-gray-800 cursor-pointer" | ||
onClick={onClickCookieSettings} | ||
> | ||
Cookie Settings | ||
</a> | ||
</li> | ||
|
||
<span className="max-sm:hidden">—</span> | ||
|
||
<li className="base-sm underline text-gray-600 mx-auto"> | ||
<Link href="/legal-disclaimer" className="hover:text-gray-800"> | ||
Legal Disclaimer | ||
</Link> | ||
</li> | ||
|
||
<span className="max-sm:hidden">—</span> | ||
|
||
<li> | ||
<a | ||
href="mailto:[email protected]" | ||
className="base-sm underline text-gray-600 hover:text-gray-800" | ||
> | ||
Contact Us | ||
</a> | ||
</li> | ||
</ul> | ||
</nav> | ||
|
||
<CookieConsentBanner /> | ||
</footer> | ||
</div> | ||
); | ||
}; | ||
|
||
export default Footer; |
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
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
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 |
---|---|---|
@@ -0,0 +1,48 @@ | ||
import React, { | ||
FC, | ||
createContext, | ||
useContext, | ||
useState, | ||
ReactNode, | ||
} from "react"; | ||
|
||
interface CookieContextProps { | ||
shouldAllowCookies: boolean; | ||
shouldShowBanner: boolean; | ||
setShouldAllowCookies: React.Dispatch<React.SetStateAction<boolean>>; | ||
setShouldShowBanner: React.Dispatch<React.SetStateAction<boolean>>; | ||
} | ||
|
||
interface CookieProviderProps { | ||
children: ReactNode; | ||
} | ||
|
||
export const CookieContext = createContext<CookieContextProps | undefined>( | ||
undefined | ||
); | ||
|
||
export const useCookieContext = () => { | ||
const context = useContext(CookieContext); | ||
if (!context) { | ||
throw new Error("useCookieContext must be used within a CookieProvider"); | ||
} | ||
return context; | ||
}; | ||
|
||
export const CookieProvider: FC<CookieProviderProps> = ({ children }) => { | ||
const [shouldAllowCookies, setShouldAllowCookies] = useState(false); | ||
const [shouldShowBanner, setShouldShowBanner] = useState(true); | ||
|
||
return ( | ||
<CookieContext.Provider | ||
value={{ | ||
shouldAllowCookies, | ||
shouldShowBanner, | ||
setShouldAllowCookies, | ||
setShouldShowBanner, | ||
}} | ||
> | ||
{children} | ||
</CookieContext.Provider> | ||
); | ||
}; |