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.
27 lines
932 B
27 lines
932 B
import { Icon, Icons } from "@/components/Icon"; |
|
import React from "react"; |
|
|
|
export interface VideoPlayerIconButtonProps { |
|
onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void; |
|
icon: Icons; |
|
text?: string; |
|
className?: string; |
|
iconSize?: string; |
|
} |
|
|
|
export function VideoPlayerIconButton(props: VideoPlayerIconButtonProps) { |
|
return ( |
|
<div className={props.className}> |
|
<button |
|
type="button" |
|
onClick={props.onClick} |
|
className="group pointer-events-auto p-2 text-white transition-transform duration-100 active:scale-110" |
|
> |
|
<div className="flex items-center justify-center rounded-full bg-white bg-opacity-0 p-2 transition-colors duration-100 group-hover:bg-opacity-20"> |
|
<Icon icon={props.icon} className={props.iconSize ?? "text-2xl"} /> |
|
{props.text ? <span className="ml-2">{props.text}</span> : null} |
|
</div> |
|
</button> |
|
</div> |
|
); |
|
}
|
|
|