45 lines
1.3 KiB
TypeScript
45 lines
1.3 KiB
TypeScript
'use client'
|
|
|
|
import React from 'react'
|
|
|
|
interface ChartCardProps {
|
|
title: string
|
|
subtitle?: string
|
|
children: React.ReactNode
|
|
className?: string
|
|
}
|
|
|
|
const ChartCard: React.FC<ChartCardProps> = ({
|
|
title,
|
|
subtitle,
|
|
children,
|
|
className = ''
|
|
}) => {
|
|
const interSemiboldStyle = { fontFamily: 'Inter, sans-serif', fontWeight: 600 }
|
|
const interRegularStyle = { fontFamily: 'Inter, sans-serif', fontWeight: 400 }
|
|
|
|
return (
|
|
<div className={`bg-[#161824] rounded-[20px] p-6 ${className}`}>
|
|
<div className="flex items-start justify-between mb-6">
|
|
<div>
|
|
<h3 style={interSemiboldStyle} className="text-white text-sm mb-1">{title}</h3>
|
|
{subtitle && (
|
|
<p style={interRegularStyle} className="text-[#71717a] text-xs">{subtitle}</p>
|
|
)}
|
|
</div>
|
|
<div className="w-4 h-4">
|
|
<svg className="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="h-[200px]">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default ChartCard
|