refactor: reorganize component organization

components/TempDesignSystem/SidePeek/Content/content.module.css

@@ -0,0 +1,25 @@
+.content {
+  display: grid;
+  grid-template-rows: min-content auto;
+  gap: var(--Spacing-x4);
+  height: 100%;
+  padding: var(--Spacing-x4) var(--Spacing-x5);
+}
+
+.header {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.header:has(> h2) {
+  justify-content: space-between;
+}
+
+.closeBtn {
+  border: none;
+  background-color: transparent;
+  display: flex;
+  align-items: center;
+  padding: 0;
+  cursor: pointer;
+}

components/TempDesignSystem/SidePeek/Content/index.tsx

@@ -0,0 +1,47 @@
+"use client"
+
+import { Children, PropsWithChildren } from "react"
+
+import { CloseIcon } from "@/components/Icons"
+import Title from "@/components/TempDesignSystem/Text/Title"
+
+import styles from "./content.module.css"
+
+export default function Content({
+  title,
+  children,
+  contentKey,
+  isActive = false,
+  onClose,
+}: PropsWithChildren<{
+  title?: string
+  contentKey: string
+  isActive?: boolean
+  onClose?: () => void
+}>) {
+  return isActive ? (
+    <aside className={styles.content}>
+      <header className={styles.header}>
+        {title && (
+          <Title
+            color="burgundy"
+            textTransform="uppercase"
+            level={"h2"}
+            as={"h3"}
+          >
+            {title}
+          </Title>
+        )}
+        <button
+          onClick={() => {
+            onClose && onClose()
+          }}
+          className={styles.closeBtn}
+        >
+          <CloseIcon color="burgundy" height={32} width={32} />
+        </button>
+      </header>
+      {children}
+    </aside>
+  ) : null
+}