dominik/homepage-plus
1
0
Fork 0
mirror of https://github.com/DI0IK/homepage-plus.git synced 2025-07-18 18:49:50 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

add global settings context

Browse source 
will be useful going forward, and simplify widget props being passed around all over the place
This commit is contained in:
Ben Phelps 2022-09-21 09:00:57 +03:00
parent 244a76de0b
commit a677fbefbf
9 changed files with 57 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/bookmarks/group.jsx
View file

@ -1,10 +1,10 @@
import List from "components/bookmarks/list";
export default function BookmarksGroup({ group, target }) {
export default function BookmarksGroup({ group }) {
return (
<div key={group.name} className="basis-full md:basis-1/2 lg:basis-1/3 xl:basis-1/4 flex-1 p-1">
<h2 className="text-theme-800 dark:text-theme-300 text-xl font-medium">{group.name}</h2>
<List bookmarks={group.bookmarks} target={target} />
<List bookmarks={group.bookmarks} />
</div>
);
}

9
src/components/bookmarks/item.jsx
View file

@ -1,12 +1,17 @@
export default function Item({ bookmark, target = "_blank" }) {
import { useContext } from "react";
import { SettingsContext } from "utils/settings-context";
export default function Item({ bookmark }) {
const { hostname } = new URL(bookmark.href);
const { settings } = useContext(SettingsContext);
return (
<li key={bookmark.name}>
<a
href={bookmark.href}
title={bookmark.name}
target={target}
target={settings.target ?? "_blank"}
className="block w-full text-left mb-3 cursor-pointer rounded-md font-medium text-theme-700 hover:text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-black/10 dark:shadow-black/20 bg-white/50 hover:bg-theme-300/10 dark:bg-white/10 dark:hover:bg-white/20"
>
<div className="flex">

4
src/components/bookmarks/list.jsx
View file

@ -1,10 +1,10 @@
import Item from "components/bookmarks/item";
export default function List({ bookmarks, target }) {
export default function List({ bookmarks }) {
return (
<ul className="mt-3 flex flex-col">
{bookmarks.map((bookmark) => (
<Item key={bookmark.name} bookmark={bookmark} target={target} />
<Item key={bookmark.name} bookmark={bookmark} />
))}
</ul>
);