mirror of
https://github.com/NebulaServices/Nebula.git
synced 2025-05-17 13:30:00 -04:00
hover effect
This commit is contained in:
parent
25c4a1e9ce
commit
2f86f1c004
4 changed files with 29 additions and 15 deletions
|
@ -1,22 +1,24 @@
|
|||
import { useTranslation } from "react-i18next";
|
||||
import { Link } from 'preact-router';
|
||||
import { Link } from "preact-router";
|
||||
|
||||
interface HeaderButtonProps {
|
||||
href: string;
|
||||
Icon: any;
|
||||
translationKey: string;
|
||||
href: string;
|
||||
Icon: any;
|
||||
translationKey: string;
|
||||
}
|
||||
|
||||
export function HeaderButton(props: HeaderButtonProps) {
|
||||
const { href, Icon, translationKey } = props;
|
||||
const { t } = useTranslation();
|
||||
const { href, Icon, translationKey } = props;
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<Link href={href}>
|
||||
<div class="p-4 flex flex-row items-center">
|
||||
<Icon class="w-6 h-6"/>
|
||||
<span className="text-text-color text-lg pl-1 font-roboto font-bold">{t(translationKey)}</span>
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<Link href={href}>
|
||||
<div className="group p-4 flex flex-row items-center">
|
||||
<Icon className="group-hover:text-text-hover-color transition duration-500 w-6 h-6" />
|
||||
<span className="group-hover:text-text-hover-color transition duration-500 text-text-color text-lg pl-1 font-roboto font-bold">
|
||||
{t(translationKey)}
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue