Function HomeBlockTarget

docs/app/components/HomeBlocks/HomeBlockTarget.tsx:93–163

()

const dataFixtures = [webHtml, nativeHtml, threeHtml, konvaHtml, zdogHtml]

export const HomeBlockTarget = () => {
  const [index, setIndex] = useState(0)

  const transition = useTransition(index, {
    from: {
      opacity: 0,
    },
    enter: {
      opacity: 1,
    },
    leave: {
      opacity: 0,
    },
    config: {
      duration: 800,
      precision: 0.0001,
    },
  })

  useIsomorphicLayoutEffect(() => {
    const interval = setInterval(() => {
      setIndex(s => (dataFixtures.length - 1 === s ? 0 : s + 1))
    }, 4000)

    return () => {
      clearInterval(interval)
    }
  }, [index])

  return (
    <section className={section}>
      <HomeBlockCopy
        subtitle="But wait, there’s more"
        title="It’s not just for web"
        cta={{
          label: 'Learn more about targets',
          href: '/docs/concepts/targets',
        }}
      >
        <p>Choose from our five targets:</p>
        <ul className={list}>
          <li>web</li>
          <li>native</li>
          <li>three</li>
          <li>konva</li>
          <li>zdog</li>
        </ul>
        <p>
          Missing a target you want? Request we add it or create it yourself
          with our advanced API usage.
        </p>
      </HomeBlockCopy>
      <pre className={clsx(pre, homeBlockCode)}>
        <code
          className="language-jsx"
          dangerouslySetInnerHTML={{ __html: dataFixtures[0] }}
          style={{
            visibility: 'hidden',