diff --git a/front/next-env.d.ts b/front/next-env.d.ts index c4b7818..9edff1c 100644 --- a/front/next-env.d.ts +++ b/front/next-env.d.ts @@ -1,6 +1,6 @@ /// /// -import "./.next/dev/types/routes.d.ts"; +import "./.next/types/routes.d.ts"; // NOTE: This file should not be edited // see https://nextjs.org/docs/app/api-reference/config/typescript for more information. diff --git a/front/src/app/layout.tsx b/front/src/app/layout.tsx index 7d7e8bf..9c0acbb 100644 --- a/front/src/app/layout.tsx +++ b/front/src/app/layout.tsx @@ -1,6 +1,7 @@ import React from "react"; import "./globals.css"; import { FooterComponent, HeaderComponent } from "../layouts"; +import { CookiesConsentProvider, CookiesBanner } from "../common/cookies"; interface Props { children: React.ReactNode; @@ -14,9 +15,12 @@ const RootLayout = (props: Props) => { className="bg-base-200 text-base-content flex min-h-screen flex-col" suppressHydrationWarning > - -
{children}
- + + +
{children}
+ + +
); diff --git a/front/src/common/cookies/cookies-banner.component.tsx b/front/src/common/cookies/cookies-banner.component.tsx new file mode 100644 index 0000000..254c391 --- /dev/null +++ b/front/src/common/cookies/cookies-banner.component.tsx @@ -0,0 +1,38 @@ +"use client"; + +import Link from "next/link"; +import React from "react"; +import { useCookiesConsent } from "./cookies-consent.context"; + +export const CookiesBanner: React.FC = () => { + const { consent, acceptCookies, rejectCookies } = useCookiesConsent(); + + if (consent !== null) { + return null; + } + + return ( +
+
+

+ Utilizamos cookies analíticas para mejorar tu experiencia. Puedes + aceptar o rechazar su uso.{" "} + + Política de Cookies + +

+
+ + +
+
+
+ ); +}; diff --git a/front/src/common/cookies/cookies-consent.context.tsx b/front/src/common/cookies/cookies-consent.context.tsx new file mode 100644 index 0000000..e48d0db --- /dev/null +++ b/front/src/common/cookies/cookies-consent.context.tsx @@ -0,0 +1,61 @@ +"use client"; + +import React, { createContext, useContext, useState, useEffect } from "react"; + +type CookiesConsent = "accepted" | "rejected" | null; + +interface CookiesConsentContextType { + consent: CookiesConsent; + acceptCookies: () => void; + rejectCookies: () => void; + resetCookies: () => void; +} + +const STORAGE_KEY = "cookies-consent"; + +const CookiesConsentContext = createContext({ + consent: null, + acceptCookies: () => {}, + rejectCookies: () => {}, + resetCookies: () => {}, +}); + +export const useCookiesConsent = () => useContext(CookiesConsentContext); + +interface Props { + children: React.ReactNode; +} + +export const CookiesConsentProvider: React.FC = ({ children }) => { + const [consent, setConsent] = useState(null); + + useEffect(() => { + const stored = localStorage.getItem(STORAGE_KEY); + if (stored === "accepted" || stored === "rejected") { + setConsent(stored); + } + }, []); + + const acceptCookies = () => { + localStorage.setItem(STORAGE_KEY, "accepted"); + setConsent("accepted"); + }; + + const rejectCookies = () => { + localStorage.setItem(STORAGE_KEY, "rejected"); + setConsent("rejected"); + }; + + const resetCookies = () => { + localStorage.removeItem(STORAGE_KEY); + setConsent(null); + }; + + return ( + + {children} + + ); +}; diff --git a/front/src/common/cookies/cookies-reset-button.component.tsx b/front/src/common/cookies/cookies-reset-button.component.tsx new file mode 100644 index 0000000..873c0d5 --- /dev/null +++ b/front/src/common/cookies/cookies-reset-button.component.tsx @@ -0,0 +1,17 @@ +"use client"; + +import React from "react"; +import { useCookiesConsent } from "./cookies-consent.context"; + +export const CookiesResetButton: React.FC = () => { + const { resetCookies } = useCookiesConsent(); + + return ( + + ); +}; diff --git a/front/src/common/cookies/index.ts b/front/src/common/cookies/index.ts new file mode 100644 index 0000000..085c71f --- /dev/null +++ b/front/src/common/cookies/index.ts @@ -0,0 +1,3 @@ +export { CookiesConsentProvider, useCookiesConsent } from "./cookies-consent.context"; +export { CookiesBanner } from "./cookies-banner.component"; +export { CookiesResetButton } from "./cookies-reset-button.component"; diff --git a/front/src/layouts/footer.component.tsx b/front/src/layouts/footer.component.tsx index 002c7bb..cbe8c88 100644 --- a/front/src/layouts/footer.component.tsx +++ b/front/src/layouts/footer.component.tsx @@ -1,5 +1,6 @@ import Link from "next/link"; import { FC } from "react"; +import { CookiesResetButton } from "../common/cookies"; export const FooterComponent: FC = () => { return ( @@ -13,7 +14,7 @@ export const FooterComponent: FC = () => { Embalses por provincias -
+
{ > Política de cookies +