TabbedLayout.tsx

import { Tab } from '@headlessui/react'
import clsx from 'clsx'
import React from 'react'
import { IconType } from 'react-icons/lib'

// Gist this
interface Navigation {
	name: string
	icon: IconType | React.ElementType
	component: React.ReactNode
}

interface TabbedLayoutProps {
	navigation: Array<Navigation>
	isTabbed: boolean
}

export function TabbedLayout({ navigation }: TabbedLayoutProps) {
	return (
		<Tab.Group vertical>
			<aside className="py-6 px-2 sm:px-6 lg:py-0 lg:px-0 lg:col-span-3">
				<nav
					aria-label="Sidebar"
					className="sticky top-4 divide-y divide-gray-300"
				>
					<div className="pb-8 space-y-1">
						<Tab.List className="space-y-2">
							{navigation.map((item) => {
								const Icon = item.icon
								return (
									<>
										<Tab
											className={({ selected }) =>
												clsx(
													selected
														? 'bg-brand-800 text-white dark:bg-brand-700 dark:text-white'
														: 'text-gray-600 hover:text-white hover:bg-brand-600 dark:hover:bg-brand-500 dark:hover:text-gray-100',
													'group flex items-center px-3 py-2 text-sm font-medium rounded-md w-full '
												)
											}
										>
											{({ selected }) => (
												<span className="truncate flex items-center">
													<Icon
														className={clsx(
															selected
																? 'text-white'
																: 'text-gray-400 group-hover:text-white dark:group-hover:text-white',
															'flex-shrink-0 mr-3 h-6 w-6'
														)}
													/>
													<p>{item.name}</p>
												</span>
											)}
										</Tab>
									</>
								)
							})}
						</Tab.List>
					</div>
				</nav>
			</aside>
			<Tab.Panels className="space-y-6 sm:px-6 lg:px-0 lg:col-span-9">
				{navigation.map((panel, index) => {
					return (
						panel.component && (
							<Tab.Panel key={index}>{panel.component}</Tab.Panel>
						)
					)
				})}
			</Tab.Panels>
		</Tab.Group>
	)
}

Usage.tsx

import React from 'react'
import {
	HiOutlineKey,
	HiOutlineSparkles,
	HiOutlineUserCircle,
} from 'react-icons/hi'
import { EditProfileTab } from '~/components/Profile/EditProfileTab'
import { PasswordTab } from '~/components/Profile/Password'
import { Preferences } from '~/components/Profile/Preferences'
import { TabbedLayout } from '../Navbar/TabbedLayout'

export function AccountPageLayout() {
	return (
		<div className="max-w-7xl mx-auto">
			<div className="lg:grid lg:grid-cols-12 lg:gap-x-5">
				<TabbedLayout
					navigation={[
						{
							component: <EditProfileTab />,
							icon: HiOutlineUserCircle,
							name: 'Profile Settings',
						},
						{
							component: <PasswordTab />,
							icon: HiOutlineKey,
							name: 'Security Settings',
						},
						{
							component: <Preferences />,
							icon: HiOutlineSparkles,
							name: 'Preferences',
						},
					]}
					isTabbed={true}
				/>
			</div>
		</div>
	)
}