forked from cerc-io/snowballtools-base
100 lines
3.0 KiB
TypeScript
100 lines
3.0 KiB
TypeScript
import { ComponentPropsWithoutRef } from 'react';
|
|
import { Link, Outlet, useParams } from 'react-router-dom';
|
|
|
|
import { Heading } from 'components/shared/Heading';
|
|
import { WavyBorder } from 'components/shared/WavyBorder';
|
|
import { Button } from 'components/shared/Button';
|
|
import { CrossIcon } from 'components/shared/CustomIcon';
|
|
import { cn } from 'utils/classnames';
|
|
import * as Dialog from '@radix-ui/react-dialog';
|
|
|
|
export interface CreateProjectLayoutProps
|
|
extends ComponentPropsWithoutRef<'section'> {}
|
|
|
|
export const CreateProjectLayout = ({
|
|
className,
|
|
...props
|
|
}: CreateProjectLayoutProps) => {
|
|
const { orgSlug } = useParams();
|
|
|
|
const closeBtnLink = `/${orgSlug}`;
|
|
|
|
const heading = (
|
|
<Heading
|
|
as="h2"
|
|
className="flex-1 text-xl md:text-2xl font-medium dark:text-foreground"
|
|
>
|
|
Create new project
|
|
</Heading>
|
|
);
|
|
|
|
return (
|
|
<>
|
|
{/* Desktop */}
|
|
<section
|
|
{...props}
|
|
className={cn(
|
|
'dark:bg-background h-full flex-col hidden md:flex',
|
|
className,
|
|
)}
|
|
>
|
|
<div className="sticky top-0">
|
|
<div className="flex px-6 py-4 dark:bg-overlay bg-base-bg items-center gap-4">
|
|
{heading}
|
|
|
|
{/* Cannot save btn as variable since responsive variant don't work with compoundVariant */}
|
|
<Link to={closeBtnLink}>
|
|
<Button
|
|
iconOnly
|
|
variant="primary"
|
|
leftIcon={<CrossIcon />}
|
|
aria-label="close"
|
|
/>
|
|
</Link>
|
|
</div>
|
|
<WavyBorder />
|
|
</div>
|
|
|
|
<section className="px-6 h-full flex-1 py-6 overflow-y-auto">
|
|
<Outlet />
|
|
</section>
|
|
</section>
|
|
|
|
{/* Mobile */}
|
|
{/* Setting modal={false} so even if modal is active on desktop, it doesn't block clicks */}
|
|
<Dialog.Root modal={false} open={true}>
|
|
<Dialog.Portal>
|
|
{/* Not using <Dialog.Overlay> since modal={false} disables it and its content will not show */}
|
|
<div className="bg-base-canvas fixed inset-0 md:hidden overflow-y-auto p-1">
|
|
<Dialog.Content className="min-h-full overflow-hidden rounded-2xl bg-base-bg shadow-card focus:outline-none">
|
|
{/* Heading */}
|
|
<div className="flex px-6 py-4 h-20 items-center gap-4">
|
|
{heading}
|
|
<Dialog.Close asChild>
|
|
<Link to={closeBtnLink}>
|
|
<Button
|
|
iconOnly
|
|
variant="tertiary"
|
|
leftIcon={<CrossIcon />}
|
|
aria-label="close"
|
|
size="sm"
|
|
/>
|
|
</Link>
|
|
</Dialog.Close>
|
|
</div>
|
|
|
|
{/* Border */}
|
|
<WavyBorder />
|
|
|
|
{/* Page content */}
|
|
<div className="px-4 py-6">
|
|
<Outlet />
|
|
</div>
|
|
</Dialog.Content>
|
|
</div>
|
|
</Dialog.Portal>
|
|
</Dialog.Root>
|
|
</>
|
|
);
|
|
};
|