feat(Stack): Support for opening links

mini-mirana · Sep 13, 2022 · 26dc0cb · 26dc0cb
1 parent b944b56
commit 26dc0cb
Showing 1 changed file with 5 additions and 2 deletions.
diff --git a/src/components/Stack/index.jsx b/src/components/Stack/index.jsx
@@ -97,6 +97,7 @@ export function Stack({
                   outlineOpacity={springs[i].opacity}
                   onPointerOver={() => addGlow(i)}
                   onPointerLeave={() => api.start(() => ({ opacity: 0 }))}
+                  onClick={() => c.link && window.open(c.link, '_blank', 'noopener,noreferrer')}
                   position-y={-0.2}>
                   {c.title}
                   <meshStandardMaterial color='white' />
@@ -144,6 +145,7 @@ export function Stack({
                     outlineOpacity={springs[i].opacity}
                     onPointerOver={() => addGlow(i)}
                     onPointerLeave={() => api.start(() => ({ opacity: 0 }))}
+                    onClick={() => c.link && window.open(c.link, '_blank', 'noopener,noreferrer')}
                     position-y={-0.1}>
                     {c.title}
                     <meshStandardMaterial color='white' />
@@ -230,6 +232,7 @@ export function Stack({
                   outlineOpacity={springs[i].opacity}
                   onPointerOver={() => addGlow(i)}
                   onPointerLeave={() => api.start(() => ({ opacity: 0 }))}
+                  onClick={() => c.link && window.open(c.link, '_blank', 'noopener,noreferrer')}
                   position-y={-0.2}>
                   {c.title}
                   <meshStandardMaterial color='white' />
@@ -343,15 +346,15 @@ export function Stack({
                     }
                   }}
                   onPointerOver={() => {
-                    if (!('ontouchstart' in window)) {
+                    if (!window.matchMedia('(pointer: coarse)').matches) {
                       addGlow(i)
                       const newHovered = Array(content.length).fill(false)
                       newHovered[i] = true
                       setHovered(newHovered)
                     }
                   }}
                   onPointerLeave={() => {
-                    if (!('ontouchstart' in window)) {
+                    if (!window.matchMedia('(pointer: coarse)').matches) {
                       api.start(() => ({ opacity: 0 }))
                     }
                   }}