Project Gallery

1"use client";
2 
3import React, {
4  Dispatch,
5  ReactNode,
6  SetStateAction,
7  useEffect,
8  useRef,
9  useState,
10} from "react";
11 
12import Image from "next/image";
13import Link from "next/link";
14 
15import { motion, useMotionValue, useSpring } from "motion/react";
16 
17interface ProjectGalleryProps {
18  children: ReactNode;
19}
20 
21interface BaseProjectProps {
22  title: string;
23  subtitle: string;
24  href: string;
25  imgSrc: string;
26  color: string;
27}
28 
29interface InternalProjectProps extends BaseProjectProps {
30  index: number;
31  setModal: Dispatch<SetStateAction<{ active: boolean; index: number }>>;
32}
33 
34interface ModalProps {
35  modal: { active: boolean; index: number };
36  projects: BaseProjectProps[];
37  containerRef: React.RefObject<HTMLDivElement | null>;
38}
39 
40const ProjectGallery = ({ children }: ProjectGalleryProps) => {
41  const [modal, setModal] = useState({ active: false, index: 0 });
42  const containerRef = useRef<HTMLDivElement>(null);
43 
44  return (
45    <div
46      ref={containerRef}
47      className="relative grid grid-cols-1 sm:grid-cols-2 md:block"
48    >
49      {children &&
50        React.Children.map(children, (child, index) => {
51          if (React.isValidElement<BaseProjectProps>(child)) {
52            return React.cloneElement(
53              child as React.ReactElement<InternalProjectProps>,
54              {
55                index,
56                setModal,
57              }
58            );
59          }
60          return child;
61        })}
62      <Modal
63        modal={modal}
64        projects={React.Children.toArray(children)
65          .map((child) => {
66            if (React.isValidElement<BaseProjectProps>(child)) {
67              const { title, subtitle, imgSrc, color, href } = child.props;
68              return { title, subtitle, imgSrc, color, href };
69            }
70            return null;
71          })
72          .filter((project): project is BaseProjectProps => project !== null)}
73        containerRef={containerRef}
74      />
75    </div>
76  );
77};
78 
79const Project = (props: BaseProjectProps | InternalProjectProps) => {
80  const { title, subtitle, href, imgSrc, color, index, setModal } =
81    props as InternalProjectProps;
82 
83  return (
84    <Link href={href}>
85      <div
86        className="border-primary group flex w-full cursor-pointer flex-col justify-between p-4 transition-all duration-200 ease-linear md:flex-row md:items-center md:border-t md:p-24 md:hover:opacity-40"
87        onMouseEnter={() => setModal?.({ active: true, index })}
88// … truncated