react/components/Header.tsx - claude-react - ivaninvv/dashboard

react/components/Header.tsx
85 строк3 KB
VladimirIvanin
react
30 ноя 2025, 03:20
30 ноя 2025, 03:20030fe15
'use client'

import { Bell } from 'lucide-react'

const Header = () => {
  const handleDownloadClick = () => {
    console.log('Download Free clicked')
  }

  const handleDownloadKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault()
      handleDownloadClick()
    }
  }

  const handleNotificationClick = () => {
    console.log('Notifications clicked')
  }

  const handleNotificationKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault()
      handleNotificationClick()
    }
  }

  const handleAvatarClick = () => {
    console.log('Avatar clicked')
  }

  const handleAvatarKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault()
      handleAvatarClick()
    }
  }

  return (
    <header className="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-6">
      <div className="flex items-center gap-3">
        <svg width="32" height="32" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M32.5 16.1436C32.5 7.307 25.3366 0.143555 16.5 0.143555C7.66344 0.143555 0.5 7.307 0.5 16.1436C0.5 24.9801 7.66344 32.1436 16.5 32.1436C25.3366 32.1436 32.5 24.9801 32.5 16.1436Z" fill="#184FEB"/>
          <path d="M7.93593 16.543C8.42784 16.454 8.93451 16.4075 9.45203 16.4075C14.1312 16.4075 17.9244 20.2087 17.9244 24.8977C17.9244 25.0281 17.9215 25.1578 17.9157 25.2867C22.5692 24.8596 26.2139 20.9379 26.2139 16.1632C26.2139 11.103 22.1205 7.00098 17.0711 7.00098C12.0216 7.00098 7.92822 11.103 7.92822 16.1632C7.92822 16.2904 7.93081 16.417 7.93593 16.543Z" fill="#3ED9EB"/>
        </svg>
        <h1 className="text-xl font-bold text-gray-900">NextKit</h1>
      </div>

      <div className="flex items-center gap-3">
        <button
          onClick={handleNotificationClick}
          onKeyDown={handleNotificationKeyDown}
          tabIndex={0}
          aria-label="Notifications"
          className="p-2 hover:bg-gray-100 rounded-full transition-colors"
        >
          <Bell className="w-5 h-5 text-gray-600" />
        </button>

        <button
          onClick={handleDownloadClick}
          onKeyDown={handleDownloadKeyDown}
          tabIndex={0}
          aria-label="Download Free"
          className="px-4 py-2 bg-primary text-white text-sm font-medium rounded-lg hover:bg-primary/90 transition-colors"
        >
          Download Free
        </button>

        <div
          onClick={handleAvatarClick}
          onKeyDown={handleAvatarKeyDown}
          tabIndex={0}
          role="button"
          aria-label="User profile"
          className="w-10 h-10 rounded-full border-2 border-gray-300 bg-gray-100 flex items-center justify-center cursor-pointer hover:border-primary transition-colors"
        >
          <span className="text-lg font-semibold text-gray-700">A</span>
        </div>
      </div>
    </header>
  )
}

export default Header