タブバー / ボトムナビ（Tab Bar / Bottom Navigation）

'use client';
import { useState } from 'react';
import { MantineProvider, Tabs } from '@mantine/core';
import '@mantine/core/styles.css';

const tabs = [
  { value: 'home', icon: '🏠', label: 'ホーム' },
  { value: 'search', icon: '🔍', label: '検索' },
  { value: 'notifications', icon: '🔔', label: '通知' },
  { value: 'profile', icon: '👤', label: 'プロフィール' },
];

export function MantineTabBarDemo() {
  const [active, setActive] = useState('home');
  return (
    <MantineProvider>
      <Tabs value={active} onChange={(v) => setActive(v ?? 'home')} variant="pills">
        <Tabs.List>
          {tabs.map((tab) => (
            <Tabs.Tab key={tab.value} value={tab.value} leftSection={<span>{tab.icon}</span>}>
              {tab.label}
            </Tabs.Tab>
          ))}
        </Tabs.List>
        {tabs.map((tab) => (
          <Tabs.Panel key={tab.value} value={tab.value} pt="md">
            {tab.label}の内容
          </Tabs.Panel>
        ))}
      </Tabs>
    </MantineProvider>
  );
}