144 lines
4.2 KiB
TypeScript
144 lines
4.2 KiB
TypeScript
import React from 'react';
|
|
|
|
interface ComplianceItem {
|
|
label: string;
|
|
checked: boolean;
|
|
description?: string;
|
|
}
|
|
|
|
interface ComplianceChecklistProps {
|
|
items: ComplianceItem[];
|
|
title?: string;
|
|
}
|
|
|
|
export function ComplianceChecklist({ items, title = 'TCPA Compliance Checklist' }: ComplianceChecklistProps) {
|
|
const checkedCount = items.filter((item) => item.checked).length;
|
|
const totalCount = items.length;
|
|
const percentage = Math.round((checkedCount / totalCount) * 100);
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
padding: 'var(--spacing-6)',
|
|
background: 'var(--color-background-secondary)',
|
|
borderRadius: 'var(--border-radius-lg)',
|
|
border: `1px solid var(--color-border-secondary)`,
|
|
}}
|
|
>
|
|
<div style={{ marginBottom: 'var(--spacing-4)' }}>
|
|
<h3
|
|
style={{
|
|
fontSize: 'var(--font-size-lg)',
|
|
fontWeight: 600,
|
|
color: 'var(--color-text-primary)',
|
|
marginBottom: 'var(--spacing-2)',
|
|
}}
|
|
>
|
|
{title}
|
|
</h3>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-3)' }}>
|
|
<div
|
|
style={{
|
|
flex: 1,
|
|
height: '8px',
|
|
background: 'var(--color-background-tertiary)',
|
|
borderRadius: '4px',
|
|
overflow: 'hidden',
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
height: '100%',
|
|
background: percentage === 100 ? 'var(--color-success)' : 'var(--color-warning)',
|
|
width: `${percentage}%`,
|
|
transition: 'width 0.3s ease',
|
|
}}
|
|
/>
|
|
</div>
|
|
<span
|
|
style={{
|
|
fontSize: 'var(--font-size-sm)',
|
|
fontWeight: 600,
|
|
color: 'var(--color-text-primary)',
|
|
}}
|
|
>
|
|
{checkedCount}/{totalCount}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-3)' }}>
|
|
{items.map((item, index) => (
|
|
<div
|
|
key={index}
|
|
style={{
|
|
display: 'flex',
|
|
gap: 'var(--spacing-3)',
|
|
alignItems: 'flex-start',
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
width: '20px',
|
|
height: '20px',
|
|
borderRadius: '50%',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
flexShrink: 0,
|
|
marginTop: '2px',
|
|
background: item.checked ? 'var(--color-success)' : 'var(--color-background-tertiary)',
|
|
color: item.checked ? 'white' : 'var(--color-text-tertiary)',
|
|
fontSize: 'var(--font-size-xs)',
|
|
fontWeight: 700,
|
|
}}
|
|
>
|
|
{item.checked ? '✓' : ''}
|
|
</div>
|
|
<div style={{ flex: 1 }}>
|
|
<div
|
|
style={{
|
|
fontSize: 'var(--font-size-sm)',
|
|
fontWeight: 500,
|
|
color: item.checked ? 'var(--color-text-primary)' : 'var(--color-text-tertiary)',
|
|
textDecoration: item.checked ? 'none' : 'none',
|
|
}}
|
|
>
|
|
{item.label}
|
|
</div>
|
|
{item.description && (
|
|
<div
|
|
style={{
|
|
fontSize: 'var(--font-size-xs)',
|
|
color: 'var(--color-text-tertiary)',
|
|
marginTop: 'var(--spacing-1)',
|
|
}}
|
|
>
|
|
{item.description}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{percentage === 100 && (
|
|
<div
|
|
style={{
|
|
marginTop: 'var(--spacing-4)',
|
|
padding: 'var(--spacing-3)',
|
|
background: '#d1fae5',
|
|
color: '#065f46',
|
|
borderRadius: 'var(--border-radius-md)',
|
|
fontSize: 'var(--font-size-sm)',
|
|
fontWeight: 600,
|
|
textAlign: 'center',
|
|
}}
|
|
>
|
|
✓ All compliance requirements met
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|