67 lines
2.1 KiB
React
67 lines
2.1 KiB
React
export const TOOLTIP = {
|
|
contentStyle: { background: '#0e1626', border: '1px solid rgba(0,212,255,0.25)', borderRadius: 8 },
|
|
labelStyle: { color: '#8ba3bc' }
|
|
};
|
|
|
|
export const CHART_GRID = { stroke: 'rgba(255,255,255,0.06)' };
|
|
|
|
export function UseCaseHero({ title, badge, subtitle, valueProps, sources }) {
|
|
return (
|
|
<div className="hero-block glass">
|
|
<div className="hero-top">
|
|
<div>
|
|
{badge && <span className="hero-badge">{badge}</span>}
|
|
<h1 className="page-title" style={{ marginBottom: '0.35rem' }}>{title}</h1>
|
|
<p className="page-sub" style={{ marginBottom: 0 }}>{subtitle}</p>
|
|
</div>
|
|
{sources && (
|
|
<div className="source-tags">
|
|
{sources.map(s => <span key={s} className="source-tag">{s}</span>)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
{valueProps?.length > 0 && (
|
|
<div className="value-props">
|
|
{valueProps.map(v => (
|
|
<div key={v.title} className="value-prop">
|
|
<div className="vp-icon">{v.icon}</div>
|
|
<div>
|
|
<div className="vp-title">{v.title}</div>
|
|
<div className="vp-desc">{v.desc}</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function InsightStrip({ items }) {
|
|
if (!items?.length) return null;
|
|
return (
|
|
<div className="insight-strip">
|
|
{items.map((item, i) => (
|
|
<div key={i} className={`insight-item insight-${item.type || 'info'}`}>
|
|
<span className="insight-label">{item.label}</span>
|
|
<span className="insight-text">{item.text}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function ChartGrid({ children, cols = 2 }) {
|
|
return <div className={`chart-grid cols-${cols}`}>{children}</div>;
|
|
}
|
|
|
|
export function ChartCard({ title, subtitle, children, tall }) {
|
|
return (
|
|
<div className={`glass chart-wrap ${tall ? 'chart-tall' : ''}`}>
|
|
<div className="chart-title">{title}</div>
|
|
{subtitle && <div className="chart-subtitle">{subtitle}</div>}
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|