Checklist Cell

1'use client';
2 
3import * as React from 'react';
4import { motion, AnimatePresence } from 'motion/react';
5import { ChevronRight } from 'lucide-react';
6import { cn } from '@/lib/utils';
7 
8const DEFAULT_TASKS = [
9  'How it all started',
10  'Our values and approach',
11  'Working together',
12  'Union rules and integration',
13  'Team structure',
14  'Communication norms',
15  'Feedback culture',
16  'Onboarding wrap-up',
17];
18 
19export interface ChecklistCellProps extends React.HTMLAttributes<HTMLDivElement> {
20  tasks?: string[];
21  initialCompleted?: number;
22  finalCompleted?: number;
23  stepInterval?: number;
24  hoverToPlay?: boolean;
25}
26 
27function FilledCheck() {
28  return (
29    <svg
30      width='18'
31      height='18'
32      viewBox='0 0 18 18'
33      fill='none'
34      xmlns='http://www.w3.org/2000/svg'
35      className='shrink-0'
36    >
37      <circle cx='9' cy='9' r='9' fill='#22c55e' />
38      <path
39        d='M5.5 9.5l2.5 2.5 4.5-5'
40        stroke='white'
41        strokeWidth='1.5'
42        strokeLinecap='round'
43        strokeLinejoin='round'
44      />
45    </svg>
46  );
47}
48 
49function EmptyCircle({ muted }: { muted?: boolean }) {
50  return (
51    <svg
52      width='18'
53      height='18'
54      viewBox='0 0 18 18'
55      fill='none'
56      xmlns='http://www.w3.org/2000/svg'
57      className='shrink-0'
58    >
59      <circle
60        cx='9'
61        cy='9'
62        r='8'
63        stroke={muted ? '#e4e4e7' : '#d4d4d8'}
64        strokeWidth='1.5'
65      />
66    </svg>
67  );
68}
69 
70const FADE_DURATION = 350;
71 
72const ChecklistCell = React.forwardRef<HTMLDivElement, ChecklistCellProps>(
73  (
74    {
75      className,
76      tasks = DEFAULT_TASKS,
77      initialCompleted = 3,
78      finalCompleted,
79      stepInterval = 1700,
80      hoverToPlay = false,
81      ...props
82    },
83    ref,
84  ) => {
85    const total = tasks.length;
86    const maxDone = finalCompleted !== undefined
87      ? Math.min(finalCompleted, total - 1)
88      : total - 1;
89 
90    const [active, setActive] = React.useState(!hoverToPlay);
91    const [phase, setPhase] = React.useState<'playing' | 'fading'>('playing');
92    const [done, setDone] = React.useState(initialCompleted);
93    const [winStart, setWinStart] = React.useState(1);
94    const [sliding, setSliding] = React.useState(false);
95    const [checkingSlot, setCheckingSlot] = React.useState(false);
96 
97    const pct = (done / total) * 100;
98    const hasNext = winStart + 3 < total;
99 
100    const resetState = React.useCallback(() => {
101      setDone(initialCompleted);
102      setWinStart(1);
103      setSliding(false);
104// … truncated