hwilliams-dev/components/ProjectCard.tsx

"use client";

import { useEffect, useRef, useState } from "react";
import type { Project } from "@/data/content";
import SimpleGallery from "./SimpleGallery";
import Link from "next/link";
import { relative } from "path";


type Props = {
  project: Project;
  visible: boolean;
  selected: boolean;
  setSelected: (selected: any) => void;
  updateHeight: (projectId: number, heightPx: number) => void;
};

export default function ProjectCard({ project, visible, selected = false, setSelected, updateHeight}: Props) {
  const [hovered, setHovered] = useState(false);
  const [expandedImage, setExpandedImage] = useState(false);
  const contentRef = useRef(null);
  
  function projectTagsComponent(project: Project){
    return (<div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 12 }}>
          {project.tags.map((tag) => (
            <span key={tag}
              style={{                
                fontFamily: "var(--mono)",
                fontSize: 11,
                fontWeight: 500,
                color: "var(--accent)",
                padding: "3px 10px",
                background: "var(--accent-bg)",
                borderRadius: 4,
                letterSpacing: "0.02em",
              }}>
              {tag}
            </span>
          ))}
        </div>);
  }
  
  function notSelectedComponent(){
    return (
      <div 
        ref={contentRef}
        onMouseEnter={() => setHovered(true)}
        onMouseLeave={() => setHovered(false)}
        onClick={() => setSelected(project.id)}
        className="project-card"
        style={{             
          width: "100%",
          textDecoration: "none",
          padding: 28,
          overflow: "hidden",
          background: hovered ? "var(--surface-hover)" : "var(--surface)",
          border: `1px solid ${hovered ? "var(--accent)" : "var(--border)"}`,
          borderRadius: 8,
          transition: "all 0.35s cubic-bezier(0.16, 1, 0.3, 1)",
          transform: visible
            ? hovered
              ? "translateY(-3px)"
              : "translateY(0)"
            : "translateY(12px)",
          opacity: visible ? 1 : 0,
          boxShadow: hovered ? "0 8px 32px rgba(0,0,0,0.12)" : "none",
          pointerEvents: "auto",
          cursor: "pointer"
        }}>
        <div
          style={{display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 12,
          }}>
          <div
            style={{fontFamily: "var(--mono)", fontSize: 18, fontWeight: 700, color: hovered ? "var(--accent)" : "var(--fg)", transition: "color 0.2s"}}>
            {project.title}
          </div>          
          <div style={{fontFamily: "var(--mono)", fontSize: 11, color: "var(--muted)", padding: "2px 8px", background: "var(--bg)", borderRadius: 4, border: "1px solid var(--border)"}}>
            {project.year}
          </div>        
        </div>
        {projectTagsComponent(project)}
        <p style={{fontFamily: "var(--sans)", fontSize: 14, lineHeight: 1.6, color: "var(--fg-secondary)", margin: "0 0 16px 0"}}>
          {project.description}
        </p>
        {project.images && project.images.length > 0 && imgComponent()}
        
      </div>
    );
  }

 useEffect(() => {
  if (!contentRef.current) return;

  const observer = new ResizeObserver((entries) => {
    const height = entries[0]?.borderBoxSize?.[0]?.blockSize
      ?? entries[0]?.contentRect.height;
    if (height > 0) {
      updateHeight(project.id, height);
    }
  });

  observer.observe(contentRef.current);
  return () => observer.disconnect();
}, [updateHeight, project.id]);

  
  function selectedComponent(){
      return (
      <div 
        ref={contentRef}
        onMouseEnter={() => setHovered(true)}
        onMouseLeave={() => setHovered(false)}
        className="project-card"
        style={{
          minWidth: "10em",
          overflow: "hidden",
          textDecoration: "none",
          padding: 28,
          background: hovered ? "var(--surface-hover)" : "var(--surface)",
          border: `2px solid var(--accent)`,
          borderRadius: 8,
          transition: "all 0.35s cubic-bezier(0.16, 1, 0.3, 1)",
          transform: visible
              ? "translateY(-3px)"
              : "translateY(0)",
          opacity: visible ? 1 : 0,
          boxShadow: hovered ? "0 8px 32px rgba(0,0,0,0.12)" : "none",
          pointerEvents: "auto",
          cursor: "pointer"
        }}>
        <div
          style={{display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 12
          }}>
          <div
            style={{fontFamily: "var(--mono)", fontSize: 18, fontWeight: 700, color: hovered ? "var(--accent)" : "var(--fg)", transition: "color 0.2s"}}>
            {project.title}
          </div>
          <div style={{fontFamily: "var(--mono)", fontSize: 11, color: "var(--muted)", padding: "2px 8px", background: "var(--bg)", borderRadius: 4, border: "1px solid var(--border)"}}>
            {project.year}
          </div>
        </div>
         {projectTagsComponent(project)}
        <p style={{fontFamily: "var(--sans)", fontSize: 14, lineHeight: 1.6, color: "var(--fg-secondary)", margin: "0 0 16px 0"}}>
          {project.description}
        </p>
     
       {contentRef.current && project.images && project.images.length > 0 && (
        <SimpleGallery images={project.images} videos={project.videos} title={project.title} />        
      )}
        <Link
        className="expand-on-hover-button"
        style={{
          fontFamily: "var(--mono)",
          fontSize: 15,
          color: "var(--fg)",
          border: `1px solid ${hovered ? "var(--accent)" : "var(--border)"}`,
          backgroundColor: "var(--bg)",
          height: "3em",
          display: "block",
          alignContent: "center",
          alignItems: "center",
          textAlign: "center",
          width: "10em",
          borderRadius: "var(--radius-md)",
          position: "absolute",
          right: "1em",
          bottom: "1em"
        }} href={"/project/"+project.slug} >See More</Link>
      </div>
    );
      }

  function imgComponent(){
    return (
      <img src={project.images?.[0]} alt={`${project.title} screenshot`} style={{width: "100%", borderRadius: 4, marginBottom: 16, objectFit: "cover", maxHeight: 180}} />
    );
  }

  useEffect(() => {
    if (!selected) {
     if (expandedImage && contentRef.current) {      
      setExpandedImage(false);
    }
    }
  });

  if (selected) {
    return selectedComponent();
  } else {
   
    return notSelectedComponent();
  }
  
}