Enhancement: icons-only bookmarks style (#4384)
Some checks failed
Docker / Linting Checks (push) Has been cancelled
Docker / Docker Build & Push (push) Has been cancelled

This commit is contained in:
shamoon
2024-12-05 15:35:31 -08:00
committed by GitHub
parent c58f59c105
commit cb3248117f
5 changed files with 69 additions and 21 deletions

View File

@@ -4,16 +4,22 @@ import { columnMap } from "../../utils/layout/columns";
import Item from "components/bookmarks/item";
export default function List({ bookmarks, layout }) {
export default function List({ bookmarks, layout, bookmarksStyle }) {
let classes =
layout?.style === "row" ? `grid ${columnMap[layout?.columns]} gap-x-2` : "flex flex-col mt-3 bookmark-list";
const style = {};
if (layout?.iconsOnly || bookmarksStyle === "icons") {
classes = "grid gap-3 mt-3 bookmark-list";
style.gridTemplateColumns = "repeat(auto-fill, minmax(60px, 1fr))";
}
return (
<ul
className={classNames(
layout?.style === "row" ? `grid ${columnMap[layout?.columns]} gap-x-2` : "flex flex-col",
"mt-3 bookmark-list",
)}
>
<ul className={classNames(classes)} style={style}>
{bookmarks.map((bookmark) => (
<Item key={`${bookmark.name}-${bookmark.href}`} bookmark={bookmark} />
<Item
key={`${bookmark.name}-${bookmark.href}`}
bookmark={bookmark}
iconOnly={layout?.iconsOnly || bookmarksStyle === "icons"}
/>
))}
</ul>
);