refactor: update SidePeek composition

2024-08-12 13:27:03 +02:00
parent 04eb3c6d94
commit 68694ef914
7 changed files with 77 additions and 105 deletions
@@ -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
@@ -0,0 +1,27 @@
+.sidePeekItem {
+  display: grid;
+  grid-template-rows: min-content auto;
+  gap: var(--Spacing-x4);
+  height: 100%;
+}
+
+.content>* {
+  padding: var(--Spacing-x3) var(--Spacing-x2);
+}
+
+.header {
+  display: flex;
+  justify-content: flex-end;
+  border-bottom: 1px solid var(--Base-Border-Subtle);
+  align-items: center;
+}
+
+.header:has(> h2) {
+  justify-content: space-between;
+}
+
+@media screen and (min-width: 1367px) {
+  .content>* {
+    padding: var(--Spacing-x4);
+  }
+}