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