37 lines
1.0 KiB
TypeScript
37 lines
1.0 KiB
TypeScript
import { Button } from '@/components/button'
|
|
|
|
import AngleRightIcon from '@/public/angle-right.svg'
|
|
|
|
interface SectionWraperProps {
|
|
title: string
|
|
showAllButton?: boolean
|
|
children: React.ReactNode
|
|
childrenClass?: string
|
|
}
|
|
|
|
export const SectionWrapper = ({
|
|
title,
|
|
showAllButton,
|
|
children,
|
|
childrenClass,
|
|
}: SectionWraperProps) => (
|
|
<section className="w-full flex flex-col px-0 xs:px-2 sm:px-4 md:px-6 py-0 sm:py-2 md:py-4 bg-white dark:bg-midnight-slate rounded-xl xs:rounded-2xl sm:rounded-3xl">
|
|
<div className="flex items-center justify-between px-4 py-4 sm:py-6 gap-2">
|
|
<h1
|
|
className={'text-black dark:text-white text-xl sm:text-3xl font-bold'}
|
|
>
|
|
{title}
|
|
</h1>
|
|
{showAllButton && (
|
|
<Button
|
|
label="All"
|
|
variant="secondary"
|
|
icon={<AngleRightIcon className="fill-black dark:fill-white" />}
|
|
className="hidden sm:flex h-9"
|
|
/>
|
|
)}
|
|
</div>
|
|
<div className={childrenClass}>{children}</div>
|
|
</section>
|
|
)
|