fix ChromaGrid errors

2026-03-07 14:39:30 -07:00 · 2025-07-18 11:33:13 +03:00
parent 63d194ddd9
commit 992d451064
3 changed files with 118 additions and 124 deletions
--- a/src/content/Components/ChromaGrid/ChromaGrid.vue
+++ b/src/content/Components/ChromaGrid/ChromaGrid.vue
@@ -1,25 +1,25 @@
 <script setup lang="ts">
-import { ref, onMounted, computed } from 'vue'
-import gsap from 'gsap'
+import { ref, onMounted, computed } from 'vue';
+import gsap from 'gsap';

 interface CardItem {
-  image: string
-  title: string
-  subtitle: string
-  handle?: string
-  borderColor?: string
-  gradient?: string
-  url?: string
-  location?: string
+  image: string;
+  title: string;
+  subtitle: string;
+  handle?: string;
+  borderColor?: string;
+  gradient?: string;
+  url?: string;
+  location?: string;
 }

 interface GridMotionProps {
-  items?: CardItem[]
-  className?: string
-  radius?: number
-  damping?: number
-  fadeOut?: number
-  ease?: string
+  items?: CardItem[];
+  className?: string;
+  radius?: number;
+  damping?: number;
+  fadeOut?: number;
+  ease?: string;
 }

 const props = withDefaults(defineProps<GridMotionProps>(), {
@@ -28,85 +28,85 @@ const props = withDefaults(defineProps<GridMotionProps>(), {
  radius: 300,
  damping: 0.45,
  fadeOut: 0.6,
-  ease: 'power3.out',
-})
+  ease: 'power3.out'
+});

-const rootRef = ref<HTMLElement | null>(null)
-const fadeRef = ref<HTMLElement | null>(null)
-const setX = ref<any>(null)
-const setY = ref<any>(null)
-const pos = ref({ x: 0, y: 0 })
+const rootRef = ref<HTMLElement | null>(null);
+const fadeRef = ref<HTMLElement | null>(null);
+const setX = ref<((value: number | string) => void) | null>(null);
+const setY = ref<((value: number | string) => void) | null>(null);
+const pos = ref({ x: 0, y: 0 });

 const demo: CardItem[] = [
  {
-    image: "https://i.pravatar.cc/300?img=8",
-    title: "Alex Rivera",
-    subtitle: "Full Stack Developer",
-    handle: "@alexrivera",
-    borderColor: "#4F46E5",
-    gradient: "linear-gradient(145deg,#4F46E5,#000)",
-    url: "https://github.com/",
+    image: 'https://i.pravatar.cc/300?img=8',
+    title: 'Alex Rivera',
+    subtitle: 'Full Stack Developer',
+    handle: '@alexrivera',
+    borderColor: '#4F46E5',
+    gradient: 'linear-gradient(145deg,#4F46E5,#000)',
+    url: 'https://github.com/'
  },
  {
-    image: "https://i.pravatar.cc/300?img=11",
-    title: "Jordan Chen",
-    subtitle: "DevOps Engineer",
-    handle: "@jordanchen",
-    borderColor: "#10B981",
-    gradient: "linear-gradient(210deg,#10B981,#000)",
-    url: "https://linkedin.com/in/",
+    image: 'https://i.pravatar.cc/300?img=11',
+    title: 'Jordan Chen',
+    subtitle: 'DevOps Engineer',
+    handle: '@jordanchen',
+    borderColor: '#10B981',
+    gradient: 'linear-gradient(210deg,#10B981,#000)',
+    url: 'https://linkedin.com/in/'
  },
  {
-    image: "https://i.pravatar.cc/300?img=3",
-    title: "Morgan Blake",
-    subtitle: "UI/UX Designer",
-    handle: "@morganblake",
-    borderColor: "#F59E0B",
-    gradient: "linear-gradient(165deg,#F59E0B,#000)",
-    url: "https://dribbble.com/",
+    image: 'https://i.pravatar.cc/300?img=3',
+    title: 'Morgan Blake',
+    subtitle: 'UI/UX Designer',
+    handle: '@morganblake',
+    borderColor: '#F59E0B',
+    gradient: 'linear-gradient(165deg,#F59E0B,#000)',
+    url: 'https://dribbble.com/'
  },
  {
-    image: "https://i.pravatar.cc/300?img=16",
-    title: "Casey Park",
-    subtitle: "Data Scientist",
-    handle: "@caseypark",
-    borderColor: "#EF4444",
-    gradient: "linear-gradient(195deg,#EF4444,#000)",
-    url: "https://kaggle.com/",
+    image: 'https://i.pravatar.cc/300?img=16',
+    title: 'Casey Park',
+    subtitle: 'Data Scientist',
+    handle: '@caseypark',
+    borderColor: '#EF4444',
+    gradient: 'linear-gradient(195deg,#EF4444,#000)',
+    url: 'https://kaggle.com/'
  },
  {
-    image: "https://i.pravatar.cc/300?img=25",
-    title: "Sam Kim",
-    subtitle: "Mobile Developer",
-    handle: "@thesamkim",
-    borderColor: "#8B5CF6",
-    gradient: "linear-gradient(225deg,#8B5CF6,#000)",
-    url: "https://github.com/",
+    image: 'https://i.pravatar.cc/300?img=25',
+    title: 'Sam Kim',
+    subtitle: 'Mobile Developer',
+    handle: '@thesamkim',
+    borderColor: '#8B5CF6',
+    gradient: 'linear-gradient(225deg,#8B5CF6,#000)',
+    url: 'https://github.com/'
  },
  {
-    image: "https://i.pravatar.cc/300?img=60",
-    title: "Tyler Rodriguez",
-    subtitle: "Cloud Architect",
-    handle: "@tylerrod",
-    borderColor: "#06B6D4",
-    gradient: "linear-gradient(135deg,#06B6D4,#000)",
-    url: "https://aws.amazon.com/",
-  },
-]
+    image: 'https://i.pravatar.cc/300?img=60',
+    title: 'Tyler Rodriguez',
+    subtitle: 'Cloud Architect',
+    handle: '@tylerrod',
+    borderColor: '#06B6D4',
+    gradient: 'linear-gradient(135deg,#06B6D4,#000)',
+    url: 'https://aws.amazon.com/'
+  }
+];

-const data = computed(() => (props.items.length ? props.items : demo))
+const data = computed(() => (props.items.length ? props.items : demo));

 onMounted(() => {
-  const el = rootRef.value
-  if (!el) return
+  const el = rootRef.value;
+  if (!el) return;

-  setX.value = gsap.quickSetter(el, '--x', 'px')
-  setY.value = gsap.quickSetter(el, '--y', 'px')
-  const { width, height } = el.getBoundingClientRect()
-  pos.value = { x: width / 2, y: height / 2 }
-  setX.value(pos.value.x)
-  setY.value(pos.value.y)
-})
+  setX.value = gsap.quickSetter(el, '--x', 'px') as (value: number | string) => void;
+  setY.value = gsap.quickSetter(el, '--y', 'px') as (value: number | string) => void;
+  const { width, height } = el.getBoundingClientRect();
+  pos.value = { x: width / 2, y: height / 2 };
+  setX.value?.(pos.value.x);
+  setY.value?.(pos.value.y);
+});

 const moveTo = (x: number, y: number) => {
  gsap.to(pos.value, {
@@ -115,38 +115,38 @@ const moveTo = (x: number, y: number) => {
    duration: props.damping,
    ease: props.ease,
    onUpdate: () => {
-      setX.value?.(pos.value.x)
-      setY.value?.(pos.value.y)
+      setX.value?.(pos.value.x);
+      setY.value?.(pos.value.y);
    },
-    overwrite: true,
-  })
-}
+    overwrite: true
+  });
+};

 const handleMove = (e: PointerEvent) => {
-  const r = rootRef.value?.getBoundingClientRect()
-  if (!r) return
-  moveTo(e.clientX - r.left, e.clientY - r.top)
-  gsap.to(fadeRef.value, { opacity: 0, duration: 0.25, overwrite: true })
-}
+  const r = rootRef.value?.getBoundingClientRect();
+  if (!r) return;
+  moveTo(e.clientX - r.left, e.clientY - r.top);
+  gsap.to(fadeRef.value, { opacity: 0, duration: 0.25, overwrite: true });
+};

 const handleLeave = () => {
  gsap.to(fadeRef.value, {
    opacity: 1,
    duration: props.fadeOut,
-    overwrite: true,
-  })
-}
+    overwrite: true
+  });
+};

 const handleCardClick = (url?: string) => {
-  if (url) window.open(url, "_blank", "noopener,noreferrer")
-}
+  if (url) window.open(url, '_blank', 'noopener,noreferrer');
+};

 const handleCardMove = (e: MouseEvent) => {
-  const c = e.currentTarget as HTMLElement
-  const rect = c.getBoundingClientRect()
-  c.style.setProperty('--mouse-x', `${e.clientX - rect.left}px`)
-  c.style.setProperty('--mouse-y', `${e.clientY - rect.top}px`)
-}
+  const c = e.currentTarget as HTMLElement;
+  const rect = c.getBoundingClientRect();
+  c.style.setProperty('--mouse-x', `${e.clientX - rect.left}px`);
+  c.style.setProperty('--mouse-y', `${e.clientY - rect.top}px`);
+};

 const spotlightStyle = {
  backdropFilter: 'grayscale(1) brightness(0.78)',
@@ -155,8 +155,8 @@ const spotlightStyle = {
  maskImage:
    'radial-gradient(circle var(--r) at var(--x) var(--y),transparent 0%,transparent 15%,rgba(0,0,0,0.10) 30%,rgba(0,0,0,0.22)45%,rgba(0,0,0,0.35)60%,rgba(0,0,0,0.50)75%,rgba(0,0,0,0.68)88%,white 100%)',
  WebkitMaskImage:
-    'radial-gradient(circle var(--r) at var(--x) var(--y),transparent 0%,transparent 15%,rgba(0,0,0,0.10) 30%,rgba(0,0,0,0.22)45%,rgba(0,0,0,0.35)60%,rgba(0,0,0,0.50)75%,rgba(0,0,0,0.68)88%,white 100%)',
-}
+    'radial-gradient(circle var(--r) at var(--x) var(--y),transparent 0%,transparent 15%,rgba(0,0,0,0.10) 30%,rgba(0,0,0,0.22)45%,rgba(0,0,0,0.35)60%,rgba(0,0,0,0.50)75%,rgba(0,0,0,0.68)88%,white 100%)'
+};

 const fadeStyle = {
  ...spotlightStyle,
@@ -164,8 +164,8 @@ const fadeStyle = {
    'radial-gradient(circle var(--r) at var(--x) var(--y),white 0%,white 15%,rgba(255,255,255,0.90)30%,rgba(255,255,255,0.78)45%,rgba(255,255,255,0.65)60%,rgba(255,255,255,0.50)75%,rgba(255,255,255,0.32)88%,transparent 100%)',
  WebkitMaskImage:
    'radial-gradient(circle var(--r) at var(--x) var(--y),white 0%,white 15%,rgba(255,255,255,0.90)30%,rgba(255,255,255,0.78)45%,rgba(255,255,255,0.65)60%,rgba(255,255,255,0.50)75%,rgba(255,255,255,0.32)88%,transparent 100%)',
-  opacity: 1,
-}
+  opacity: 1
+};
 </script>

 <template>
@@ -175,7 +175,7 @@ const fadeStyle = {
    :style="{
      '--r': `${props.radius}px`,
      '--x': '50%',
-      '--y': '50%',
+      '--y': '50%'
    }"
    @pointermove="handleMove"
    @pointerleave="handleLeave"
@@ -187,7 +187,7 @@ const fadeStyle = {
      :style="{
        '--card-border': c.borderColor || 'transparent',
        background: c.gradient,
-        '--spotlight-color': 'rgba(255,255,255,0.3)',
+        '--spotlight-color': 'rgba(255,255,255,0.3)'
      }"
      @mousemove="handleCardMove"
      @click="() => handleCardClick(c.url)"
@@ -195,16 +195,12 @@ const fadeStyle = {
      <div
        class="absolute inset-0 pointer-events-none transition-opacity duration-500 z-20 opacity-0 group-hover:opacity-100"
        :style="{
-          background: 'radial-gradient(circle at var(--mouse-x) var(--mouse-y), var(--spotlight-color), transparent 70%)',
+          background:
+            'radial-gradient(circle at var(--mouse-x) var(--mouse-y), var(--spotlight-color), transparent 70%)'
        }"
      />
      <div class="relative z-10 flex-1 p-[10px] box-border">
-        <img
-          :src="c.image"
-          :alt="c.title"
-          loading="lazy"
-          class="w-full h-full object-cover rounded-[10px]"
-        />
+        <img :src="c.image" :alt="c.title" loading="lazy" class="w-full h-full object-cover rounded-[10px]" />
      </div>
      <footer class="relative z-10 p-3 text-white font-sans grid grid-cols-[1fr_auto] gap-x-3 gap-y-1">
        <h3 class="m-0 text-[1.05rem] font-semibold">{{ c.title }}</h3>
@@ -222,4 +218,3 @@ const fadeStyle = {
    />
  </div>
 </template>
-