タブ

1import classNames from 'classnames';
2import Link from 'next/link';
3import { useRouter } from 'next/router';
4import React from 'react';
5
6const TAB_ITEMS = [
7  {
8    id: 'profile',
9    label: 'プロフィール',
10    content: 'プロフィールが表示されます',
11  },
12  {
13    id: 'posts',
14    label: '投稿した記事一覧',
15    content: '投稿した記事一覧が表示されます',
16  },
17  {
18    id: 'settings',
19    label: '設定',
20    content: '設定が表示されます',
21  },
22];
23
24const Tab = () => {
25  const router = useRouter();
26  const Content =
27    TAB_ITEMS.find((item) => item.id === (router.query.view as string))
28      ?.content || TAB_ITEMS[0].content;
29
30  return (
31    <div className="">
32      <div className="inline-flex overflow-hidden divide-x border-t border-l rounded-t-md border-r">
33        {TAB_ITEMS.map((item) => {
34          return (
35            <Link
36              href={{
37                query: {
38                  id: router.query.id,
39                  view: item.id,
40                },
41              }}
42              shallow
43              replace
44              key={item.id}
45            >
46              <a
47                className={classNames(
48                  'px-4 py-2',
49                  router.query.view === item.id && 'bg-pink-600'
50                )}
51              >
52                {item.label}
53              </a>
54            </Link>
55          );
56        })}
57      </div>
58
59      <div className="p-4 border rounded-b-md">{Content}</div>
60    </div>
61  );
62};
63
64export default Tab;
demos/tab.tsx

解説

特定のタブを開いた状態でページを表示するために、URLにクエリーパラメータをつけて遷移しています。タブはクエリーパラメータに基づいて選択されています。

使用ライブラリ

なし

参考サイト

なし