New feature: dropdown from navbar to change tab

app/providers.tsx

@@ -42,6 +42,17 @@ export const BookmarkContext = React.createContext<BookmarkContextContent>({
 	setBookmark: () => {},
 })
 
+export type BookmarkCategoryContextContent = {
+	selectedCategory: string
+	setSelectedCategory: (category: string) => void
+}
+
+export const BookmarkCategoryContext =
+	React.createContext<BookmarkCategoryContextContent>({
+		selectedCategory: '',
+		setSelectedCategory: () => {},
+	})
+
 export function Providers({ children, themeProps }: ProvidersProps) {
 	// const [isEditBookmark, setIsEditBookmark] = React.useState<boolean>(false)
 	const {
@@ -57,7 +68,13 @@ export function Providers({ children, themeProps }: ProvidersProps) {
 		url: '',
 		category_id: 2,
 	})
+	const [selectedCategory, setSelectedCategory] = React.useState('')
 	return (
+		<BookmarkCategoryContext.Provider
+			value={{
+				selectedCategory,
+				setSelectedCategory,
+			}}>
 			<BookmarkContext.Provider
 				value={{
 					bookmark,
@@ -76,5 +93,6 @@ export function Providers({ children, themeProps }: ProvidersProps) {
 					</NextUIProvider>
 				</EditBookmarkContext.Provider>
 			</BookmarkContext.Provider>
+		</BookmarkCategoryContext.Provider>
 	)
 }

components/navbar.tsx

@@ -31,6 +31,8 @@ import { Icon } from '@iconify/react'
 import NewBookmarkForm from '@/components/newBookmarkForm'
 import { usePathname, useRouter } from 'next/navigation'
 import { BookmarkCategory, User } from '@/types'
+import { useContext } from 'react'
+import { BookmarkCategoryContext } from '@/app/providers'
 
 export const Navbar = ({
 	user,
@@ -45,6 +47,8 @@ export const Navbar = ({
 		return <></>
 	}
 
+	const { setSelectedCategory } = useContext(BookmarkCategoryContext)
+
 	return (
 		<NextUINavbar
 			maxWidth='xl'
@@ -80,6 +84,30 @@ export const Navbar = ({
 							</NextLink>
 						</NavbarItem>
 					))}
+					<NavbarItem>
+						<Dropdown>
+							<DropdownTrigger>Category</DropdownTrigger>
+							<DropdownMenu>
+								{categories.length > 0 ? (
+									categories.map((category) => (
+										<DropdownItem
+											key={category.name}
+											onPress={() =>
+												setSelectedCategory(
+													category.id.toString()
+												)
+											}>
+											{category.name}
+										</DropdownItem>
+									))
+								) : (
+									<DropdownItem key='empty'>
+										Nothing Here
+									</DropdownItem>
+								)}
+							</DropdownMenu>
+						</Dropdown>
+					</NavbarItem>
 				</ul>
 			</NavbarContent>
 

components/tabs.tsx

@@ -3,20 +3,28 @@
 import { BookmarkCategoryWithBookmarks } from '@/types'
 import { Tabs, Tab } from '@nextui-org/tabs'
 import { BookmarkCard } from './bookmarkCard'
+import { useContext, useState } from 'react'
+import { BookmarkCategoryContext } from '@/app/providers'
 
 export default function BookmarkTabs({
 	data,
 }: {
 	data: BookmarkCategoryWithBookmarks[]
 }) {
+	const { selectedCategory, setSelectedCategory } = useContext(
+		BookmarkCategoryContext
+	)
+
 	return (
 		<div className='flex w-full max-w-4xl flex-col'>
 			<Tabs
 				fullWidth
+				selectedKey={selectedCategory}
+				onSelectionChange={(key) => setSelectedCategory(key.toString())}
 				color='primary'>
-				{data.map((bookmarkCategory, index) => (
+				{data.map((bookmarkCategory) => (
 					<Tab
-						key={index}
+						key={bookmarkCategory.id}
 						title={bookmarkCategory.name}>
 						<div className='mt-12 flex flex-wrap justify-center gap-6'>
 							{bookmarkCategory.bookmark.map((data, index) => (