starred/yaak-mountain-loop
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-03-24 02:11:10 +01:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Floating sidebar

Browse Source
This commit is contained in:
Gregory Schier
2023-03-26 10:09:28 -07:00
parent 56a30aa7c4
commit 9eb0fcd441
9 changed files with 172 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src-web/components/core/Dialog.tsx
View File

@@ -1,7 +1,7 @@
import classnames from 'classnames';
import { motion } from 'framer-motion';
import type { ReactNode } from 'react';
import { Portal } from '../Portal';
import { Overlay } from '../Overlay';
import { IconButton } from './IconButton';
import { HStack, VStack } from './Stacks';
@@ -25,43 +25,38 @@ export function Dialog({
description,
}: Props) {
return (
<Portal name="dialog">
{open && (
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
<div
aria-hidden
onClick={() => onOpenChange(false)}
className="fixed inset-0 bg-gray-600/60 dark:bg-black/50"
/>
<div>
<div
className={classnames(
className,
'absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] bg-gray-100',
'w-[20rem] max-h-[80vh] p-5 rounded-lg overflow-auto',
'dark:border border-gray-200 shadow-md shadow-black/10',
wide && 'w-[80vw] max-w-[50rem]',
)}
>
<IconButton
onClick={() => onOpenChange(false)}
title="Close dialog"
aria-label="Close"
icon="x"
size="sm"
className="ml-auto absolute right-1 top-1"
/>
<VStack space={3}>
<HStack alignItems="center" className="pb-3">
<div className="text-xl font-semibold">{title}</div>
</HStack>
{description && <div>{description}</div>}
<div>{children}</div>
</VStack>
</div>
</div>
</motion.div>
)}
</Portal>
<Overlay open={open} onClick={() => onOpenChange(false)} portalName="dialog">
<div className="absolute inset-0 flex items-center justify-center pointer-events-none">
<div className="pointer-events-auto">
<motion.div
initial={{ top: 5, scale: 0.97 }}
animate={{ top: 0, scale: 1 }}
className={classnames(
className,
'relative bg-gray-100 pointer-events-auto',
'w-[20rem] max-h-[80vh] p-5 rounded-lg overflow-auto',
'dark:border border-gray-200 shadow-md shadow-black/10',
wide && 'w-[80vw] max-w-[50rem]',
)}
>
<IconButton
onClick={() => onOpenChange(false)}
title="Close dialog"
aria-label="Close"
icon="x"
size="sm"
className="ml-auto absolute right-1 top-1"
/>
<VStack space={3}>
<HStack alignItems="center" className="pb-3">
<div className="text-xl font-semibold">{title}</div>
</HStack>
{description && <div>{description}</div>}
<div>{children}</div>
</VStack>
</motion.div>
</div>
</div>
</Overlay>
);
}