migrate to radix ui, make header draft

src/shared/ui/Modal/model/Modal.d.ts

@@ -1,3 +1,8 @@
-import type { ModalProps } from "react-bootstrap/Modal"
+import type { Dialog } from "@radix-ui/themes"
+import type { ComponentProps, ReactNode } from "react"
 
-export interface IModalProps extends ModalProps {}
+export interface IModalProps extends ComponentProps<typeof Dialog.Root> {
+	title?: ReactNode
+	description?: ReactNode
+	children?: ReactNode
+}

src/shared/ui/Modal/ui/Modal.module.scss

@@ -0,0 +1,86 @@
+.overlay {
+	position: fixed;
+	inset: 0;
+	background-color: rgba(0, 0, 0, 0.5);
+	z-index: 100;
+	animation: overlayShow 0.15s ease;
+}
+
+.content {
+	position: fixed;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	max-width: 32rem;
+	width: calc(100% - 2rem);
+	max-height: 85vh;
+	padding: 1.5rem;
+	background-color: white;
+	border-radius: 0.75rem;
+	box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+	z-index: 101;
+	animation: contentShow 0.15s ease;
+
+	&:focus {
+		outline: none;
+	}
+
+	@media (prefers-color-scheme: dark) {
+		background-color: #1f1f1f;
+	}
+}
+
+.title {
+	margin-bottom: 0.5rem;
+	font-size: 1.125rem;
+	font-weight: 600;
+}
+
+.description {
+	margin-bottom: 1rem;
+	font-size: 0.875rem;
+	color: #6b7280;
+}
+
+.close {
+	position: absolute;
+	top: 1rem;
+	right: 1rem;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 0.25rem;
+	background: transparent;
+	border-radius: 0.25rem;
+	color: #6b7280;
+	cursor: pointer;
+
+	&:hover {
+		background-color: #f3f4f6;
+	}
+
+	&:focus-visible {
+		outline: 2px solid var(--purple-400);
+		outline-offset: 2px;
+	}
+}
+
+@keyframes overlayShow {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+@keyframes contentShow {
+	from {
+		opacity: 0;
+		transform: translate(-50%, -48%) scale(0.96);
+	}
+	to {
+		opacity: 1;
+		transform: translate(-50%, -50%) scale(1);
+	}
+}

src/shared/ui/Modal/ui/Modal.tsx

@@ -3,11 +3,26 @@
 import type { IModalProps } from "../model/Modal.d"
 import type { JSX } from "react"
 
+import { Dialog } from "@radix-ui/themes"
 import { forwardRef } from "react"
-import BootstrapModal from "react-bootstrap/Modal"
 
 export const Modal = forwardRef<HTMLDivElement, IModalProps>(
-	(props, ref): JSX.Element => <BootstrapModal ref={ref} {...props} />,
+	({ title, description, children, ...props }, ref): JSX.Element => (
+		<Dialog.Root {...props}>
+			<Dialog.Content ref={ref}>
+				{title && <Dialog.Title>{title}</Dialog.Title>}
+				{description && (
+					<Dialog.Description size="2" mb="4">
+						{description}
+					</Dialog.Description>
+				)}
+				{children}
+			</Dialog.Content>
+		</Dialog.Root>
+	),
 )
 
 Modal.displayName = "Modal"
+
+export const ModalTrigger = Dialog.Trigger
+ModalTrigger.displayName = "ModalTrigger"