Finalized footer

components/layout/footer/footer.tsx

@@ -3,6 +3,8 @@ import { Container } from "../../util/container";
 import { ObjectField } from "@tinacms/schema-tools/dist/types";
 import facebookImage from "../../../assets/img/facebook.svg";
 import instagramImage from "../../../assets/img/instagram.svg";
+import { tinaField } from "tinacms/dist/react";
+import { TinaMarkdown } from "tinacms/dist/rich-text";
 
 export const Footer = ({ data, rawData }) => {
     return (
@@ -10,25 +12,58 @@ export const Footer = ({ data, rawData }) => {
             <Container className="relative" size="small">
                 <div className={ "flex flex-row justify-between" }>
                     <div>
-                        <p>Contact :<br/>
+                        <p>
-                            <a href="mailto:psychartherapie@gmail.com" onClick={ () => { /* window.dataLayer.push({ event: "mail-click" });*/ } }>
+                            <span data-tina-field={ tinaField(data?.contact, "label") }>
-                                psychartherapie@gmail.com
+                                { data?.contact?.label }
+                            </span>
+                            <br/>
+                            <a href={ `mailto:${ data?.contact?.mail }` }
+                                onClick={ () => { /* window.dataLayer.push({ event: "mail-click" });*/ } }
+                                data-tina-field={ tinaField(data?.contact, "mail") }>
+                                { data?.contact?.mail }
                             </a>
                             <br/>
-                            <b>06 49 23 02 90</b>
+                            <b data-tina-field={ tinaField(data?.contact, "phone") }>
+                                { data?.contact?.phone }
+                            </b>
                         </p>
-                        <p>SIRET 911 883 338 00012<br/><a href="legals.html">Mentions légales</a></p>
+                        <p>
-                        <div id="socials" className="flex flex-row">
+                            SIRET <span data-tina-field={ tinaField(data?.legals, "siret") }>
-                            <a href="https://www.facebook.com/psychartherapie.gard" onClick={ () => { /* window.dataLayer.push({ socials: "fb-click" });*/ } } className="py-2 me-2">
+                                { data?.legals?.siret }
-                                <img src={ facebookImage.src } alt="Facebook"/>
+                            </span>
-                            </a>
+                            <br/>
-                            <a href="https://www.instagram.com/psychartherapie" onClick={ () => { /* window.dataLayer.push({ socials: "insta-click" });*/ } } className="py-2">
+                            <a href={ data?.legals?.link?.url }
-                                <img src={ instagramImage.src } alt="Instagram"/>
+                                data-tina-field={ tinaField(data?.legals, "link") }>
+                                { data?.legals?.link?.label }
                             </a>
+                        </p>
+                        <div id="socials"
+                            className="flex flex-row"
+                            data-tina-field={ tinaField(data, "social") }>
+                            { data?.social?.facebook &&
+                                <a href={ data?.social?.facebook }
+                                    onClick={ () => { /* window.dataLayer.push({ socials: "fb-click" });*/ } }
+                                    className="py-2 me-2">
+                                    <img src={ facebookImage } alt="Facebook"/>
+                                </a> }
+
+                            { data?.social?.instagram &&
+                                <a href={ data?.social?.instagram }
+                                    onClick={ () => { /* window.dataLayer.push({ socials: "insta-click" });*/ } }
+                                    className="py-2">
+                                    <img src={ instagramImage } alt="Instagram"/>
+                                </a> }
                         </div>
                     </div>
                     <div>
-                        <p>&copy; 2023 &#8211; Fait avec amour par <a className="mx-1" href="https://www.linkedin.com/in/nolwenn-meyer/">Nolwenn Meyer</a></p>
+                        <p data-tina-field={ tinaField(data, "copyright") }>
+                            &copy; { data?.copyright?.year }
+                            { data?.copyright?.subtext?.children?.length > 0 &&
+                                <> &#8211;<div className={ "ml-1 float-right" }>
+                                    <TinaMarkdown content={ data.copyright?.subtext } />
+                                </div>
+                                </> }
+                        </p>
                     </div>
                 </div>
             </Container>
@@ -41,6 +76,90 @@ export const footerSchema: ObjectField = {
     label: "Footer",
     name: "footer",
     fields: [
+        {
+            type: "object",
+            label: "Contact",
+            name: "contact",
+            defaultItem: {
+                label: "Contact :",
+                mail: "mail@example.com",
+                phone: "00 00 00 00 00"
+            },
+            fields: [
+                {
+                    type: "string",
+                    label: "Label Contact",
+                    name: "label"
+                },
+                {
+                    type: "string",
+                    label: "Mail",
+                    name: "mail"
+                },
+                {
+                    type: "string",
+                    label: "Téléphone",
+                    name: "phone"
+                }
+            ]
+        },
+        {
+            type: "object",
+            label: "Legal",
+            name: "legals",
+            defaultItem: {
+                siret: "000 000 000 00000",
+                link: {
+                    label: "Mentions légales",
+                    url: "/"
+                }
+            },
+            fields: [
+                {
+                    type: "string",
+                    label: "SIRET",
+                    name: "siret"
+                },
+                {
+                    type: "object",
+                    label: "Lien Mentions Légales",
+                    name: "link",
+                    fields: [
+                        {
+                            type: "string",
+                            label: "Texte",
+                            name: "label"
+                        },
+                        {
+                            type: "string",
+                            label: "Url",
+                            name: "url"
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            type: "object",
+            label: "Copyright",
+            name: "copyright",
+            defaultItem: {
+                year: "0000",
+                subtext: "El text"
+            },
+            fields: [
+                {
+                    type: "string",
+                    label: "Année",
+                    name: "year"
+                },
+                {
+                    type: "rich-text",
+                    label: "Sous-texte",
+                    name: "subtext"
+                }
+            ]
+        },
         {
             type: "object",
             label: "Social Links",
@@ -51,20 +170,10 @@ export const footerSchema: ObjectField = {
                     label: "Facebook",
                     name: "facebook"
                 },
-                {
-                    type: "string",
-                    label: "Twitter",
-                    name: "twitter"
-                },
                 {
                     type: "string",
                     label: "Instagram",
                     name: "instagram"
-                },
-                {
-                    type: "string",
-                    label: "Github",
-                    name: "github"
                 }
             ]
         }]

components/layout/header.tsx

@@ -6,6 +6,13 @@ import { GlobalHeader } from "../../tina/__generated__/types";
 import { ObjectField } from "@tinacms/schema-tools/dist/types";
 
 export const Header = ({ data }: { data: GlobalHeader }) => {
+    const navbarToggler: JSX.Element = (
+        <button className="navbar-toggler" type="button" data-bs-toggle="collapse"
+            data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
+            aria-label="Toggle navigation">
+            <span className="navbar-toggler-icon" />
+        </button>
+    );
     return (
         <nav className="navbar flex flex-wrap content-between sticky top-0 py-2">
             <div className="flex grow justify-between px-6 h-full">
@@ -21,19 +28,11 @@ export const Header = ({ data }: { data: GlobalHeader }) => {
                         </div>
                     </Link>
                 </div>
-                <button className="navbar-toggler" type="button" data-bs-toggle="collapse"
+                { navbarToggler }
-                    data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
+                <div className={ "navbar-items flex items-center" } id="navbarSupportedContent">
-                    aria-label="Toggle navigation">
-                    <span className="navbar-toggler-icon" />
-                </button>
-                <div className={ "flex items-center" } id="navbarSupportedContent">
                     <ul className="flex md:flex-row">
                         { data.nav &&
               data.nav.map((item, i) => {
-                  /* const activeItem =
-                  (item.href === ""
-                    ? router.asPath === "/"
-                    : router.asPath.includes(item.href)) && isClient;*/
                   return (
                       <li
                           key={ `${ item.label }-${ i }` }

content/global/index.json

@@ -25,10 +25,25 @@
     ]
   },
   "footer": {
+    "contact": {
+      "label": "Contact :",
+      "mail": "psychartherapie@gmail.com",
+      "phone": "06 49 23 02 90"
+    },
+    "legals": {
+      "siret": "911 883 338 00012",
+      "link": {
+        "label": "Mentions légales",
+        "url": "/legals"
+      }
+    },
+    "copyright": {
+      "year": "2023",
+      "subtext": "Fait avec amour par [Nolwenn Meyer](https://www.linkedin.com/in/nolwenn-meyer/ \"Nolwenn Meyer\")\n"
+    },
     "social": {
-      "facebook": "/",
+      "facebook": "https://www.facebook.com/psychartherapie.gard",
-      "twitter": "/",
+      "instagram": "https://www.instagram.com/psychartherapie"
-      "instagram": "/"
     }
   }
 }

styles/header.scss

@@ -25,6 +25,12 @@
         }
     }
 
+    .navbar-items {
+    }
+    .navbar-toggler {
+        display: none;
+    }
+
     .nav-item .nav-link {
         font-family: 'Nunito', sans-serif;
         font-size: 1.4rem;