126 connect footer to strapi

next/components/footer/footer.module.css

@@ -1,43 +1,53 @@
 .footer {
-  display: grid;
+  display: flex;
+  flex-direction: column;
 }
 
 .top {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
+  display: flex;
+  justify-content: space-between;
+  gap: 0.5rem;
+  grid-template-columns: repeat(3, 1fr);
   align-items: center;
   background-color: white;
-  padding: 1.5rem calc(var(--gutter) + 2rem);
+  padding: 0.75rem calc(var(--gutter) + 1rem);
 }
 
 .bottom {
   @apply bg-b-orange text-b-dark-blue;
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
+  display: flex;
+  justify-content: space-between;
   align-items: center;
+  gap: 1rem;
   padding: 1rem var(--gutter);
 }
 
-.top :nth-child(2),
-.bottom :nth-child(2) {
-  justify-self: center;
+.brandLogo {
+  object-fit: contain;
+  height: 80px;
+  width: 80px;
+  flex-shrink: 0;
 }
 
-.top :nth-child(3),
-.bottom :nth-child(3) {
-  justify-self: right;
+.bottom .younite {
+  flex: 0;
+  text-align: center;
 }
 
-.brandLogo {
-  object-fit: contain;
+.bottom .creditsPrivacy {
+  flex: 1;
+  text-align: end;
 }
 
-.socialsContainer {
+.bottom .socialsContainer {
   display: flex;
+  flex: 1;
   gap: 0.5rem;
-  object-fit: contain;
 }
 
+
 .socialLogo {
   object-fit: contain;
+  height: 32px;
+  width: 32px;
 }

next/components/footer/footer.tsx

@@ -1,109 +1,70 @@
+import { getLargestImageUrl } from "@/util/image";
+import { footerSchema } from "@/schemas/single/Footer";
+import fetchStrapi from "@/util/strapi";
 import Image from "next/image";
 import styles from "./footer.module.css";
 // socials
-import facebookLogo from "@/assets/footer/facebookLogo.svg";
-import instagramLogo from "@/assets/footer/instagramLogo.svg";
-import linkTreeLogo from "@/assets/footer/linkTreeLogo.svg";
-import tiktokLogo from "@/assets/footer/tiktokLogo.svg";
-// brands
-import lakeHouseLogo from "@/assets/footer/lakeHouseLogo.png";
-import localBoardLogo from "@/assets/footer/localBoardLogo.png";
-import shoreJunctionLogo from "@/assets/footer/shoreJunction.png";
+// // brands
+// import lakeHouseLogo from "@/assets/footer/lakeHouseLogo.png";
+// import localBoardLogo from "@/assets/footer/localBoardLogo.png";
+// import shoreJunctionLogo from "@/assets/footer/shoreJunction.png";
+//lost links to socials
+async function getFooterData() {
+  const resData = await fetchStrapi("footer", footerSchema);
+  return resData;
+}
+
+export default async function Footer() {
+  const data = await getFooterData();
+  const { topFooter, logoSection, younite, CreditsPrivacy } = data;
+  const brands = data.topFooter;
+  const links = data.logoSection;
 
-export default function Footer() {
   return (
     <footer className={styles.footer}>
       <div className={styles.top}>
-        <a
-          href="https://www.aucklandcouncil.govt.nz/about-auckland-council/how-auckland-council-works/local-boards/all-local-boards/devonport-takapuna-local-board/Pages/default.aspx"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            height={4 * 16}
-            src={localBoardLogo}
-            className={styles.brandLogo}
-            alt=""
-          />
-        </a>
-        <a
-          href="https://shorejunction.nz/"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            height={4 * 16}
-            src={shoreJunctionLogo}
-            className={styles.brandLogo}
-            alt=""
-          />
-        </a>
-        <a
-          href="https://lakehousearts.org.nz/"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            height={4 * 16}
-            src={lakeHouseLogo}
-            className={styles.brandLogo}
-            alt=""
-          />
-        </a>
-      </div>
-      <div className={styles.bottom}>
-        <div className={styles.socialsContainer}>
+      {brands.map((item, index) => (
           <a
-            href="https://www.facebook.com/younitedt/"
+            key={index}
+            href={item.url}
             target="_blank"
             rel="noopener noreferrer"
           >
             <Image
-              height={32}
-              src={facebookLogo}
-              className={styles.socialLogo}
-              alt=""
-            />
-          </a>
-          <a
-            href="https://www.instagram.com/younitedt/?hl=en"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              height={32}
-              src={instagramLogo}
-              className={styles.socialLogo}
-              alt=""
-            />
-          </a>
-          <a
-            href="https://www.tiktok.com/@y0un1te"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              height={32}
-              src={tiktokLogo}
-              className={styles.socialLogo}
+              height={4 * 16}
+              width={100}
+              src={getLargestImageUrl(item.image)}
+              className={styles.brandLogo}
               alt=""
             />
           </a>
+        ))}
+        </div>
+
+
+      <div className={styles.bottom}>
+        <div className={styles.socialsContainer}>
+        {links.map((item, index) => (
           <a
-            href="https://linktr.ee/younitedt?utm_source=linktree_profile_share&ltsid=f50e90c4-8dee-4350-8645-fe0822773924"
+            key={index}
+            href={item.url}
             target="_blank"
             rel="noopener noreferrer"
           >
             <Image
               height={32}
-              src={linkTreeLogo}
+              width={32}
+              src={getLargestImageUrl(item.image)}
               className={styles.socialLogo}
-              alt=""
+              alt={item.title}
             />
           </a>
+        ))}
         </div>
-        <span>©Younite</span>
-        <span>Credits & Privacy</span>
+        <a href={younite.url} target="_blank" rel="noopener noreferrer" className={styles.younite}>
+          <span>{younite.title}</span>
+        </a>
+        <span className={styles.creditsPrivacy}>{CreditsPrivacy}</span>
       </div>
     </footer>
   );

next/components/header/header.tsx

@@ -1,10 +1,10 @@
-import { headerSchema } from "@/schemas/single/Header";
 import { getLargestImageUrl } from "@/util/image";
 import fetchStrapi from "@/util/strapi";
 import Image from "next/image";
 import Link from "next/link";
 import { z } from "zod";
 import styles from "./header.module.css";
+import { headerSchema } from "@/schemas/single/Header";
 
 async function getHeaderData() {
   const resData = await fetchStrapi("header", headerSchema);
@@ -23,11 +23,11 @@ async function getHeaderData() {
   const projects = [
     {
       Title: new Date().getFullYear(),
-      slug: "current",
+      url: "current",
     },
     {
       Title: "Past",
-      slug: "past",
+      url: "past",
     },
   ];
   return {
@@ -95,7 +95,7 @@ export default async function Header() {
         </div>
 
         {links.map((link) => (
-          <Link href={link.slug} key={link.title}>
+          <Link href={link.url} key={link.title}>
             {link.title.toLocaleUpperCase()}
           </Link>
         ))}

next/schemas/single/Footer.ts

@@ -0,0 +1,25 @@
+import { z } from "zod";
+import { imageSchema } from "../Image";
+
+export const footerSchema = z.object({
+  topFooter: z.array(
+    z.object({
+      url: z.string(),
+      image: imageSchema,
+    }),
+  ),
+  logoSection: z.array(
+    z.object({
+      url: z.string(),
+      title: z.string(),
+      image: imageSchema,
+    }),
+  ),
+  younite: z.object({
+    url: z.string(),
+    title: z.string(),
+  }),
+  CreditsPrivacy: z.string(),
+});
+
+export type FooterType = z.infer<typeof footerSchema>;

next/schemas/single/Header.ts

@@ -4,7 +4,7 @@ export const headerSchema = z.object({
   Logo: z.any(),
   navigation: z.array(
     z.object({
-      slug: z.string(),
+      url: z.string(),
       title: z.string(),
     }),
   ),

next/util/image.ts

@@ -1,6 +1,9 @@
 import { ImageType } from "@/schemas/Image";
 
 export const getLargestImageUrl = (img: ImageType) => {
+  if (!img.data || !img.data.attributes) {
+    return "";
+  }
   const { large, medium, small, thumbnail } = img.data.attributes.formats;
   const largestFormat = large ?? medium ?? small ?? thumbnail ?? { url: "" };
   const isRelativeUrl = process.env.NODE_ENV === "development";

strapi/src/api/footer/content-types/footer/schema.json

@@ -0,0 +1,34 @@
+{
+  "kind": "singleType",
+  "collectionName": "footers",
+  "info": {
+    "singularName": "footer",
+    "pluralName": "footers",
+    "displayName": "Footer",
+    "description": ""
+  },
+  "options": {
+    "draftAndPublish": true
+  },
+  "pluginOptions": {},
+  "attributes": {
+    "topFooter": {
+      "type": "component",
+      "repeatable": true,
+      "component": "content-block.top-footer"
+    },
+    "logoSection": {
+      "type": "component",
+      "repeatable": true,
+      "component": "content-block.logo-section"
+    },
+    "younite": {
+      "type": "component",
+      "repeatable": false,
+      "component": "content-block.younite"
+    },
+    "CreditsPrivacy": {
+      "type": "string"
+    }
+  }
+}

strapi/src/api/footer/controllers/footer.js

@@ -0,0 +1,9 @@
+'use strict';
+
+/**
+ * footer controller
+ */
+
+const { createCoreController } = require('@strapi/strapi').factories;
+
+module.exports = createCoreController('api::footer.footer');

strapi/src/api/footer/routes/footer.js

@@ -0,0 +1,9 @@
+'use strict';
+
+/**
+ * footer router
+ */
+
+const { createCoreRouter } = require('@strapi/strapi').factories;
+
+module.exports = createCoreRouter('api::footer.footer');

strapi/src/api/footer/services/footer.js

@@ -0,0 +1,9 @@
+'use strict';
+
+/**
+ * footer service
+ */
+
+const { createCoreService } = require('@strapi/strapi').factories;
+
+module.exports = createCoreService('api::footer.footer');

strapi/src/components/content-block/logo-section.json

@@ -0,0 +1,27 @@
+{
+  "collectionName": "components_content_block_logo_sections",
+  "info": {
+    "displayName": "logoSection",
+    "description": ""
+  },
+  "options": {},
+  "attributes": {
+    "title": {
+      "type": "string"
+    },
+    "url": {
+      "type": "string"
+    },
+    "image": {
+      "type": "media",
+      "multiple": false,
+      "required": false,
+      "allowedTypes": [
+        "images",
+        "files",
+        "videos",
+        "audios"
+      ]
+    }
+  }
+}