# All files / components Dock.tsx

98.33% Statements 59/60
69.23% Branches 9/13
66.66% Functions 2/3
98.33% Lines 59/60

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    851x

    1x
    1x
    1x
    1x

    1x
    4x

    4x
    1x

    1x
    1x
    4x

    4x
    4x
    4x
    4x
    4x
    4x
    4x
    4x

    4x
    4x
    4x
    4x
    4x
    4x

    4x
    4x
    4x
    4x

    4x

    4x
    4x
    4x
    4x
    4x
    4x
    4x

    4x
    4x
    44x
    44x

    44x
    44x
    44x
    44x
    44x
    44x
    44x
    44x
    44x
    44x
    44x

    44x
    44x

    44x

    4x
    4x

    4x
     "use client"

    import { motion } from "framer-motion"
    import { useState, useEffect } from "react"
    import styles from "./Dock.module.css"
    import { desktopApps } from "@/data/apps" // Updated import path

    interface DockProps {
      openWindows: any[]
      openWindow: (app: any) => void
      focusWindow: (id: string) => void
      minimizedWindows: string[]
    }

    export default function Dock({ openWindows, openWindow, focusWindow, minimizedWindows }: DockProps) {
      const [time, setTime] = useState(new Date())

      useEffect(() => {
        const timer = setInterval(() => {
          setTime(new Date())
        }, 1000)
        return () => clearInterval(timer)
      }, [])

      const formatTime = (date: Date) => {
        const hours = date.getHours()
        const minutes = date.getMinutes()
        const ampm = hours >= 12 ? "PM" : "AM"
        const formattedHours = hours % 12 === 0 ? 12 : hours % 12
        const formattedMinutes = minutes < 10 ? "0" + minutes : minutes
        return `${formattedHours}:${formattedMinutes} ${ampm}`
      }

      const dockItemVariants = {
        hidden: { opacity: 0, y: 20 },
        visible: { opacity: 1, y: 0 },
        hover: { scale: 1.1, y: -10, transition: { type: "spring", stiffness: 300 } },
        tap: { scale: 0.9 },
      }

      const dockVariants = {
        hidden: { opacity: 0, y: 50 },
        visible: { opacity: 1, y: 0, transition: { delay: 0.5, duration: 0.5 } },
      }

      const runningApps = openWindows.filter((app) => !minimizedWindows.includes(app.id))

      return (
        <motion.div
          className={styles.dock}
          initial="hidden"
          animate="visible"
          variants={dockVariants}
          aria-label="Application Dock"
        >
          <div className={styles.dockContainer}>
            {desktopApps.map((app) => {
              const isRunning = runningApps.some((runningApp) => runningApp.id === app.id)
              const isMinimized = minimizedWindows.includes(app.id)

              return (
                <motion.div
                  key={app.id}
                  className={`${styles.dockItem} ${isRunning ? styles.running : ""} ${isMinimized ? styles.minimized : ""}`}
                  variants={dockItemVariants}
                  whileHover="hover"
                  whileTap="tap"
                  onClick={() => (isRunning ? focusWindow(app.id) : openWindow(app))}
                  aria-label={app.name}
                  role="button"
                  tabIndex={0}
                >
                  <span className={styles.appIcon}>{app.icon}</span>
                  {isRunning && <div className={styles.runningDot} />}
                </motion.div>
              )
            })}
          </div>
          <div className={styles.timeDisplay} aria-live="polite">
            {formatTime(time)}
          </div>
        </motion.div>
      )
    }