added project gallery behavior
This commit is contained in:
Hunter W.
@@ -1,103 +1,161 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
import type { Project } from "@/data/content";
|
||||
import SimpleGallery from "./SimpleGallery";
|
||||
|
||||
type Props = {
|
||||
project: Project;
|
||||
visible: boolean;
|
||||
selected: boolean;
|
||||
setSelected: (selected: any) => void;
|
||||
setExpandedHeight: (activeId: number) => void;
|
||||
};
|
||||
|
||||
export default function ProjectCard({ project, visible }: Props) {
|
||||
export default function ProjectCard({ project, visible, selected = false, setSelected, setExpandedHeight}: Props) {
|
||||
const [hovered, setHovered] = useState(false);
|
||||
|
||||
return (
|
||||
<a
|
||||
href={project.link}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
onMouseEnter={() => setHovered(true)}
|
||||
onMouseLeave={() => setHovered(false)}
|
||||
style={{
|
||||
display: "block",
|
||||
textDecoration: "none",
|
||||
padding: 28,
|
||||
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",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "flex-start",
|
||||
marginBottom: 12,
|
||||
}}
|
||||
>
|
||||
const [expandedImage, setExpandedImage] = 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)}
|
||||
style={{
|
||||
height: "100%",
|
||||
minWidth: "10em",
|
||||
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={{
|
||||
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}
|
||||
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>
|
||||
<p
|
||||
);
|
||||
}
|
||||
|
||||
function selectedComponent(){
|
||||
return (
|
||||
<div
|
||||
onMouseEnter={() => setHovered(true)}
|
||||
onMouseLeave={() => setHovered(false)}
|
||||
onClick={() => setSelected(project.id)}
|
||||
style={{
|
||||
fontFamily: "var(--sans)",
|
||||
fontSize: 14,
|
||||
lineHeight: 1.6,
|
||||
color: "var(--fg-secondary)",
|
||||
margin: "0 0 16px 0",
|
||||
}}
|
||||
>
|
||||
{project.description}
|
||||
</p>
|
||||
<div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
|
||||
{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>
|
||||
))}
|
||||
height: "100%",
|
||||
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>
|
||||
|
||||
{project.images && project.images.length > 0 && (
|
||||
<SimpleGallery images={project.images} title={project.title} expansionHandler={(height: number) => {
|
||||
setExpandedHeight(height);
|
||||
setExpandedImage(height > 0);
|
||||
|
||||
}} />
|
||||
)}
|
||||
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
);
|
||||
}
|
||||
|
||||
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) {
|
||||
setExpandedHeight(0);
|
||||
setExpandedImage(false);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if (selected) {
|
||||
return selectedComponent();
|
||||
} else {
|
||||
|
||||
return notSelectedComponent();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user