76 lines
1.7 KiB
TypeScript
76 lines
1.7 KiB
TypeScript
// frontend\src\components\ui\Card.tsx
|
|
|
|
'use client'
|
|
|
|
import clsx from 'clsx'
|
|
import type { PropsWithChildren, ReactNode } from 'react'
|
|
|
|
type CardProps = {
|
|
header?: ReactNode
|
|
footer?: ReactNode
|
|
grayBody?: boolean
|
|
grayFooter?: boolean
|
|
edgeToEdgeMobile?: boolean
|
|
well?: boolean
|
|
noBodyPadding?: boolean
|
|
className?: string
|
|
bodyClassName?: string
|
|
}
|
|
|
|
export default function Card({
|
|
header,
|
|
footer,
|
|
grayBody = false,
|
|
grayFooter = false,
|
|
edgeToEdgeMobile = false,
|
|
well = false,
|
|
noBodyPadding = false,
|
|
className,
|
|
bodyClassName,
|
|
children,
|
|
}: PropsWithChildren<CardProps>) {
|
|
const isWell = well
|
|
|
|
return (
|
|
<div
|
|
className={clsx(
|
|
'overflow-hidden',
|
|
edgeToEdgeMobile ? 'sm:rounded-lg' : 'rounded-lg',
|
|
isWell
|
|
? 'bg-gray-50 dark:bg-gray-800 shadow-none'
|
|
: 'bg-white shadow-sm dark:bg-gray-800 dark:shadow-none dark:outline dark:-outline-offset-1 dark:outline-white/10',
|
|
className
|
|
)}
|
|
>
|
|
{header && (
|
|
<div className="shrink-0 px-4 py-5 sm:px-6 border-b border-gray-200 dark:border-white/10">
|
|
{header}
|
|
</div>
|
|
)}
|
|
|
|
<div
|
|
className={clsx(
|
|
'min-h-0', // ✅ wichtig bei flex layouts
|
|
noBodyPadding ? 'p-0' : 'px-4 py-5 sm:p-6',
|
|
grayBody && 'bg-gray-50 dark:bg-gray-800',
|
|
bodyClassName
|
|
)}
|
|
>
|
|
{children}
|
|
</div>
|
|
|
|
{footer && (
|
|
<div
|
|
className={clsx(
|
|
'shrink-0 px-4 py-4 sm:px-6', // ✅ shrink-0
|
|
grayFooter && 'bg-gray-50 dark:bg-gray-800/50',
|
|
'border-t border-gray-200 dark:border-white/10'
|
|
)}
|
|
>
|
|
{footer}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|