Files
web/components/TempDesignSystem/SidePeek/Item/index.tsx
2024-08-16 13:30:09 +02:00

39 lines
967 B
TypeScript

"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