Rewrite styles to scss and use i respective components

src/components/QuadrantSection/QuadrantSection.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { translate, rings, ring } from '../../config';
+import Badge from '../Badge/Badge';
+import Link from '../Link/Link';
+import ItemList from '../ItemList/ItemList';
+import Flag from '../Flag/Flag';
+import { Item, Group } from '../../model';
+import './quadrant-section.scss';
+const renderList = (ringName: ring, quadrantName: string, groups: Group, big: boolean) => {
+  const itemsInRing = groups[quadrantName][ringName];
+
+  if (big) {
+    return (
+      <ItemList items={itemsInRing} noLeadingBorder>
+        <Badge type={ringName} big={big}>
+          {ringName}
+        </Badge>
+      </ItemList>
+    );
+  }
+
+  return (
+    <div className='ring-list'>
+      <div className='ring-list__header'>
+        <Badge type={ringName}>{ringName}</Badge>
+      </div>
+      {itemsInRing.map((item) => (
+        <span key={item.name} className='ring-list__item'>
+          <Link className='link' pageName={`${item.quadrant}/${item.name}`}>
+            {item.title}
+            <Flag item={item} short />
+          </Link>
+        </span>
+      ))}
+    </div>
+  );
+};
+
+const renderRing = (ringName: ring, quadrantName: string, groups: Group, big: boolean) => {
+  if (!groups[quadrantName] || !groups[quadrantName][ringName] || groups[quadrantName][ringName].length === 0) {
+    return null;
+  }
+  return (
+    <div key={ringName} className='quadrant-section__ring'>
+      {renderList(ringName, quadrantName, groups, big)}
+    </div>
+  );
+};
+
+export default function QuadrantSection({ quadrantName, groups, big = false }: { quadrantName: string; groups: Group; big?: boolean }) {
+  return (
+    <div className='quadrant-section'>
+      <div className='quadrant-section__header'>
+        <div className='split'>
+          <div className='split__left'>
+            <h4 className='headline'>{translate(quadrantName)}</h4>
+          </div>
+          {!big && (
+            <div className='split__right'>
+              <Link className='icon-link' pageName={`${quadrantName}`}>
+                <span className='icon icon--pie icon-link__icon' />
+                Zoom In
+              </Link>
+            </div>
+          )}
+        </div>
+      </div>
+      <div className='quadrant-section__rings'>{rings.map((ringName) => renderRing(ringName, quadrantName, groups, big))}</div>
+    </div>
+  );
+}

src/components/QuadrantSection/quadrant-section.scss

@@ -0,0 +1,21 @@
+.quadrant-section {
+  &__header {
+    margin-bottom: 20px;
+  }
+
+  &__rings {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  &__ring {
+    box-sizing: border-box;
+    padding: 0 8px;
+    flex: 0 0 25%;
+    margin: 0 0 25px;
+    @media (--until-md) {
+      flex-basis: 50%;
+
+    }
+  }
+}