Merge pull request #31 from nicolaswalcker/adaptative-course-shadow

feat: change top shadow based course card image

apps/app/components/molecules/TopBar.vue

@@ -1,8 +1,15 @@
 <script setup lang="ts">
+import { Color } from "colorthief";
+
 const router = useRouter();
 const sessionStore = useSessionStore();
 const userStore = useUserStore();
 const defaultAsideStore = useDefaultAsideStore();
+const shadowStore = useShadowStore();
+
+const shadowGenerator = (color: Array<Color>): string => {
+  return `radial-gradient(50% 50% at 50% 50%, rgba(${color[0][0]}, ${color[0][1]}, ${color[0][2]}, 0.2) 0%, rgba(${color[0][0]}, ${color[0][1]}, ${color[0][2]}, 0) 100%)`;
+};
 </script>
 
 <template>
@@ -11,10 +18,16 @@ const defaultAsideStore = useDefaultAsideStore();
   >
     <div class="relative h-full w-full max-w-[1017px]">
       <div
-        class="bg-[radial-gradient(50%_50%_at_50%_50%,_rgba(236,_72,_153,_0.2)_0%,_rgba(236,_72,_153,_0)_100%)] absolute bottom-0 left-0 h-[179px] w-[678px]"
+        class="absolute bottom-0 left-0 h-[179px] w-[678px]"
+        :style="{
+          background: shadowGenerator(shadowStore.primaryColors),
+        }"
       ></div>
       <div
-        class="bg-[radial-gradient(50%_50%_at_50%_50%,_rgba(37,_99,_235,_0.2)_0%,_rgba(28,_100,_242,_0)_100%)] absolute bottom-0 right-0 h-[179px] w-[678px]"
+        class="absolute bottom-0 right-0 h-[179px] w-[678px]"
+        :style="{
+          background: shadowGenerator(shadowStore.secondaryColors),
+        }"
       ></div>
     </div>
   </div>

apps/app/package.json

@@ -13,6 +13,7 @@
     "@nuxt/content": "npm:@nuxt/content-edge@latest",
     "@nuxtjs/fontaine": "^0.2.5",
     "@types/node": "^20.4.6",
+    "colorthief": "^2.4.0",
     "nuxt": "^3.7.3",
     "nuxt-schema-org": "^2.1.3",
     "typescript": "^5.1.6"

apps/app/pages/index.vue

@@ -1,12 +1,28 @@
 <script setup lang="ts">
+import ColorThief, { Color } from "colorthief";
 const userStore = useUserStore();
+const shadowStore = useShadowStore();
 
 const title = computed(() => {
   return `Olá${
     userStore.user?.firstName ? `, ${userStore.user.firstName}` : ""
   }, o que vamos aprender hoje?`;
 });
 
+const checkEnter = (param: string) => {
+  const img = new Image();
+  img.src = param;
+  img.crossOrigin = "Anonymous";
+  img.onload = () => {
+    const colorThief = new ColorThief();
+    const colors: Color[] = colorThief.getPalette(img);
+    shadowStore.setColor(colors);
+  };
+};
+const checkLeave = () => {
+  shadowStore.setDefaultColors();
+};
+
 const description =
   "Plataforma gratuita de ensino de programação web para pessoas que estão buscando o primeiro emprego na área ou que querem construir seu próprio negócio.";
 useSeoMeta({
@@ -36,6 +52,8 @@ useSeoMeta({
         <NuxtLink
           v-for="item of navigation"
           :key="item._path"
+          @mouseenter="checkEnter(item.image)"
+          @mouseleave="checkLeave()"
           :nav-item="item"
           :href="
             item.children && item.children[0].children

apps/app/stores/utils/shadow.ts

@@ -0,0 +1,35 @@
+import { defineStore } from "pinia";
+import { Color } from "colorthief";
+
+const DEFAULT_COLORS: Array<Color> = [
+  [236, 72, 153],
+  [236, 72, 153],
+  [37, 99, 235],
+  [28, 100, 242],
+];
+export const useShadowStore = defineStore("shadow", {
+  state: (): { colors: Array<Color> | null } => ({
+    colors: DEFAULT_COLORS,
+  }),
+  getters: {
+    primaryColors(state): Color[] | undefined {
+      return state.colors?.slice(0, 2);
+    },
+    secondaryColors(state): Color[] | undefined {
+      return state.colors?.slice(2, 4);
+    },
+  },
+  actions: {
+    setColor(colors: Array<Color> | null) {
+      if (!colors) {
+        this.colors = null;
+        return;
+      }
+
+      this.colors = colors;
+    },
+    setDefaultColors() {
+      this.colors = DEFAULT_COLORS;
+    },
+  },
+});

apps/app/types/colorthief.d.ts

@@ -0,0 +1,7 @@
+declare module "colorthief" {
+  type Color = [number, number, number];
+  export default class ColorThief {
+    getColor: (img: HTMLImageElement | null) => Color;
+    getPalette: (img: HTMLImageElement | null) => Color[];
+  }
+}