0ct0pu5/homepage
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 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

63
src/components/services/item.jsx
View file

@ -22,43 +22,58 @@ function resolveIcon(icon) {
}
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 (
<li key={service.name}>
<Disclosure>
<div
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`}
>
<div className="flex">
{service.icon && (
<div className="flex select-none">
{service.icon &&
(hasLink ? (
<button
type="button"
onClick={handleOnClick}
className="flex-shrink-0 flex items-center justify-center w-12 "
>
<Image src={resolveIcon(service.icon)} width={32} height={32} alt="logo" />
</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
type="button"
onClick={() => {
if (service.href && service.href !== "#") {
window.open(service.href, "_blank").focus();
}
}}
className="flex-shrink-0 flex items-center justify-center w-12 "
onClick={handleOnClick}
className="flex-1 flex items-center justify-between rounded-r-md "
>
<Image src={resolveIcon(service.icon)} width={32} height={32} alt="logo" />
<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>
</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>
)}
<button
type="button"
onClick={() => {
if (service.href && service.href !== "#") {
window.open(service.href, "_blank").focus();
}
}}
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>
</button>
{service.container && (
<Disclosure.Button
as="div"