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.
37 lines
1.3 KiB
37 lines
1.3 KiB
import classNames from "classnames"; |
|
import { ReactNode } from "react"; |
|
import { useTranslation } from "react-i18next"; |
|
|
|
import { useInternalOverlayRouter } from "@/hooks/useOverlayRouter"; |
|
|
|
interface MobilePositionProps { |
|
children?: ReactNode; |
|
className?: string; |
|
} |
|
|
|
export function OverlayMobilePosition(props: MobilePositionProps) { |
|
const router = useInternalOverlayRouter("hello world :)"); |
|
const { t } = useTranslation(); |
|
|
|
return ( |
|
<div |
|
className={classNames([ |
|
"pointer-events-auto px-4 pb-6 z-10 bottom-0 origin-top-left inset-x-0 absolute overflow-hidden max-h-[calc(100vh-1.5rem)] grid grid-rows-[minmax(0,1fr),auto]", |
|
props.className, |
|
])} |
|
> |
|
{props.children} |
|
|
|
{/* Close button */} |
|
<button |
|
className="w-full text-video-context-type-main bg-video-context-background z-10 relative hover:bg-video-context-border active:scale-95 rounded-2xl pointer-events-auto transition-all duration-100 flex justify-center items-center py-3 mt-3 font-bold border border-video-context-border hover:text-white" |
|
type="button" |
|
onClick={() => router.close()} |
|
> |
|
{t("overlays.close")} |
|
</button> |
|
{/* Gradient to hide the progress */} |
|
<div className="pointer-events-none absolute z-0 bottom-0 left-0 w-full h-32 bg-gradient-to-t from-black to-transparent" /> |
|
</div> |
|
); |
|
}
|
|
|