hover effect

This commit is contained in:
FireStreaker2 2023-12-13 18:51:07 -08:00
parent 25c4a1e9ce
commit 2f86f1c004
4 changed files with 29 additions and 15 deletions

View file

@ -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>
);
}