feat: add gradient placeholder #30

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

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">

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 && (

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})`;
+ }