ContentScoreBar
OrganismKural tabanlı içerik kalite skoru. Good ≥70 / Fair ≥40 / Poor <40 tier sistemi. Her kural chip olarak gösterilir, geçen/kalan sayım altında.
Quality score
Good80%
Min 20 charsHas numberHas uppercaseHas keywordMin 5 words
4 / 5 rules passed
const rules = [
{ label: 'Min 20 chars', check: (v) => v.length >= 20, points: 20 },
{ label: 'Has keyword', check: (v) => /react/i.test(v), points: 20, hint: 'Include "React"' },
// ...
];
<ContentScoreBar value={content} rules={rules} label="Quality score" />Good (100%)
Good100%
Rule 1Rule 2Rule 3Rule 4Rule 5
5 / 5 rules passed
Fair (60%)
Fair60%
Rule 1Rule 2Rule 3Rule 4Rule 5
3 / 5 rules passed
Poor (20%)
Poor20%
Rule 1Rule 2Rule 3Rule 4Rule 5
1 / 5 rules passed
// Good tier (score ≥ 70)
<ContentScoreBar value="" rules={allPassRules} label="Good (100%)" />
// Fair tier (40 ≤ score < 70)
<ContentScoreBar value="" rules={halfPassRules} label="Fair (60%)" />
// Poor tier (score < 40)
<ContentScoreBar value="" rules={onePassRules} label="Poor (20%)" />Password strength
Fair50%
Min 8 charsUppercaseNumberSpecial char
2 / 4 rules passed
const rules = [
{ label: 'Min 8 chars', check: (v) => v.length >= 8, points: 25 },
{ label: 'Uppercase', check: (v) => /[A-Z]/.test(v), points: 25 },
{ label: 'Number', check: (v) => /\d/.test(v), points: 25 },
{ label: 'Special char', check: (v) => /[^A-Za-z0-9]/.test(v), points: 25 },
];
<ContentScoreBar value={password} rules={rules} label="Password strength" />