# All files / components TopBar.tsx

100% Statements 39/39
50% Branches 1/2
100% Functions 1/1
100% Lines 39/39

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
    651x

    1x
    1x
    1x

    1x

    1x
    2x
    2x
    2x
    2x
    2x
    2x

    2x
    2x
    2x
    2x
    2x
    2x

    2x
    2x
    2x
    2x
    2x

    2x
    2x

    2x
    2x

    2x
    2x
    2x
    2x

    2x
    2x
    2x
    2x
    2x

    2x

    2x

    1x
     "use client"

    import { memo } from "react"
    import { motion } from "framer-motion"
    import { Search, Power } from "lucide-react"

    import styles from "./TopBar.module.css"

    interface TopBarProps {
      toggleActivities: () => void
      activitiesOpen: boolean
      onLogout: () => void
    }

    const TopBar = memo(function TopBar({ toggleActivities, activitiesOpen, onLogout }: TopBarProps) {
      const currentTime = new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
      const currentDate = new Date().toLocaleDateString([], {
        weekday: "short",
        month: "short",
        day: "numeric",
      })

      return (
        <motion.div
          className={styles.topBar}
          initial={{ y: -60, opacity: 0 }}
          animate={{ y: 0, opacity: 1 }}
          transition={{ duration: 0.3 }}
        >
          <div className={styles.leftSection}>
            <button
              className={`${styles.activitiesButton} ${activitiesOpen ? styles.active : ""}`}
              onClick={toggleActivities}
              type="button"
            >
              <Search size={16} />
              <span>Activities</span>
            </button>
          </div>

          <div className={styles.centerSection}>
            <span className={styles.title}>Mohamed Gamal - Portfolio</span>
          </div>

          <div className={styles.rightSection}>
            <div className={styles.timeDisplay}>
              <span className={styles.time}>{currentTime}</span>
              <span className={styles.date}>{currentDate}</span>
            </div>
           <button
      className={styles.powerButton}
      type="button"
      aria-label="Power"
      title="Power"
    >
     <Power aria-hidden="true" />
    </button>

          </div>
        </motion.div>
      )
    })

    export default TopBar