2024-07-29 07:45:59 -07:00
|
|
|
import type { FC } from 'react';
|
|
|
|
|
import { useBookmarkContext } from '~/Providers/BookmarkContext';
|
|
|
|
|
import BookmarkItem from './BookmarkItem';
|
2024-08-08 18:16:17 +02:00
|
|
|
interface BookmarkItemsProps {
|
2024-08-08 21:25:10 -04:00
|
|
|
ctx: 'header' | 'nav';
|
2024-07-29 07:45:59 -07:00
|
|
|
tags: string[];
|
|
|
|
|
handleSubmit: (tag: string) => Promise<void>;
|
|
|
|
|
header: React.ReactNode;
|
|
|
|
|
highlightSelected?: boolean;
|
2024-08-08 18:16:17 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const BookmarkItems: FC<BookmarkItemsProps> = ({
|
2024-08-08 21:25:10 -04:00
|
|
|
ctx,
|
2024-08-08 18:16:17 +02:00
|
|
|
tags,
|
|
|
|
|
handleSubmit,
|
|
|
|
|
header,
|
|
|
|
|
highlightSelected,
|
|
|
|
|
}) => {
|
2024-07-29 07:45:59 -07:00
|
|
|
const { bookmarks } = useBookmarkContext();
|
2024-08-08 18:16:17 +02:00
|
|
|
|
2024-07-29 07:45:59 -07:00
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
{header}
|
2024-08-08 21:25:10 -04:00
|
|
|
<div className="my-1.5 h-px" role="none" />
|
2024-08-08 18:16:17 +02:00
|
|
|
{bookmarks.map((bookmark) => (
|
|
|
|
|
<BookmarkItem
|
2024-08-08 21:25:10 -04:00
|
|
|
ctx={ctx}
|
2024-08-08 18:16:17 +02:00
|
|
|
key={bookmark.tag}
|
|
|
|
|
tag={bookmark.tag}
|
|
|
|
|
selected={tags.includes(bookmark.tag)}
|
|
|
|
|
count={bookmark.count}
|
|
|
|
|
handleSubmit={handleSubmit}
|
|
|
|
|
highlightSelected={highlightSelected}
|
|
|
|
|
/>
|
|
|
|
|
))}
|
2024-07-29 07:45:59 -07:00
|
|
|
</>
|
|
|
|
|
);
|
|
|
|
|
};
|
2024-08-08 18:16:17 +02:00
|
|
|
|
2024-07-29 07:45:59 -07:00
|
|
|
export default BookmarkItems;
|