feat: add a page for preview save the date from directus (#69)

clicepfl · Sep 18, 2024 · 91a099a · 91a099a
1 parent f7c5ca8
commit 91a099a
Show file tree

Hide file tree

Showing 5 changed files with 426 additions and 32 deletions.
diff --git a/app/src/components/DirectusImage.tsx b/app/src/components/DirectusImage.tsx
@@ -6,6 +6,17 @@ const imageLoader: ImageLoader = ({ src, width, quality }) => {
   return `${PUBLIC_DIRECTUS_URL}/assets/${src}?width=${width}`;
 };
 
+export function directusImageUrl(
+  img: string | components["schemas"]["Files"] | null
+) {
+  return img
+    ? imageLoader({
+        src: typeof img === "string" ? img : img.filename_disk || "",
+        width: 1920,
+      })
+    : "";
+}
+
 /**
  * Display an Image fetched from the Directus instance
  * @param img unique public identifier of the image .

diff --git a/app/src/components/SocialsList.tsx b/app/src/components/SocialsList.tsx
@@ -14,38 +14,42 @@ export default function SocialsList(props: {
   return (
     <div className={styles.socialsList}>
       <div className={styles.list}>
-        {props.socials.map((s) => {
-          const content = (
-            <DirectusImage
-              sizes="4rem"
-              img={s.logo}
-              name={s.media_name}
-              className={`${styles.social} ${props.light ? styles.light : ""}`}
-            />
-          );
-
-          if (/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(s.link || "")) {
-            return (
-              <a
-                href={`mailto:${s.link}`}
-                id={s.id?.toString()}
-                key={s.id?.toString()}
-              >
-                {content}
-              </a>
-            );
-          } else {
-            return (
-              <Link
-                href={s.link || ""}
-                id={s.id?.toString()}
-                key={s.id?.toString()}
-              >
-                {content}
-              </Link>
+        {props.socials
+          .filter((s) => s)
+          .map((s) => {
+            const content = (
+              <DirectusImage
+                sizes="4rem"
+                img={s.logo}
+                name={s.media_name}
+                className={`${styles.social} ${
+                  props.light ? styles.light : ""
+                }`}
+              />
             );
-          }
-        })}
+
+            if (/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(s.link || "")) {
+              return (
+                <a
+                  href={`mailto:${s.link}`}
+                  id={s.id?.toString()}
+                  key={s.id?.toString()}
+                >
+                  {content}
+                </a>
+              );
+            } else {
+              return (
+                <Link
+                  href={s.link || ""}
+                  id={s.id?.toString()}
+                  key={s.id?.toString()}
+                >
+                  {content}
+                </Link>
+              );
+            }
+          })}
       </div>
     </div>
   );