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.
41 lines
1.3 KiB
41 lines
1.3 KiB
import React from 'react'; |
|
import { useHistory } from 'react-router-dom'; |
|
import { useMovie } from '../hooks/useMovie' |
|
import { Arrow } from '../components/Arrow' |
|
import './Title.css' |
|
|
|
// size: "big" | "medium" | "small" | null |
|
// accent: string | null |
|
// accentLink: string | null |
|
export function Title(props) { |
|
const { streamData, resetStreamData } = useMovie(); |
|
const history = useHistory(); |
|
const size = props.size || "big"; |
|
|
|
const accentLink = props.accentLink || ""; |
|
const accent = props.accent || ""; |
|
|
|
function handleAccentClick(){ |
|
if (accentLink.length > 0) { |
|
history.push(`/${streamData.type}`); |
|
resetStreamData(); |
|
} |
|
} |
|
|
|
function handleKeyPress(event){ |
|
if (event.code === 'Enter' || event.code === 'Space'){ |
|
handleAccentClick(); |
|
} |
|
} |
|
|
|
return ( |
|
<div> |
|
{accent.length > 0 ? ( |
|
<p onClick={handleAccentClick} className={`title-accent ${accentLink.length > 0 ? 'title-accent-link' : ''}`} tabIndex={accentLink.length > 0 ? 0 : undefined} onKeyPress={handleKeyPress}> |
|
{accentLink.length > 0 ? (<Arrow left/>) : null}{accent} |
|
</p> |
|
) : null} |
|
<h1 className={"title " + ( size ? `title-size-${size}` : '' )}>{props.children}</h1> |
|
</div> |
|
) |
|
}
|
|
|