movie-web/src/components/layout/BrandPill.tsx
Jelle van Snik e7981539e6 media grids
2023-01-07 23:44:46 +01:00

20 lines
655 B
TypeScript

import { Icon, Icons } from "@/components/Icon";
import { useTranslation } from "react-i18next";
export function BrandPill(props: { clickable?: boolean }) {
const { t } = useTranslation();
return (
<div
className={`flex items-center space-x-2 rounded-full bg-bink-300 bg-opacity-50 px-4 py-2 text-bink-600 ${
props.clickable
? "transition-[transform,background-color] hover:scale-105 hover:bg-bink-400 hover:text-bink-700 active:scale-95"
: ""
}`}
>
<Icon className="text-xl" icon={Icons.MOVIE_WEB} />
<span className="font-semibold text-white">{t("global.name")}</span>
</div>
);
}