feat: add hint if item was not updated within the last 3 releases

src/components/ItemDetail/ItemDetail.module.css

@@ -20,6 +20,13 @@
   margin: -15px 0 0 -60px;
 }
 
+.icon {
+  fill: currentColor;
+  width: 24px;
+  height: 24px;
+  margin: 8px auto;
+}
+
 .ring {
   float: left;
   margin: -45px 0 0 0;
@@ -69,3 +76,11 @@
     margin-top: -20px;
   }
 }
+
+.revision.hint {
+  .content {
+    font-size: 14px;
+    background: var(--border);
+    color: var(--foreground);
+  }
+}

src/components/ItemDetail/ItemDetail.tsx

@@ -1,9 +1,17 @@
 import styles from "./ItemDetail.module.css";
 
 import { RingBadge } from "@/components/Badge/Badge";
+import Attention from "@/components/Icons/Attention";
+import { getReleases } from "@/lib/data";
 import { Item } from "@/lib/types";
 import { cn } from "@/lib/utils";
 
+const latestReleases = getReleases().slice(-3);
+
+function isNotMaintained(release: string) {
+  return !latestReleases.includes(release);
+}
+
 interface ItemProps {
   item: Item;
 }
@@ -13,6 +21,21 @@ export function ItemDetail({ item }: ItemProps) {
     <>
       <h1 className={styles.title}>{item.title}</h1>
       <div className={styles.revisions}>
+        {isNotMaintained(item.release) && (
+          <div className={cn(styles.revision, styles.hint)}>
+            <span className={styles.release}>
+              <Attention className={styles.icon} />
+            </span>
+            <div className={styles.content}>
+              This item was not updated in last three versions of the Radar.
+              Should it have appeared in one of the more recent editions, there
+              is a good chance it remains pertinent. However, if the item dates
+              back further, its relevance may have diminished and our current
+              evaluation could vary. Regrettably, our capacity to consistently
+              revisit items from past Radar editions is limited.
+            </div>
+          </div>
+        )}
         <Revision release={item.release} ring={item.ring} body={item.body} />
         {item.revisions?.map((revision, index) => (
           <Revision key={index} {...revision} />

src/icons/attention.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M12.8455 5.21137C12.4531 4.59003 11.5469 4.59003 11.1545 5.21137L2.78316 18.466C2.36261 19.1319 2.84109 20 3.62865 20H20.3713C21.1589 20 21.6374 19.1319 21.2168 18.466L12.8455 5.21137ZM9.46353 4.14338C10.6408 2.27935 13.3592 2.27936 14.5365 4.14339L22.9078 17.398C24.1695 19.3956 22.734 22 20.3713 22H3.62865C1.26598 22 -0.169465 19.3956 1.09218 17.398L9.46353 4.14338ZM13 17C13 17.5523 12.5523 18 12 18C11.4477 18 11 17.5523 11 17C11 16.4477 11.4477 16 12 16C12.5523 16 13 16.4477 13 17ZM10.6941 10.1644L11.4178 14.5068C11.4652 14.7914 11.7115 15 12 15C12.2885 15 12.5348 14.7914 12.5822 14.5068L13.3059 10.1644C13.4075 9.55487 12.9375 9 12.3195 9H11.6805C11.0625 9 10.5925 9.55487 10.6941 10.1644Z" fill-rule="evenodd"/></svg>