Workflow Desk Illustration

1'use client'
2 
3import { useRef } from 'react'
4import { useInView, useReducedMotion } from 'motion/react'
5 
6import { cn } from '@/lib/utils'
7import {
8  ApprovalPanelContent,
9  MatchingPanelContent,
10  PaymentCard,
11  ReceiptPanelContent,
12  ReportPanelContent,
13  WorkflowPanel,
14} from './_expense-workflow-parts'
15 
16type WorkflowDeskIllustrationProps = {
17  className?: string
18  'aria-label'?: string
19}
20 
21export function WorkflowDeskIllustration({
22  className,
23  'aria-label': ariaLabel = 'Automated expense processing workflow',
24}: WorkflowDeskIllustrationProps) {
25  const illustrationRef = useRef<HTMLDivElement>(null)
26  const shouldReduceMotion = Boolean(useReducedMotion())
27 
28  const isInView = useInView(illustrationRef, {
29    once: true,
30    amount: 0.2,
31    margin: '0px 0px -10% 0px',
32  })
33 
34  const isActive = isInView || shouldReduceMotion
35 
36  return (
37    <div
38      ref={illustrationRef}
39      role="img"
40      aria-label={ariaLabel}
41      data-slot="workflow-desk-illustration"
42      className={cn(
43        'relative isolate mx-auto h-130 w-full max-w-160',
44        'shrink-0 overflow-hidden sm:h-140 lg:h-150',
45        className,
46      )}
47      style={{
48        maskImage:
49          'linear-gradient(to right, transparent 0%, black 1%, black 99%, transparent 100%), linear-gradient(to bottom, transparent 0%, black 1%, black 99%, transparent 100%)',
50        WebkitMaskImage:
51          'linear-gradient(to right, transparent 0%, black 1%, black 99%, transparent 100%), linear-gradient(to bottom, transparent 0%, black 1%, black 99%, transparent 100%)',
52        maskComposite: 'intersect',
53        WebkitMaskComposite: 'source-in',
54      }}
55    >
56      <div
57        aria-hidden="true"
58        className="pointer-events-none absolute inset-0 opacity-55 dark:opacity-25"
59        style={{
60          backgroundImage: 'radial-gradient(circle, rgba(15,23,42,0.16) 1px, transparent 1px)',
61          backgroundSize: '18px 18px',
62        }}
63      />
64 
65      <PaymentCard isActive={isActive} shouldReduceMotion={shouldReduceMotion} />
66 
67      <WorkflowPanel
68        stage="receipt"
69        title="Receipt captured"
70        order={0}
71        isActive={isActive}
72        shouldReduceMotion={shouldReduceMotion}
73        className="top-5 left-0 z-40 w-[46%] max-w-58 sm:top-[6%] sm:left-[4%]"
74      >
75        <ReceiptPanelContent />
76      </WorkflowPanel>
77 
78      <WorkflowPanel
79        stage="policy"
80        title="Matching..."
81        order={1}
82        isActive={isActive}
83// … truncated