refactor: update SidePeek composition

components/TempDesignSystem/SidePeek/Item/index.tsx

@@ -0,0 +1,39 @@
+"use client"
+
+import { PropsWithChildren } from "react"
+
+import { CloseIcon } from "@/components/Icons"
+import { SidePeekContentProps } from "@/components/TempDesignSystem/SidePeek/types"
+import Title from "@/components/TempDesignSystem/Text/Title"
+
+import Button from "../../Button"
+
+import styles from "./sidePeekItem.module.css"
+
+function SidePeekItem({
+  title,
+  children,
+  isActive = false,
+  onClose,
+}: PropsWithChildren<SidePeekContentProps>) {
+  return isActive ? (
+    <aside className={styles.sidePeekItem}>
+      <header className={styles.header}>
+        <Title color="burgundy" textTransform="uppercase" level="h2" as="h3">
+          {title}
+        </Title>
+        <Button
+          intent="text"
+          onClick={() => {
+            onClose && onClose()
+          }}
+        >
+          <CloseIcon color="burgundy" height={32} width={32} />
+        </Button>
+      </header>
+      {children}
+    </aside>
+  ) : null
+}
+
+export default SidePeekItem