TabsNavigation

tabsnavigation-1779378817512.tsx

'use client'
import { useState, useRef, useEffect } from 'react'

const TABS = [
  { id: 'overview', label: 'Overview', icon: '◉', badge: null },
  { id: 'components', label: 'Components', icon: '⬡', badge: 84 },
  { id: 'categories', label: 'Categories', icon: '⊞', badge: 16 },
  { id: 'docs', label: 'Docs', icon: '📄', badge: null },
  { id: 'api', label: 'API', icon: '⚡', badge: null },
]

const CONTENT: Record<string, string> = {
  overview: 'Overview dashboard with key metrics, recent activity, and quick actions.',
  components: '84 production-ready React components with full TypeScript support and dark mode.',
  categories: '16 categories covering buttons, forms, charts, navigation, and more.',
  docs: 'Complete documentation with quickstart guide, API reference, and examples.',
  api: 'RESTful API and MCP server for integrating Empire UI into your workflow.',
}

export default function TabsNavigation() {
  const [active, setActive] = useState('overview')
  const [indicator, setIndicator] = useState({ left: 0, width: 0 })
  const tabsRef = useRef<HTMLDivElement>(null)
  const [variant, setVariant] = useState<'underline' | 'pill' | 'boxed'>('underline')

  useEffect(() => {
    if (!tabsRef.current) return
    const el = tabsRef.current.querySelector(`[data-id="${active}"]`) as HTMLElement
    if (el) setIndicator({ left: el.offsetLeft, width: el.offsetWidth })
  }, [active, variant])

  return (
    <div style={{ padding: 32, background: '#0A0A0A', minHeight: 280 }}>
      <div style={{ display: 'flex', gap: 8, marginBottom: 20 }}>
        {(['underline', 'pill', 'boxed'] as const).map(v => (
          <button key={v} onClick={() => setVariant(v)} style={{ background: variant === v ? 'rgba(201,168,76,0.15)' : 'rgba(255,255,255,0.04)', border: '1px solid', borderColor: variant === v ? 'rgba(201,168,76,0.3)' : 'rgba(255,255,255,0.08)', color: variant === v ? '#C9A84C' : 'rgba(255,255,255,0.4)', borderRadius: 6, padding: '4px 12px', cursor: 'pointer', fontSize: 12 }}>{v}</button>
        ))}
      </div>

      <div ref={tabsRef} style={{
        position: 'relative', display: 'flex', gap: variant === 'boxed' ? 4 : 0,
        borderBottom: variant === 'underline' ? '1px solid rgba(255,255,255,0.08)' : 'none',
        background: variant === 'boxed' ? 'rgba(255,255,255,0.04)' : 'transparent',
        borderRadius: variant === 'boxed' ? 10 : 0, padding: variant === 'boxed' ? 4 : 0,
        marginBottom: 24,
      }}>
        {variant === 'underline' && (
          <div style={{ position: 'absolute', bottom: -1, left: indicator.left, width: indicator.width, height: 2, background: '#C9A84C', borderRadius: 1, transition: 'all 0.2s ease' }} />
        )}
        {variant === 'pill' && (
          <div style={{ position: 'absolute', top: 0, left: indicator.left, width: indicator.width, height: '100%', background: 'rgba(201,168,76,0.12)', border: '1px solid rgba(201,168,76,0.25)', borderRadius: 8, transition: 'all 0.2s ease' }} />
        )}
        {variant === 'boxed' && (
          <div style={{ position: 'absolute', top: 4, left: indicator.left, width: indicator.width - 8, height: 'calc(100% - 8px)', background: '#1a1a1a', borderRadius: 7, transition: 'all 0.2s ease', zIndex: 0 }} />
        )}
        {TABS.map(tab => (
          <button key={tab.id} data-id={tab.id} onClick={() => setActive(tab.id)}
            style={{ position: 'relative', zIndex: 1, display: 'flex', alignItems: 'center', gap: 6, padding: '10px 14px', border: 'none', background: 'transparent', cursor: 'pointer', color: active === tab.id ? '#C9A84C' : 'rgba(255,255,255,0.4)', fontSize: 13, fontWeight: active === tab.id ? 600 : 500, transition: 'color 0.15s', borderRadius: variant !== 'underline' ? 7 : 0, whiteSpace: 'nowrap' }}>
            <span style={{ fontSize: 12 }}>{tab.icon}</span>
            {tab.label}
            {tab.badge && <span style={{ background: 'rgba(201,168,76,0.15)', color: '#C9A84C', fontSize: 10, fontWeight: 700, padding: '1px 5px', borderRadius: 10 }}>{tab.badge}</span>}
          </button>
        ))}
      </div>

      <div key={active} style={{ color: 'rgba(255,255,255,0.6)', fontSize: 14, lineHeight: 1.7, animation: 'fadeIn 0.25s ease' }}>
        {CONTENT[active]}
      </div>
      <style>{`@keyframes fadeIn { from { opacity:0; transform:translateY(4px) } to { opacity:1; transform:translateY(0) } }`}</style>
    </div>
  )
}

Component info

CategoryNavigation

Frameworkreact

TierFREE

Copies0

About

Animated tab navigation with sliding indicator, icons, badge counts, and keyboard accessibility

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