Thomas des Francs
63 lines
1.4 KiB
TypeScript
63 lines
1.4 KiB
TypeScript
import { styled } from '@linaria/react';
|
|
import { useContext } from 'react';
|
|
import { IconPlayerPlay } from 'twenty-ui/icon';
|
|
import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
|
|
|
|
type HeroPlayButtonProps = {
|
|
onClick?: () => void;
|
|
ariaLabel?: string;
|
|
className?: string;
|
|
};
|
|
|
|
const StyledButton = styled.button`
|
|
align-items: center;
|
|
background: ${themeCssVariables.background.primary};
|
|
border: none;
|
|
border-radius: 50%;
|
|
box-shadow: ${themeCssVariables.boxShadow.strong};
|
|
color: ${themeCssVariables.font.color.tertiary};
|
|
corner-shape: round;
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
height: 44px;
|
|
justify-content: center;
|
|
padding: 0;
|
|
transition:
|
|
transform 120ms ease-out,
|
|
background-color 120ms ease-out;
|
|
width: 44px;
|
|
|
|
&:hover {
|
|
background: ${themeCssVariables.background.secondary};
|
|
transform: scale(1.04);
|
|
}
|
|
|
|
&:active {
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
&:focus-visible {
|
|
outline: 2px solid ${themeCssVariables.border.color.blue};
|
|
outline-offset: 2px;
|
|
}
|
|
`;
|
|
|
|
export const HeroPlayButton = ({
|
|
onClick,
|
|
ariaLabel = 'Play video',
|
|
className,
|
|
}: HeroPlayButtonProps) => {
|
|
const { theme } = useContext(ThemeContext);
|
|
|
|
return (
|
|
<StyledButton
|
|
type="button"
|
|
onClick={onClick}
|
|
aria-label={ariaLabel}
|
|
className={className}
|
|
>
|
|
<IconPlayerPlay size={theme.icon.size.md} stroke={theme.icon.stroke.md} />
|
|
</StyledButton>
|
|
);
|
|
};
|