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

package.json

@@ -20,6 +20,7 @@
     "react-dom": "18.2.0",
     "sass": "^1.56.2",
     "superjson": "1.9.1",
+    "usehooks-ts": "^2.9.1",
     "zod": "^3.18.0"
   },
   "devDependencies": {

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

yarn.lock

@@ -2171,6 +2171,11 @@ use-sync-external-store@1.2.0, use-sync-external-store@^1.2.0:
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
   integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
 
+usehooks-ts@^2.9.1:
+  version "2.9.1"
+  resolved "https://registry.yarnpkg.com/usehooks-ts/-/usehooks-ts-2.9.1.tgz#953d3284851ffd097432379e271ce046a8180b37"
+  integrity sha512-2FAuSIGHlY+apM9FVlj8/oNhd+1y+Uwv5QNkMQz1oSfdHk4PXo1qoCw9I5M7j0vpH8CSWFJwXbVPeYDjLCx9PA==
+
 util-deprecate@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"