115 lines
3.8 KiB
TypeScript
115 lines
3.8 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { MoreSection, PROFILE } from "@/data/content";
|
|
import { useStaggerReveal, useWiggle } from "@/hooks/useAnimations";
|
|
import "@/styles/more-section.css"
|
|
|
|
export default function ProfileMore() {
|
|
const [delayTimer, setDelayTimer] = useState<number | null>(null);
|
|
const [hovered, setHovered] = useState<boolean | null>(null);
|
|
const [morePosition, setMorePosition] = useState<number>(PROFILE.moreSectionsStart ?? 0);
|
|
|
|
|
|
|
|
const { wiggling, progress, handlers } = useWiggle(500, () => {});
|
|
|
|
function handleSectionExpand(){
|
|
setMorePosition(morePosition + 1);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className="more-section-container"
|
|
style={{
|
|
minHeight: "100px",
|
|
width: "100%",
|
|
overflow: "hidden"
|
|
}}
|
|
>
|
|
{PROFILE.moreSections.map((item: MoreSection, i)=>{
|
|
return (
|
|
<div
|
|
key={i}
|
|
style={{
|
|
// display: i < morePosition ? "block" : "none",
|
|
opacity: i < morePosition ? 1.0 : 0.0,
|
|
transition: "all 0.3s ease",
|
|
overflow: "hidden",
|
|
minHeight: i < morePosition ? "5em" : "0em",
|
|
height: i < morePosition ? "auto" : "0",
|
|
}}>
|
|
{item.title && (<h3
|
|
style={{
|
|
marginBottom: 8,
|
|
fontFamily: "var(--mono)",
|
|
fontSize: 11,
|
|
color: "var(--muted)",
|
|
letterSpacing: "0.08em",
|
|
textTransform: "uppercase",
|
|
}}>
|
|
{item.title}
|
|
</h3>)}
|
|
<p style={{
|
|
fontFamily: "var(--sans)",
|
|
fontSize: 16,
|
|
lineHeight: 1.7,
|
|
color: "var(--fg-secondary)",
|
|
margin: "0 0 40px 0",
|
|
maxWidth: 560,
|
|
}}>{item.text}</p>
|
|
</div>
|
|
);
|
|
})}
|
|
|
|
<div {...handlers} className={`drop-handle ${wiggling ? "wiggle" : ""}`}
|
|
onMouseEnter={() => {
|
|
if (delayTimer) return;
|
|
setHovered(true);
|
|
|
|
let timer = window.setTimeout(() => {
|
|
handleSectionExpand();
|
|
}, 500);
|
|
setDelayTimer(timer);
|
|
|
|
}}
|
|
onMouseLeave={() => {
|
|
if (delayTimer){
|
|
clearTimeout(delayTimer);
|
|
setDelayTimer(null);
|
|
}
|
|
setHovered(false);
|
|
}}
|
|
style={{
|
|
opacity: morePosition < PROFILE.moreSections.length ? 1.0 : 0.0,
|
|
backgroundColor: hovered ? "var(--surface)" : "var(--bg-raised",
|
|
width: "100%",
|
|
height: "2em",
|
|
display: "flex",
|
|
gap: 12,
|
|
margin: "0 0 40px 0",
|
|
border: `1px solid ${hovered ? "var(--accent)" : "var(--border)"}`,
|
|
bottom: hovered ? "-10px" : "0px",
|
|
position: "relative",
|
|
}}>
|
|
|
|
<svg height={"30px"} width={"30px"} fill="var(--fg-secondary)" version="1.1" id="Capa_1" style={{scale:"0.5"}} >
|
|
<g>
|
|
<path d="M29.994,10.183L15.363,24.812L0.733,10.184c-0.977-0.978-0.977-2.561,0-3.536c0.977-0.977,2.559-0.976,3.536,0
|
|
l11.095,11.093L26.461,6.647c0.977-0.976,2.559-0.976,3.535,0C30.971,7.624,30.971,9.206,29.994,10.183z"/>
|
|
</g>
|
|
</svg>
|
|
<span style={{
|
|
fontFamily: "var(--sans)",
|
|
fontSize: 12,
|
|
lineHeight: 0.5,
|
|
color: "var(--fg-secondary)",
|
|
alignSelf: "center",
|
|
textTransform: "uppercase"
|
|
}}>more?</span>
|
|
</div>
|
|
|
|
</div>
|
|
);
|
|
}
|