Revision Cycles Illustration

1'use client'
2 
3import { useState } from 'react'
4import { motion } from 'motion/react'
5 
6import { cn } from '@/lib/utils'
7 
8const revisionDots = Array.from({ length: 48 }, (_, index) => index)
9 
10export function RevisionCyclesIllustration() {
11  const [cycleHighlight, setCycleHighlight] = useState<'removed' | 'remaining' | null>(null)
12 
13  return (
14    <article className="group relative flex min-h-136 flex-col overflow-hidden rounded-lg border-b lg:col-start-2 lg:row-span-2 lg:row-start-1 lg:border-b-0">
15      <div className="relative flex items-center justify-between border-b bg-background/70 px-6 py-4">
16        <div>
17          <p className="text-xs font-medium">Revision rounds</p>
18 
19          <p className="mt-1 text-[11px] text-muted-foreground">
20            Before and after connected publishing
21          </p>
22        </div>
23 
24        <span className="font-mono text-[10px] tracking-[0.12em] text-muted-foreground uppercase">
25          20 eliminated
26        </span>
27      </div>
28 
29      <div className="relative flex flex-1 items-center justify-center px-6 py-12 sm:px-10">
30        <div className="w-full max-w-md">
31          <div aria-hidden="true" className="grid grid-cols-8 gap-2.5 sm:gap-3">
32            {revisionDots.map((dot) => {
33              const removed = dot < 20
34              const boundaryDot = dot === 19
35              const circleType = removed ? 'removed' : 'remaining'
36 
37              const isHighlighted = cycleHighlight === circleType
38              const isMuted = cycleHighlight !== null && cycleHighlight !== circleType
39 
40              return (
41                <motion.span
42                  key={dot}
43                  animate={
44                    isHighlighted
45                      ? {
46                          opacity: [1, 0.35, 1, 0.55, 1],
47                          scale: [1, 1.04, 0.98, 1.02, 1],
48                          filter: [
49                            'brightness(1)',
50                            'brightness(1.8)',
51                            'brightness(0.7)',
52                            'brightness(1.4)',
53                            'brightness(1)',
54                          ],
55                        }
56                      : {
57                          opacity: isMuted ? 0.7 : 1,
58                          scale: 1,
59                          filter: 'brightness(1)',
60                        }
61                  }
62                  transition={
63                    isHighlighted
64                      ? {
65                          duration: 0.48,
66// … truncated