You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
43 lines
1.0 KiB
TypeScript
43 lines
1.0 KiB
TypeScript
'use client'
|
|
|
|
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) => (
|
|
<Tab
|
|
key={bookmarkCategory.id}
|
|
title={bookmarkCategory.name}>
|
|
<div className='mt-12 flex flex-wrap justify-center gap-6'>
|
|
{bookmarkCategory.bookmark.map((data, index) => (
|
|
<BookmarkCard
|
|
key={index}
|
|
data={data}
|
|
/>
|
|
))}
|
|
</div>
|
|
</Tab>
|
|
))}
|
|
</Tabs>
|
|
</div>
|
|
)
|
|
}
|