simplify the look of nonfeatured articles

src/components/ItemList/ItemList.tsx

@@ -1,6 +1,10 @@
 import React from "react";
 import Item from "../Item/Item";
-import { Item as mItem } from "../../model";
+import {
+  featuredOnly,
+  nonFeaturedOnly,
+  Item as mItem,
+} from "../../model";
 import "./item-list.scss";
 
 type ItemListProps = {
@@ -9,7 +13,6 @@ type ItemListProps = {
   noLeadingBorder?: boolean;
   headerStyle?: React.CSSProperties;
   itemStyle?: React.CSSProperties[];
-  greyedOut?: boolean;
 };
 
 const ItemList: React.FC<ItemListProps> = ({
@@ -19,25 +22,38 @@ const ItemList: React.FC<ItemListProps> = ({
   noLeadingBorder,
   headerStyle = {},
   itemStyle = [],
-  greyedOut = false,
-}) => (
+}) => {
+  const featuredItems = featuredOnly(items);
+  const nonFeaturedItems = nonFeaturedOnly(items);
+  
+  return (
   <div className="item-list">
     <div className="item-list__header" style={headerStyle}>
       {children}
     </div>
     <div className="item-list__list">
-      {items.map((item, i) => (
+      {featuredItems.map((item, i) => (
         <Item
           key={item.name}
           item={item}
           noLeadingBorder={noLeadingBorder}
           active={activeItem?.name === item.name}
           style={itemStyle[i]}
-          greyedOut={greyedOut}
+          greyedOut={false}
+        />
+      ))}
+      {nonFeaturedItems.map((item, i) => (
+        <Item
+          key={item.name}
+          item={item}
+          noLeadingBorder={noLeadingBorder}
+          active={activeItem?.name === item.name}
+          style={itemStyle[featuredItems.length + i]}
+          greyedOut={true}
         />
       ))}
     </div>
   </div>
-);
+);}
 
 export default ItemList;