btrc-hub/frontend/src/components/PostList.tsx

import { motion } from 'framer-motion'
import { useRef } from 'react'
import { useLocation } from 'react-router-dom'

import PrefetchLink from '@/components/PrefetchLink'
import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
import { cn } from '@/lib/utils'
import { useSharedTransitionStore } from '@/stores/sharedTransitionStore'

import type { FC, MouseEvent } from 'react'

import type { Post } from '@/types'

type Props = { posts:     Post[]
	       onClick?:  (event: MouseEvent<HTMLElement>) => void }


const PostList: FC<Props> = ({ posts, onClick }) => {
  const location = useLocation ()
  const behaviourSettings = useClientBehaviourSettings ()
  const thumbnailMode = behaviourSettings.thumbnailMode ?? 'normal'
  const animationMode = behaviourSettings.animation ?? 'normal'
  const cardLayoutTransition =
      animationMode === 'off'
      ? { duration: 0 }
      : animationMode === 'reduced'
	? { duration: .08, ease: 'linear' as const }
	: { duration: .2, ease: 'easeOut' as const }

  const setForLocationKey = useSharedTransitionStore (s => s.setForLocationKey)

  const cardRef = useRef<HTMLDivElement> (null)

  return (
      <div className="flex flex-wrap gap-6 p-4">
	{posts.map ((post, i) => {
	  const sharedId = `page-${ post.id }`
	  const layoutId = sharedId

	  return (
	      <PrefetchLink
		  to={`/posts/${ post.id }`}
		  key={post.id}
		  className="w-40 h-40"
		  state={{ sharedId }}
		  onClick={e => {
		    setForLocationKey (location.key, sharedId)
		    onClick?.(e)
		  }}>
		<motion.div
		    ref={cardRef}
		    layout={animationMode === 'off' ? false : true}
		    layoutId={animationMode === 'off' ? undefined : layoutId}
		    className={cn ('w-full h-full overflow-hidden rounded-xl shadow',
				   'transform-gpu will-change-transform',
				   (post.childPosts ?? []).length > 0 && 'ring-4 ring-green-500',
				   (post.parentPosts ?? []).length > 0 && 'ring-4 ring-yellow-500')}
		    whileHover={{ scale: 1.02 }}
		    onLayoutAnimationStart={() => {
		      if (!(cardRef.current))
			return

		      cardRef.current.style.position = 'relative'
		      cardRef.current.style.zIndex = '9999'
		    }}
		    onLayoutAnimationComplete={() => {
		      if (!(cardRef.current))
			return

		      cardRef.current.style.zIndex = ''
		      cardRef.current.style.position = ''
		    }}
		    transition={{ layout: cardLayoutTransition }}>
		  {thumbnailMode === 'off'
		   ? (
		      <div className="flex h-full w-full items-center justify-center
				      bg-muted text-center text-xs text-muted-foreground">
			サムネイルなし
		      </div>)
		   : (
		      <img
			  src={post.thumbnail || post.thumbnailBase || undefined}
			  alt={post.title || post.url}
			  title={post.title || post.url || undefined}
			  loading={
			      thumbnailMode === 'light'
			      ? 'lazy'
			      : i < 12
				? 'eager'
				: 'lazy'
			  }
			  decoding="async"
			  className="object-cover w-full h-full"/>)}
		</motion.div>
	      </PrefetchLink>)
	})}
      </div>)
}

export default PostList