75 lines
1.7 KiB
TypeScript
75 lines
1.7 KiB
TypeScript
import React from 'react'
|
|
|
|
type ContentBlockVariant = 'green' | 'gray' | 'blue' | 'purple' | 'yellow' | 'red' | 'orange'
|
|
|
|
interface ContentBlockProps {
|
|
title: string
|
|
variant: ContentBlockVariant
|
|
children: React.ReactNode
|
|
className?: string
|
|
titleActions?: React.ReactNode
|
|
}
|
|
|
|
const variantStyles: Record<ContentBlockVariant, { bg: string, border: string, title: string }> = {
|
|
green: {
|
|
bg: 'bg-green-50',
|
|
border: 'border-green-200',
|
|
title: 'text-green-900'
|
|
},
|
|
gray: {
|
|
bg: 'bg-gray-50',
|
|
border: 'border-gray-200',
|
|
title: 'text-gray-900'
|
|
},
|
|
blue: {
|
|
bg: 'bg-blue-50',
|
|
border: 'border-blue-200',
|
|
title: 'text-blue-900'
|
|
},
|
|
purple: {
|
|
bg: 'bg-purple-50',
|
|
border: 'border-purple-200',
|
|
title: 'text-purple-900'
|
|
},
|
|
yellow: {
|
|
bg: 'bg-yellow-50',
|
|
border: 'border-yellow-200',
|
|
title: 'text-yellow-900'
|
|
},
|
|
red: {
|
|
bg: 'bg-red-50',
|
|
border: 'border-red-200',
|
|
title: 'text-red-900'
|
|
},
|
|
orange: {
|
|
bg: 'bg-orange-50',
|
|
border: 'border-orange-200',
|
|
title: 'text-orange-900'
|
|
}
|
|
}
|
|
|
|
export const ContentBlock: React.FC<ContentBlockProps> = ({
|
|
title,
|
|
variant,
|
|
children,
|
|
className = '',
|
|
titleActions
|
|
}) => {
|
|
const styles = variantStyles[variant]
|
|
|
|
return (
|
|
<div className={`${styles.bg} rounded-lg p-4 border ${styles.border} ${className}`}>
|
|
<div className="flex justify-between items-center mb-3">
|
|
<h3 className={`font-semibold ${styles.title} text-left`}>
|
|
{title}
|
|
</h3>
|
|
{titleActions && (
|
|
<div className="flex items-center gap-2">
|
|
{titleActions}
|
|
</div>
|
|
)}
|
|
</div>
|
|
{children}
|
|
</div>
|
|
)
|
|
} |