Karl/homepage
1
0
Fork 0
mirror of https://github.com/karl0ss/homepage.git synced 2025-04-29 12:03:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

better handle non-clickable service tiles

Browse Source
This commit is contained in:
Ben Phelps 2022-09-12 11:55:01 +03:00
parent cd53440eff
commit d3806f7d5b
1 changed files with 39 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/services/item.jsx
View File

@ -22,36 +22,42 @@ function resolveIcon(icon) {
} }
export default function Item({ service }) { export default function Item({ service }) {
const handleOnClick = () => {
if (service.href && service.href !== "#") {
window.open(service.href, "_blank").focus();
}
};
const hasLink = service.href && service.href !== "#";
return ( return (
<li key={service.name}> <li key={service.name}>
<Disclosure> <Disclosure>
<div <div
className={`${ className={`${
service.href && service.href !== "#" ? "cursor-pointer " : "cursor-default " hasLink ? "cursor-pointer " : " "
}transition-all h-15 mb-3 p-1 rounded-md font-medium text-theme-700 hover:text-theme-700/70 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/20 dark:bg-white/10 dark:hover:bg-white/20 backdrop-blur-md`} }transition-all h-15 mb-3 p-1 rounded-md font-medium text-theme-700 hover:text-theme-700/70 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/20 dark:bg-white/10 dark:hover:bg-white/20 backdrop-blur-md`}
> >
<div className="flex"> <div className="flex select-none">
{service.icon && ( {service.icon &&
(hasLink ? (
<button <button
type="button" type="button"
onClick={() => { onClick={handleOnClick}
if (service.href && service.href !== "#") {
window.open(service.href, "_blank").focus();
}
}}
className="flex-shrink-0 flex items-center justify-center w-12 " className="flex-shrink-0 flex items-center justify-center w-12 "
> >
<Image src={resolveIcon(service.icon)} width={32} height={32} alt="logo" /> <Image src={resolveIcon(service.icon)} width={32} height={32} alt="logo" />
</button> </button>
)} ) : (
<div className="flex-shrink-0 flex items-center justify-center w-12 ">
<Image src={resolveIcon(service.icon)} width={32} height={32} alt="logo" />
</div>
))}
{hasLink ? (
<button <button
type="button" type="button"
onClick={() => { onClick={handleOnClick}
if (service.href && service.href !== "#") {
window.open(service.href, "_blank").focus();
}
}}
className="flex-1 flex items-center justify-between rounded-r-md " className="flex-1 flex items-center justify-between rounded-r-md "
> >
<div className="flex-1 px-2 py-2 text-sm text-left"> <div className="flex-1 px-2 py-2 text-sm text-left">
@ -59,6 +65,15 @@ export default function Item({ service }) {
<p className="text-theme-500 dark:text-theme-400 text-xs font-extralight">{service.description}</p> <p className="text-theme-500 dark:text-theme-400 text-xs font-extralight">{service.description}</p>
</div> </div>
</button> </button>
) : (
<div className="flex-1 flex items-center justify-between rounded-r-md ">
<div className="flex-1 px-2 py-2 text-sm text-left">
{service.name}
<p className="text-theme-500 dark:text-theme-400 text-xs font-extralight">{service.description}</p>
</div>
</div>
)}
{service.container && ( {service.container && (
<Disclosure.Button <Disclosure.Button
as="div" as="div"