Cursor Hover Label

import CursorHoverLabel from "./index.jsx";
import { cursorHoverLabel } from "../demo-data.js";
import styles from "./demo.module.css";

export default function CursorHoverLabelDemo() {
  const { projects } = cursorHoverLabel;

  return (
    <CursorHoverLabel label="View">
      <div className={styles.demo}>
        <header className={styles.header}>
          <span className={styles.logo}>Studio</span>
          <nav className={styles.nav}>
            <span>Work</span>
            <span>About</span>
            <span>Contact</span>
          </nav>
        </header>

        <div className={styles.hero}>
          <p className={styles.eyebrow}>Selected Projects</p>
          <h1 className={styles.heading}>Work</h1>
        </div>

        <div className={styles.grid}>
          {projects.map((project) => (
            <a
              key={project.title}
              href="#"
              className={styles.card}
              data-cursor-label={project.title}
            >
              <div className={styles.imageWrap}>
                <img
                  src={project.image}
                  alt=""
                  className={styles.image}
                />
              </div>
              <div className={styles.cardInfo}>
                <span className={styles.cardCategory}>{project.category}</span>
                <h3 className={styles.cardTitle}>{project.title}</h3>
              </div>
            </a>
          ))}
        </div>
      </div>
    </CursorHoverLabel>
  );
}