feat: add white logos for Homepage in dark mode

martapanc · Feb 22, 2024 · 580ec0f · 580ec0f
1 parent 8cfea30
commit 580ec0f
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 11 deletions.
diff --git a/src/components/organisms/home/Summary.tsx b/src/components/organisms/home/Summary.tsx
@@ -1,6 +1,9 @@
+'use client';
+
 import Image from 'next/image';
 import Link from 'next/link';
-import React from 'react';
+import { useTheme } from 'next-themes';
+import React, { useEffect, useState } from 'react';
 import ReactMarkdown from 'react-markdown';
 import reactStringReplace from 'react-string-replace';
 import rehypeRaw from 'rehype-raw';
@@ -16,12 +19,15 @@ interface LinkProps {
   href: string;
   classes: string;
   image: string;
+  imageDark: string;
   alt: string;
   width: number;
   height: number;
 }
 
-function buildLink(link: LinkProps) {
+function buildLink(link: LinkProps, logoVersion: string) {
+  const logoUrl = logoVersion === 'dark' ? link.imageDark : link.image;
+
   return (
     <Link
       key={link.key}
@@ -30,11 +36,8 @@ function buildLink(link: LinkProps) {
       rel='noopener noreferrer'
     >
       <Image
-        className={clsxm(
-          link.classes +
-            ' inline dark:bg-slate-50 dark:rounded dark:py-0.5 dark:px-1',
-        )}
-        src={link.image}
+        className={clsxm(link.classes, 'inline')}
+        src={logoUrl}
         alt={link.alt}
         width={link.width}
         height={link.height}
@@ -48,22 +51,30 @@ export interface SummaryProps {
 }
 
 const Summary = ({ homePage }: SummaryProps) => {
+  const { theme } = useTheme();
+
+  const [logoVersion, setLogoVersion] = useState('light');
+
+  useEffect(() => {
+    setLogoVersion(theme === 'dark' ? 'dark' : 'light');
+  }, [theme]);
+
   const introduction_1 = reactStringReplace(
     homePage.introduction.now,
     jobs.appetize.key,
-    () => buildLink(jobs.appetize),
+    () => buildLink(jobs.appetize, logoVersion),
   );
 
   let introduction_2 = reactStringReplace(
     homePage.introduction.cv,
     jobs.bjss.key,
-    () => buildLink(jobs.bjss),
+    () => buildLink(jobs.bjss, logoVersion),
   );
   introduction_2 = reactStringReplace(introduction_2, jobs.booking.key, () =>
-    buildLink(jobs.booking),
+    buildLink(jobs.booking, logoVersion),
   );
   introduction_2 = reactStringReplace(introduction_2, jobs.resourcify.key, () =>
-    buildLink(jobs.resourcify),
+    buildLink(jobs.resourcify, logoVersion),
   );
 
   const introductionParts = [

diff --git a/src/data/jobs.json b/src/data/jobs.json
@@ -4,6 +4,7 @@
     "href": "https://appetize.io/",
     "classes": "ms-0.5",
     "image": "https://res.cloudinary.com/dwrurydlt/image/upload/v1705241229/appetize-logo.svg",
+    "imageDark": "https://res.cloudinary.com/dwrurydlt/image/upload/v1708600687/appetize-logo-white.svg",
     "alt": "Appetize.io",
     "width": 100,
     "height": 20
@@ -13,6 +14,7 @@
     "href": "https://resourcify.com/",
     "classes": "ms-1",
     "image": "https://res.cloudinary.com/dwrurydlt/image/upload/v1693067033/resourcify_69f3b5b70d.webp",
+    "imageDark": "https://res.cloudinary.com/dwrurydlt/image/upload/v1708604164/resourcify-logo-white_x7xyoi.png",
     "alt": "Resourcify",
     "width": 100,
     "height": 20
@@ -22,6 +24,7 @@
     "href": "https://bjss.com/",
     "classes": "mx-1",
     "image": "https://res.cloudinary.com/dwrurydlt/image/upload/v1692645367/bjss_180dc7fdd7.webp",
+    "imageDark": "https://res.cloudinary.com/dwrurydlt/image/upload/v1708603696/bjss-logo-white.png",
     "alt": "BJSS",
     "width": 45,
     "height": 25
@@ -31,6 +34,7 @@
     "href": "https://booking.com/",
     "classes": "mx-1",
     "image": "https://res.cloudinary.com/dwrurydlt/image/upload/v1693067075/bookingcom_91b7aa2e36.svg",
+    "imageDark": "https://res.cloudinary.com/dwrurydlt/image/upload/v1708603553/bookingcom_logo_white.png",
     "alt": "Booking.com",
     "width": 115,
     "height": 25