34 lines
1.0 KiB
JavaScript
34 lines
1.0 KiB
JavaScript
import { useContext } from "react";
|
|
import classNames from "classnames";
|
|
|
|
import { SettingsContext } from "utils/contexts/settings";
|
|
import ResolvedIcon from "components/resolvedicon";
|
|
|
|
export default function Item({ favicon }) {
|
|
const description = favicon.description ?? new URL(favicon.href).hostname;
|
|
const { settings } = useContext(SettingsContext);
|
|
|
|
return (
|
|
<li key={favicon.name} id={favicon.id} className="favicon" data-name={favicon.name}>
|
|
<a
|
|
href={favicon.href}
|
|
title={favicon.name}
|
|
rel="noreferrer"
|
|
target={favicon.target ?? settings.target ?? "_blank"}
|
|
className={classNames(
|
|
settings.cardBlur !== undefined && `backdrop-blur${settings.cardBlur.length ? "-" : ""}${settings.cardBlur}`,
|
|
"",
|
|
)}
|
|
>
|
|
<div className="">
|
|
{favicon.icon && (
|
|
<ResolvedIcon icon={favicon.icon} alt={favicon.abbr} />
|
|
)}
|
|
{!favicon.icon && favicon.abbr}
|
|
|
|
</div>
|
|
</a>
|
|
</li>
|
|
);
|
|
}
|