AppHeader

appheader-1779394643466.tsx

'use client'
import { useState } from 'react'

export default function AppHeader() {
  const [mobileOpen, setMobileOpen] = useState(false)
  const [searchQuery, setSearchQuery] = useState('')
  return (
    <header style={{ background:'#fff', borderBottom:'1px solid #e2e8f0', padding:'0 24px' }}>
      <div style={{ display:'flex', alignItems:'center', height:'60px', gap:'24px', maxWidth:'1200px', margin:'0 auto' }}>
        <div style={{ display:'flex', alignItems:'center', gap:'8px', fontWeight:900, fontSize:'18px', color:'#1e293b', flexShrink:0 }}>
          <span style={{ background:'linear-gradient(135deg,#6d28d9,#2563eb)', WebkitBackgroundClip:'text', WebkitTextFillColor:'transparent' }}>Empire</span>
          <span>UI</span>
        </div>
        <nav style={{ display:'flex', gap:'4px', flex:1 }}>
          {['Components','Templates','Docs','Pricing'].map(item=>(
            <a key={item} href="#" style={{ padding:'6px 12px', borderRadius:'8px', color:'#64748b', fontWeight:500, fontSize:'14px', textDecoration:'none', transition:'all 0.15s' }}
              onMouseEnter={e=>{e.target.color='#1e293b';e.target.style.background='#f8fafc'}}
              onMouseLeave={e=>{e.target.style.color='#64748b';e.target.style.background='transparent'}}
            >{item}</a>
          ))}
        </nav>
        <div style={{ display:'flex', alignItems:'center', gap:'8px', background:'#f8fafc', border:'1px solid #e2e8f0', borderRadius:'10px', padding:'6px 12px', width:'200px' }}>
          <span style={{ color:'#94a3b8', fontSize:'15px' }}>🔍</span>
          <input value={searchQuery} onChange={e=>setSearchQuery(e.target.value)} placeholder="Search..." style={{ border:'none', background:'transparent', outline:'none', fontSize:'13px', color:'#374151', width:'100%' }}/>
        </div>
        <div style={{ display:'flex', alignItems:'center', gap:'8px' }}>
          <button style={{ background:'none', border:'none', color:'#64748b', cursor:'pointer', fontSize:'18px', padding:'4px' }}>🔔</button>
          <div style={{ width:'34px', height:'34px', borderRadius:'50%', background:'linear-gradient(135deg,#6d28d9,#2563eb)', display:'flex', alignItems:'center', justifyContent:'center', fontSize:'16px', cursor:'pointer' }}>👤</div>
        </div>
      </div>
    </header>
  )
}

Component info

CategoryNavigation

Frameworkreact

TierFREE

Copies0

About

Application header with logo, nav links, search and user menu

More from Navigation

import * as React from 'react';
import * as ReactDOM from 'react-dom';

interface FloatingDockProps {
  icons: { id: number; src: string; }[];
}

class FloatingDock extends React.Component<FloatingDockProps, {}> {
  constructor(props: FloatingDockPro

FloatingDock

Navigation

'use client'
import { useState } from 'react'

const NAV = [
  { id: 'home', icon: '◉', label: 'Overview', shortcut: 'G H' },
  { id: 'components', icon: '⬡', label: 'Components', shortcut: 'G C', badge: 120, children: [
    { id: 'buttons', label: '

SidebarNav

Navigation

'use client';

import React from 'react';

interface PaginationNavProps {
  currentPage: number;
  totalPages: number;
  onPageChange: (page: number) => void;
}

const PaginationNav: React.FC<PaginationNavProps> = ({ currentPage, totalPages, onPageCh

PaginationNav

Navigation

'use client';

import React, { useState } from 'react';

interface Tab {
  id: number;
  label: string;
}

const tabs: Tab[] = [
  { id: 1, label: 'Tab 1' },
  { id: 2, label: 'Tab 2' },
  { id: 3, label: 'Tab 3' },
  { id: 4, label: 'Tab 4' },
];

c

TabsNav

Navigation