From e36c5ceae284c3df78c5dd3d0a0dc28936e650e3 Mon Sep 17 00:00:00 2001
From: Nils Jacobsen <nils.jacobsen98@gmail.com>
Date: Mon, 27 Feb 2023 11:18:16 +0100
Subject: [PATCH] feat: add gradient placeholder #30

---
 src/client/components/DashboardHeader.tsx  |  8 ++++++--
 src/client/components/GridList.tsx         |  5 ++++-
 src/client/components/crop/ImageUpload.tsx |  5 ++++-
 src/helper/generateUserGradient.ts         | 16 ++++++++++++++++
 4 files changed, 30 insertions(+), 4 deletions(-)
 create mode 100644 src/helper/generateUserGradient.ts

diff --git a/src/client/components/DashboardHeader.tsx b/src/client/components/DashboardHeader.tsx
index 6151e7d6..475f96d3 100644
--- a/src/client/components/DashboardHeader.tsx
+++ b/src/client/components/DashboardHeader.tsx
@@ -3,6 +3,7 @@ import clsx from "clsx";
 import { signOut } from "next-auth/react";
 import { Fragment } from "react";
 import { useRecoilState, useRecoilValue } from "recoil";
+import { generateGradient } from "../../helper/generateUserGradient";
 import { settingsOpenState } from "../store/ui/modals";
 import { currentUserState } from "../store/user";
 import { Icon } from "./Icons";
@@ -13,6 +14,8 @@ export default function DashboardHeader() {
 
   if (!user) return null;
 
+  const gradient = generateGradient(user?.firstName ? user.firstName : "Horst");
+
   return (
     <div className="mx-auto w-full px-2 sm:w-full sm:px-4 md:w-[750] lg:w-[1200px]">
       <Disclosure as="div" className="relative w-full">
@@ -75,12 +78,13 @@ export default function DashboardHeader() {
                       <div>
                         <Menu.Button className="flex rounded-full bg-white focus:outline-none focus:ring-2 focus:ring-zinc-800 focus:ring-offset-2">
                           <span className="sr-only">Open user menu</span>
-                          <img
+                          {user.image ? <img
                             className="h-8 w-8 rounded-full"
                             src={user.image ? user.image : ""}
                             referrerPolicy="no-referrer"
                             alt="profile image"
-                          />
+                          /> : 
+                          <div className="h-8 w-8 rounded-full" style={{background: gradient}}/>}
                         </Menu.Button>
                       </div>
                       <Transition
diff --git a/src/client/components/GridList.tsx b/src/client/components/GridList.tsx
index 9828decf..88d95a67 100644
--- a/src/client/components/GridList.tsx
+++ b/src/client/components/GridList.tsx
@@ -2,6 +2,7 @@ import clsx from "clsx";
 import { useState } from "react";
 import { Link } from "react-router-dom";
 import { useRecoilValue } from "recoil";
+import { generateGradient } from "../../helper/generateUserGradient";
 import { getBaseUrl } from "../../helper/getBaseUrl";
 import { dashboardQueryState } from "../store/ui/dashboardSearch";
 import { currentUserState } from "../store/user";
@@ -31,6 +32,8 @@ export default function GridList() {
     setFocusedId(null);
   }
 
+  const gradient = generateGradient(user?.firstName ? user.firstName : "Horst");
+
   return (
     <div className="mt-8 mb-16 grid w-full gap-4 sm:grid-cols-2 lg:grid-cols-3">
       {filteredSites &&
@@ -51,7 +54,7 @@ export default function GridList() {
                   alt="site profile picture"
                 />
               ) : (
-                <div className="h-12 w-12 rounded-full bg-zinc-100" />
+                <div style={{background: gradient}} className="h-12 w-12 rounded-full" />
               )}
               <div className="mt-4">
                 <h3 className="text-lg font-medium">
diff --git a/src/client/components/crop/ImageUpload.tsx b/src/client/components/crop/ImageUpload.tsx
index 7e7c387f..6be840ee 100644
--- a/src/client/components/crop/ImageUpload.tsx
+++ b/src/client/components/crop/ImageUpload.tsx
@@ -16,6 +16,7 @@ import { currentUserState, isrUserState } from "../../store/user";
 import { isrDataState, isrState } from "../../store/isr";
 import { useUpdateUploadCreditMutation } from "../../graphql/updateUploadCredit.generated";
 import { toast } from "react-hot-toast";
+import { generateGradient } from "../../../helper/generateUserGradient";
 
 interface ImageUploadProps {
   imageUrl: string;
@@ -181,6 +182,8 @@ const ImageUpload: FC<ImageUploadProps> = ({
     }
   }, [cropData]);
 
+  const gradient = generateGradient(currentUser?.firstName ? currentUser.firstName : "Horst");
+
   return (
     <>
       <div
@@ -200,7 +203,7 @@ const ImageUpload: FC<ImageUploadProps> = ({
             />
           </div>
         ) : (
-          <div className="h-full w-full rounded-full border border-zinc-200 bg-zinc-100 dark:border-zinc-600 dark:bg-zinc-800" />
+          (!isIsrMode || imageUrl) && <div style={{"background": gradient}} className="h-full w-full rounded-full border border-zinc-200 dark:border-zinc-600 dark:bg-zinc-800" />
         )}
         <div className="absolute h-full w-full">
           {!disabled && (
diff --git a/src/helper/generateUserGradient.ts b/src/helper/generateUserGradient.ts
new file mode 100644
index 00000000..2b5d7c6c
--- /dev/null
+++ b/src/helper/generateUserGradient.ts
@@ -0,0 +1,16 @@
+export function generateGradient(name: string): string {
+    const colors = [
+      'red',
+      'orange',
+      'yellow',
+      'green',
+      'blue',
+      'purple'
+    ]; // Define an array of colors for the gradient
+  
+    const hue = name.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0) % colors.length; // Generate hue based on character codes of name
+    const startColor = colors[hue]; // Use the hue to select a starting color for the gradient
+    const endColor = colors[(hue + 1) % colors.length]; // Use the next color in the array as the ending color for the gradient
+  
+    return `linear-gradient(to right, ${startColor}, ${endColor})`;
+  }
\ No newline at end of file