p-stream/src/components/player/base/BackLink.tsx

import { useTranslation } from "react-i18next";
import { useHistory } from "react-router-dom";

import { Icon, Icons } from "@/components/Icon";

export function BackLink(props: { url: string }) {
  const { t } = useTranslation();
  const history = useHistory();

  return (
    <div className="flex items-center">
      <button
        type="button"
        onClick={() => history.push(props.url)}
        className="py-1 -my-1 px-2 -mx-2 tabbable rounded-lg flex items-center cursor-pointer text-type-secondary hover:text-white transition-colors duration-200 font-medium"
      >
        <Icon className="mr-2" icon={Icons.ARROW_LEFT} />
        <span className="md:hidden">{t("videoPlayer.backToHomeShort")}</span>
        <span className="hidden md:block">{t("videoPlayer.backToHome")}</span>
      </button>
    </div>
  );
}