"use client" import { useEffect, useLayoutEffect, useRef, useState } from "react" import { AnimatePresence, motion, useReducedMotion, } from "motion/react" import { BookOpen, Camera, Droplets, Flame, SwatchBook, type LucideIcon, } from "lucide-react" import { LiquidGradientCanvas } from "./liquid-index-canvas" const SPRING = { type: "spring" as const, bounce: 0, duration: 0.36 } const COLOR_EASE = [0.25, 0.1, 0.25, 1] as const const IMG = "auto=format&fit=crop&w=800&q=80" type Item = { title: string description: string image: string icon: LucideIcon seed: number colors: [number, number, number][] } const ITEMS: Item[] = [ { title: "مرمرسازی", description: "رنگ خیس که در بافت می‌نشیند، نه فقط روی سطح.", image: `/unsplash/1541701494587-cb58502866ab.webp`, icon: Droplets, seed: 648, colors: [ [0, 0, 26], [41, 98, 255], [64, 188, 255], ], }, { title: "اتاق تاریک", description: "سینی، نور ایمن، و چاپی که فقط در دقیقهٔ آخر ظاهر می‌شود.", image: `/unsplash/1492691527719-9d1e07e534b4.webp`, icon: Camera, seed: 732, colors: [ [22, 11, 0], [255, 138, 0], [255, 193, 79], ], }, { title: "کوره", description: "گلی که تا برگشتن از آتش هنوز ناتمام است.", image: `/unsplash/1509316785289-025f5b846b35.webp`, icon: Flame, seed: 516, colors: [ [18, 10, 36], [124, 58, 237], [255, 139, 209], ], }, { title: "صحافی", description: "دفترهایی که طوری دوخته شده‌اند تا روی میز صاف باز شوند.", image: `/unsplash/1509316975850-ff9c5deb0cd9.webp`, icon: BookOpen, seed: 884, colors: [ [6, 19, 13], [0, 200, 83], [182, 255, 106], ], }, { title: "نمونه‌گیری", description: "یک بررسی آخر روی برگه قبل از شروع چاپ.", image: `/unsplash/1511285560929-80b456fea0bc.webp`, icon: SwatchBook, seed: 291, colors: [ [11, 16, 32], [51, 65, 85], [148, 163, 184], ], }, ] function useIsPhone() { const [isPhone, setIsPhone] = useState(false) useEffect(() => { const media = window.matchMedia("(max-width: 809px)") const update = () => setIsPhone(media.matches) update() media.addEventListener("change", update) return () => media.removeEventListener("change", update) }, []) return isPhone } export default function LiquidIndex() { const isPhone = useIsPhone() const reduceMotion = useReducedMotion() const [active, setActive] = useState(null) const [offsetY, setOffsetY] = useState(0) const itemRefs = useRef<(HTMLButtonElement | null)[]>([]) const current = active == null ? ITEMS[0] : ITEMS[active] const Icon = current.icon const transition = reduceMotion ? { duration: 0 } : SPRING useLayoutEffect(() => { if (isPhone || active == null) { setOffsetY(0) return } const first = itemRefs.current[0] const item = itemRefs.current[active] if (!first || !item) return setOffsetY(item.offsetTop - first.offsetTop) }, [active, isPhone]) return (

{ if (!isPhone) setActive(null) }} >

{ITEMS.map((item, index) => { const isActive = active === index const inactive = active != null && !isActive return ( { itemRefs.current[index] = node }} type="button" onMouseEnter={() => { if (!isPhone) setActive(index) }} onClick={() => { if (isPhone) setActive(isActive ? null : index) }} className={ isPhone ? "flex w-full cursor-pointer flex-col items-start gap-[5px] py-[5px] text-start" : "flex w-auto cursor-pointer flex-col items-start gap-0 py-[7px] text-start" } animate={{ paddingInlineStart: isActive ? 8 : 0 }} transition={transition} > {item.title} {isPhone && isActive ? ( {item.description} ) : null} ) })}

{active != null ? ( {current.description} ) : null}

) }