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

Beginnings of Header Editor

Browse Source
This commit is contained in:
Gregory Schier
2023-03-03 13:18:57 -08:00
parent c1be46a539
commit 87c7b3a663
9 changed files with 143 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src-web/components/Dialog.tsx
View File

@@ -1,5 +1,6 @@
import * as D from '@radix-ui/react-dialog';
import classnames from 'classnames';
import { motion } from 'framer-motion';
import React from 'react';
import { IconButton } from './IconButton';
import { HStack, VStack } from './Stacks';
@@ -10,30 +11,44 @@ interface Props {
onOpenChange: (open: boolean) => void;
title: string;
description?: string;
className?: string;
wide?: boolean;
}
export function Dialog({ children, open, onOpenChange, title, description }: Props) {
export function Dialog({
children,
className,
wide,
open,
onOpenChange,
title,
description,
}: Props) {
return (
<D.Root open={open} onOpenChange={onOpenChange}>
<D.Portal container={document.querySelector<HTMLElement>('#radix-portal')}>
<D.Overlay className="fixed inset-0 bg-gray-900 dark:bg-background opacity-80" />
<D.Content
className={classnames(
'fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] bg-gray-50 w-[20rem] max-h-[20rem]',
'p-5 rounded-lg',
)}
>
<D.Close asChild className="ml-auto absolute right-1 top-1">
<IconButton aria-label="Close" icon="x" size="sm" />
</D.Close>
<VStack space={3}>
<HStack items="center" className="pb-3">
<D.Title className="text-xl font-semibold">{title}</D.Title>
</HStack>
{description && <D.Description>{description}</D.Description>}
<div>{children}</div>
</VStack>
</D.Content>
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
<D.Overlay className="fixed inset-0 bg-gray-900 dark:bg-background opacity-80 shadow-lg" />
<D.Content
className={classnames(
className,
'fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] bg-gray-50',
'w-[20rem] max-h-[80vh] p-5 rounded-lg overflow-auto',
wide && 'w-[80vw] max-w-[50rem]',
)}
>
<D.Close asChild className="ml-auto absolute right-1 top-1">
<IconButton aria-label="Close" icon="x" size="sm" />
</D.Close>
<VStack space={3}>
<HStack items="center" className="pb-3">
<D.Title className="text-xl font-semibold">{title}</D.Title>
</HStack>
{description && <D.Description>{description}</D.Description>}
<div>{children}</div>
</VStack>
</D.Content>
</motion.div>
</D.Portal>
</D.Root>
);