A small web app for watching movies and shows easily
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

43 lines
1.1 KiB

import classNames from "classnames";
import { forwardRef } from "react";
import { Icon, Icons } from "@/components/Icon";
export interface VideoPlayerButtonProps {
children?: React.ReactNode;
onClick?: (el: HTMLButtonElement) => void;
icon?: Icons;
iconSizeClass?: string;
className?: string;
activeClass?: string;
}
export const VideoPlayerButton = forwardRef<
HTMLButtonElement,
VideoPlayerButtonProps
>((props, ref) => {
return (
<button
ref={ref}
type="button"
onClick={(e) => props.onClick?.(e.currentTarget as HTMLButtonElement)}
className={classNames([
"p-2 rounded-full hover:bg-video-buttonBackground hover:bg-opacity-50 transition-transform duration-100 flex items-center",
props.activeClass ??
"active:scale-110 active:bg-opacity-75 active:text-white",
props.className ?? "",
])}
>
{props.icon && (
<Icon
className={classNames(
props.iconSizeClass || "text-2xl",
props.children ? "mr-3" : ""
)}
icon={props.icon}
/>
)}
{props.children}
</button>
);
});