internal corporate restructuring

src/components/commonComponents/Window.astro

@@ -0,0 +1,89 @@
+---
+const { title, showClose, maxWidth, hideByDefault, customClass, offset } =
+	Astro.props;
+
+const randomID = customClass || Math.random().toString().replace(".", "");
+---
+
+<style define:vars={{ maxWidth, offset }}>
+	.window {
+		width: var(--maxWidth);
+		top: var(--offset);
+		left: var(--offset);
+		position: absolute;
+	}
+	.title-bar {
+		.title-bar-text {
+			margin-top: 2.5px !important;
+		}
+		display: flex;
+		justify-content: space-between;
+		background-color: #313244;
+		border-radius: 15px 15px 0 0;
+		padding: 9px 18px 9px 18px;
+	}
+	svg {
+		fill: var(--text);
+		margin: 0;
+		padding: 0;
+		height: 24px !important;
+	}
+	#close {
+		background: none;
+		color: inherit;
+		border: none;
+		padding: 0;
+		margin: 0;
+		height: 24px !important;
+		font: inherit;
+		cursor: pointer;
+		outline: inherit;
+	}
+	.window-body {
+		padding: 20px !important;
+		background-color: #1e1e2e;
+		border-radius: 0 0 20px 20px;
+	}
+	@media (pointer: coarse) {
+		.window {
+			position: absolute;
+			top: 0px;
+			left: 0px;
+			margin: 5%;
+			width: 90%;
+		}
+	}
+</style>
+
+<div
+	class="background"
+	id={`window-${randomID}`}
+	class="window"
+	style={hideByDefault && "display: none;"}
+>
+	<div class="window" style="max-width: 100%">
+		<div class="title-bar">
+			<div class="title-bar-text">{title}</div>
+			{
+				showClose && (
+					<button
+						id="close"
+						aria-label="Close"
+						onclick={`document.querySelector("#window-${randomID}").style.display = "none";`}
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							height="24px"
+							viewBox="0 -960 960 960"
+						>
+							<path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" />
+						</svg>
+					</button>
+				)
+			}
+		</div>
+		<div class="window-body">
+			<slot />
+		</div>
+	</div>
+</div>