| 1 |
import { __ } from "@wordpress/i18n"; |
| 2 |
import React from "react"; |
| 3 |
|
| 4 |
import { Sparkline } from "../../analytics/components/common/charts"; |
| 5 |
import { I } from "../../analytics/components/common/icons"; |
| 6 |
import { Badge, Card, KpiCard } from "../../analytics/components/common/ui"; |
| 7 |
import { decline, FauxBtn } from "./primitives"; |
| 8 |
|
| 9 |
/** |
| 10 |
* Inert mock of Pro's Stale Content screen |
| 11 |
* (betterdocs-pro/react-src/admin/content-intelligence/views/StaleView.js): |
| 12 |
* the "how this is scored" banner, the three KPIs, and the ranked table where |
| 13 |
* every row shows its staleness bar, its view trend, and the reason flags that |
| 14 |
* produced the score. |
| 15 |
*/ |
| 16 |
|
| 17 |
// The reason flags Pro's stale scanner emits, with Pro's colour mapping. |
| 18 |
const FLAGS = { |
| 19 |
age: { label: __( "Not updated 8+ months", "betterdocs" ), color: "amber" }, |
| 20 |
age6: { label: __( "Not updated 6+ months", "betterdocs" ), color: "amber" }, |
| 21 |
decline: { label: __( "Declining views", "betterdocs" ), color: "red" }, |
| 22 |
contradict: { label: __( "Contradicts newer doc", "betterdocs" ), color: "purple" }, |
| 23 |
version: { label: __( "Outdated version", "betterdocs" ), color: "amber" }, |
| 24 |
broken: { label: __( "Broken link", "betterdocs" ), color: "red" } |
| 25 |
}; |
| 26 |
|
| 27 |
const ROWS = [ |
| 28 |
{ t: "Installing BetterDocs on WordPress Multisite", cat: "Getting Started", score: 91, updated: "12 Mar 2024", flags: [ "age", "version", "decline" ] }, |
| 29 |
{ t: "Configuring Live Search Filters", cat: "Search", score: 84, updated: "28 Apr 2024", flags: [ "age", "decline" ] }, |
| 30 |
{ t: "Legacy Shortcode Reference", cat: "Reference", score: 77, updated: "05 Jun 2024", flags: [ "contradict", "broken" ] }, |
| 31 |
{ t: "Setting Up the FAQ Builder", cat: "FAQ", score: 63, updated: "19 Sep 2024", flags: [ "age6", "decline" ] }, |
| 32 |
{ t: "Importing Docs from Other Tools", cat: "Migration", score: 51, updated: "02 Nov 2024", flags: [ "age6" ] } |
| 33 |
]; |
| 34 |
|
| 35 |
function StalenessScore( { score } ) { |
| 36 |
const color = score >= 75 ? "#ef4444" : score >= 50 ? "#f59e0b" : "#eab308"; |
| 37 |
return ( |
| 38 |
<div className="bd-cit-staleness"> |
| 39 |
<div className="bd-cit-staleness-track"> |
| 40 |
<div className="bd-cit-staleness-fill" style={ { width: `${ score }%`, background: color } } /> |
| 41 |
</div> |
| 42 |
<span className="bda-num bda-strong" style={ { color } }>{ score }</span> |
| 43 |
</div> |
| 44 |
); |
| 45 |
} |
| 46 |
|
| 47 |
export default function StaleMock() { |
| 48 |
return ( |
| 49 |
<div className="bda-stack-sm"> |
| 50 |
<div className="bda-banner"> |
| 51 |
<div className="bda-banner-ico"><I.Clock size={ 18 } /></div> |
| 52 |
<div className="bd-cit-banner-copy"> |
| 53 |
<div className="bd-cit-banner-title">{ __( "Docs losing freshness", "betterdocs" ) }</div> |
| 54 |
<div className="bd-cit-banner-sub"> |
| 55 |
{ __( "Scored on age, declining engagement, version references, and broken links. Runs nightly — no API key required.", "betterdocs" ) } |
| 56 |
</div> |
| 57 |
</div> |
| 58 |
</div> |
| 59 |
|
| 60 |
<div className="bda-kpi-grid cols-3"> |
| 61 |
<KpiCard label={ __( "Stale Docs", "betterdocs" ) } value="26" icon={ <I.Clock size={ 16 } /> } color="#f59e0b" /> |
| 62 |
<KpiCard label={ __( "Critical", "betterdocs" ) } value="5" icon={ <I.AlertTriangle size={ 16 } /> } color="#ef4444" /> |
| 63 |
<KpiCard label={ __( "Avg. Staleness", "betterdocs" ) } value="64 / 100" icon={ <I.TrendingUp size={ 16 } /> } color="#8b5cf6" /> |
| 64 |
</div> |
| 65 |
|
| 66 |
<Card padded={ false } title={ __( "Docs by staleness", "betterdocs" ) }> |
| 67 |
<table className="bda-table"> |
| 68 |
<thead> |
| 69 |
<tr> |
| 70 |
<th>{ __( "Doc", "betterdocs" ) }</th> |
| 71 |
<th style={ { width: 150 } }>{ __( "Staleness", "betterdocs" ) }</th> |
| 72 |
<th>{ __( "Last updated", "betterdocs" ) }</th> |
| 73 |
<th style={ { width: 90 } }>{ __( "Trend", "betterdocs" ) }</th> |
| 74 |
<th>{ __( "Reason", "betterdocs" ) }</th> |
| 75 |
<th className="bda-t-right">{ __( "Actions", "betterdocs" ) }</th> |
| 76 |
</tr> |
| 77 |
</thead> |
| 78 |
<tbody> |
| 79 |
{ ROWS.map( ( r, i ) => ( |
| 80 |
<tr key={ i }> |
| 81 |
<td> |
| 82 |
<div className="bda-title-cell">{ r.t }</div> |
| 83 |
<div className="bd-cit-row-meta">{ r.cat }</div> |
| 84 |
</td> |
| 85 |
<td><StalenessScore score={ r.score } /></td> |
| 86 |
<td className="bd-cit-row-meta">{ r.updated }</td> |
| 87 |
<td><Sparkline points={ decline( 120 - i * 12 ) } color="#ef4444" width={ 74 } height={ 26 } /></td> |
| 88 |
<td> |
| 89 |
<div className="bd-cit-flags"> |
| 90 |
{ r.flags.map( ( f ) => ( |
| 91 |
<Badge key={ f } color={ FLAGS[ f ].color }>{ FLAGS[ f ].label }</Badge> |
| 92 |
) ) } |
| 93 |
</div> |
| 94 |
</td> |
| 95 |
<td className="bda-t-right"> |
| 96 |
<div className="bd-cit-row-actions"> |
| 97 |
<FauxBtn kind="ghost" size="sm" icon={ <I.Pen size={ 13 } /> }>{ __( "Edit", "betterdocs" ) }</FauxBtn> |
| 98 |
<FauxBtn kind="ghost" size="sm" icon={ <I.Check size={ 13 } /> }>{ __( "Mark current", "betterdocs" ) }</FauxBtn> |
| 99 |
</div> |
| 100 |
</td> |
| 101 |
</tr> |
| 102 |
) ) } |
| 103 |
</tbody> |
| 104 |
</table> |
| 105 |
</Card> |
| 106 |
</div> |
| 107 |
); |
| 108 |
} |
| 109 |
|
