40 lines
1.3 KiB
TypeScript
40 lines
1.3 KiB
TypeScript
import classNames from 'classnames';
|
|
import { useContext } from 'react';
|
|
import { useDispatch } from 'react-redux';
|
|
import { ScreenContext } from '../contexts/screen';
|
|
import { expandSideMenu } from '../state/navigation';
|
|
|
|
export function HomeHeroBubble() {
|
|
const { isMobile, isTablet, isDesktop, isHuge } = useContext(ScreenContext);
|
|
const dispatch = useDispatch();
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
marginTop:
|
|
isMobile || isTablet ? '33px' : isHuge ? '16rem' : 'min(50vh, 20rem)',
|
|
}}
|
|
onClick={() => dispatch(expandSideMenu())}
|
|
className={classNames(
|
|
'absolute z-40 px-4 tablet:px-6 duration-300 w-full h-full tablet:w-auto tablet:h-auto flex justify-center items-center tablet:flex-none',
|
|
!isDesktop && 'cursor-pointer',
|
|
)}
|
|
>
|
|
<div
|
|
className={classNames(
|
|
'px-4 py-2 leading-tight text-base desktop:text-xl border rounded-lg bg-opacity-90 border-secondary bg-alt text-primary animate-float',
|
|
// isMobile ? 'text-base' : 'text-xl',
|
|
)}
|
|
>
|
|
<p className="mb-1 text-xs desktop:text-base text-secondary">OXEN</p>
|
|
<h1>
|
|
Welcome to Oxen.
|
|
<br />
|
|
We know you have questions;
|
|
<br /> here are the answers.
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|