91 lines
2.3 KiB
TypeScript
91 lines
2.3 KiB
TypeScript
import React from "react";
|
|
import * as Stiches from "@stitches/react";
|
|
import { keyframes } from "@stitches/react";
|
|
import { blackA } from "@radix-ui/colors";
|
|
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
|
import { styled } from "../stitches.config";
|
|
|
|
const overlayShow = keyframes({
|
|
"0%": { opacity: 0.01 },
|
|
"100%": { opacity: 1 },
|
|
});
|
|
|
|
const contentShow = keyframes({
|
|
"0%": { opacity: 0.01 },
|
|
"100%": { opacity: 1 },
|
|
});
|
|
const StyledOverlay = styled(DialogPrimitive.Overlay, {
|
|
zIndex: 10000,
|
|
backgroundColor: blackA.blackA9,
|
|
position: "fixed",
|
|
inset: 0,
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
display: "grid",
|
|
placeItems: "center",
|
|
overflowY: "auto",
|
|
"@media (prefers-reduced-motion: no-preference)": {
|
|
animation: `${overlayShow} 250ms cubic-bezier(0.16, 1, 0.3, 1)`,
|
|
},
|
|
".dark &": {
|
|
backgroundColor: blackA.blackA11,
|
|
},
|
|
});
|
|
|
|
const StyledContent = styled(DialogPrimitive.Content, {
|
|
zIndex: 1000,
|
|
backgroundColor: "$mauve2",
|
|
color: "$mauve12",
|
|
borderRadius: "$md",
|
|
position: "relative",
|
|
mb: "15%",
|
|
boxShadow:
|
|
"0px 10px 38px -5px rgba(22, 23, 24, 0.25), 0px 10px 20px -5px rgba(22, 23, 24, 0.2)",
|
|
width: "90vw",
|
|
maxWidth: "450px",
|
|
// maxHeight: "85vh",
|
|
padding: 25,
|
|
"@media (prefers-reduced-motion: no-preference)": {
|
|
animation: `${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
|
|
},
|
|
"&:focus": { outline: "none" },
|
|
".dark &": {
|
|
backgroundColor: "$mauve5",
|
|
boxShadow:
|
|
"0px 10px 38px 0px rgba(0, 0, 0, 0.85), 0px 10px 20px 0px rgba(0, 0, 0, 0.6)",
|
|
},
|
|
});
|
|
|
|
const Content: React.FC<{ css?: Stiches.CSS }> = ({ css, children }) => {
|
|
return (
|
|
<StyledOverlay>
|
|
<StyledContent css={css}>{children}</StyledContent>
|
|
</StyledOverlay>
|
|
);
|
|
};
|
|
|
|
const StyledTitle = styled(DialogPrimitive.Title, {
|
|
margin: 0,
|
|
fontWeight: 500,
|
|
color: "$mauve12",
|
|
fontSize: 17,
|
|
});
|
|
|
|
const StyledDescription = styled(DialogPrimitive.Description, {
|
|
margin: "10px 0 10px",
|
|
color: "$mauve11",
|
|
fontSize: 15,
|
|
lineHeight: 1.5,
|
|
});
|
|
|
|
// Exports
|
|
export const Dialog = styled(DialogPrimitive.Root);
|
|
export const DialogTrigger = DialogPrimitive.Trigger;
|
|
export const DialogContent = Content;
|
|
export const DialogTitle = StyledTitle;
|
|
export const DialogDescription = StyledDescription;
|
|
export const DialogClose = DialogPrimitive.Close;
|
|
export const DialogPortal = DialogPrimitive.Portal;
|