Ref based .active item selector, hoverable device query & usehooks-ts package

src/components/ItemCard.tsx

@@ -1,6 +1,8 @@
 import Image from "next/image";
 import {ArrowLongRightIcon} from "@heroicons/react/24/outline";
-import React from "react";
+import React, {useRef} from "react";
+import {useOnClickOutside, useToggle} from "usehooks-ts";
+import {classNames, isHoverable} from "../utils/helpers";
 
 type ItemCardProps = {
     banner: string;
@@ -9,7 +11,15 @@ type ItemCardProps = {
 }
 
 const ItemCard = ({banner, title, description}: ItemCardProps) => {
-    return <div className="item">
+    const itemRef = useRef<HTMLDivElement>(null);
+    const [active, toggleActive, setActive] = useToggle()
+
+    useOnClickOutside(itemRef, () => {
+        setActive(false);
+    })
+
+    return <div onClick={() => {if (!isHoverable()) toggleActive();}}
+                ref={itemRef} className={classNames("item", active ? "active" : null)}>
         <Image fill src={banner}
                alt={`Banner for ${title}`}
                style={{objectFit: "cover"}}

src/styles/globals.scss

@@ -21,7 +21,7 @@ html, body {
     @apply hidden transition-all delay-100;
   }
 
-  &:hover, &:focus, &:focus-within {
+  &:hover, &.active {
     .elements {
       @apply grid;
     }
@@ -39,7 +39,7 @@ html, body {
   > span {
     @apply transition-colors delay-300;
 
-    &:hover, &:focus-within, &:focus {
+    &:hover, &.active {
       @apply text-black bg-white;
       transition-delay: 0s;
     }

src/utils/helpers.ts

@@ -0,0 +1,9 @@
+export function classNames(...classes: (string | null | undefined)[]) {
+    return classes.filter(Boolean).join(" ");
+}
+
+const hoverableQuery = window.matchMedia('(hover: hover) and (pointer: fine)');
+
+export function isHoverable() {
+    return hoverableQuery.matches;
+}