mirror of
https://github.com/CompassConnections/Compass.git
synced 2026-08-02 11:24:55 -04:00
0136f1f386
- Introduced `capture-search.mjs` script for end-to-end mobile search flow captures. - Added `SearchDemo` scene as a Remotion composition for the home-page hero clip. - Integrated dynamic video selection based on theme in `home/search-demo.tsx` component. - Included `fetch-media.mjs` script for fetching demo assets during build. - Enabled optional email verification bypass for local captures (`dev-flags.ts`). - Updated related documentation and scripts for media creation and deployment.
67 lines
2.4 KiB
TypeScript
67 lines
2.4 KiB
TypeScript
import {Dialog, Transition} from '@headlessui/react'
|
|
import clsx from 'clsx'
|
|
import {Fragment, ReactNode} from 'react'
|
|
// From https://tailwindui.com/components/application-ui/overlays/modals
|
|
export function RightModal(props: {
|
|
children: ReactNode
|
|
open: boolean
|
|
setOpen: (open: boolean) => void
|
|
|
|
noAutoFocus?: boolean
|
|
className?: string
|
|
}) {
|
|
const {children, open, setOpen, className, noAutoFocus} = props
|
|
|
|
return (
|
|
<Transition.Root show={open} as={Fragment}>
|
|
<Dialog
|
|
className="text-ink-1000 relative z-50"
|
|
onClose={setOpen}
|
|
// prevent modal from re-opening from bubbled event if Modal is child of the open button
|
|
onClick={(e: any) => e.stopPropagation()}
|
|
>
|
|
<Transition.Child
|
|
as={Fragment}
|
|
enter="ease-linear duration-150"
|
|
enterFrom="opacity-0"
|
|
enterTo="opacity-100"
|
|
leave="ease-linear duration-75"
|
|
leaveFrom="opacity-100"
|
|
leaveTo="opacity-0"
|
|
>
|
|
{/* background cover */}
|
|
<div
|
|
className="bg-canvas-100/60 fixed inset-0 backdrop-blur-lg"
|
|
// Real blur rather than a heavier tint: a flat scrim just dims the page, while
|
|
// defocusing it pushes it behind the dialog and makes the modal the only thing
|
|
// the eye can resolve. The tint drops from /75 so the blur is actually visible
|
|
// through it — at 75% opacity the backdrop-filter is almost entirely masked.
|
|
/>
|
|
</Transition.Child>
|
|
|
|
<Transition.Child
|
|
as={Fragment}
|
|
enter="ease-in sm:ease-out duration-150"
|
|
enterFrom="opacity-0 sm:scale-95"
|
|
enterTo="opacity-100 sm:scale-100"
|
|
leave="ease-out sm:ease-in duration-75"
|
|
leaveFrom="opacity-100 sm:scale-100"
|
|
leaveTo="opacity-0 sm:scale-95"
|
|
>
|
|
<div className="fixed inset-0 p-0">
|
|
<div className={clsx('flex h-full flex-row justify-end overflow-hidden')}>
|
|
<Dialog.Panel className={clsx('grow-y transform transition-all ', className)}>
|
|
{/* Hack to capture focus b/c headlessui dialog always focuses first element
|
|
and we don't want it to.
|
|
*/}
|
|
{noAutoFocus && <div tabIndex={0} />}
|
|
{children}
|
|
</Dialog.Panel>
|
|
</div>
|
|
</div>
|
|
</Transition.Child>
|
|
</Dialog>
|
|
</Transition.Root>
|
|
)
|
|
}
|