hwilliams-dev/components/ProjectCard.tsx

"use client";

import { useState } from "react";
import type { Project } from "@/data/content";
import SimpleGallery from "./SimpleGallery";
import Link from "next/link";
import "../styles/project-card.css";

type Props = {
  project: Project;
  visible: boolean;
  selected: boolean;
  setSelected: (selected: any) => void;
};

export default function ProjectCard({ project, visible, selected = false, setSelected }: Props) {
  const [hovered, setHovered] = useState(false);

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

  function selectedComponent(){
      return (
      <div
        onMouseEnter={() => setHovered(true)}
        onMouseLeave={() => setHovered(false)}
        className="project-card project-card-selected"
        key={project.id}
        style={{
          minWidth: "10em",
          maxWidth: "90vw",
    
          textDecoration: "none",
          padding: 28,
          marginTop: 3,
          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 className="project-card-title-year-box">
          <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 && (
        <SimpleGallery images={project.images} videos={project.videos} title={project.title} />
      )}

      {project.link && (
      <div style={{display: "flex", gap: 12, flexWrap: "wrap", marginTop: 16}}>
        <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",
          alignContent: "center",
          alignItems: "center",
          textAlign: "center",
          width: "10em",
          borderRadius: "var(--radius-md)",
        }} href={"/project/"+project.slug} >See More</Link>

          <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",
          alignContent: "center",
          alignItems: "center",
          textAlign: "center",
          width: "10em",
          borderRadius: "var(--radius-md)",
        }} target="_blank" href={project.link} >Link</Link>
        </div>
      )}
      </div>
    );
      }

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

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