Rewrite styles to scss and use i respective components

src/components/Item/Item.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import classNames from 'classnames';
+import Link from '../Link/Link';
+import Flag from '../Flag/Flag';
+import { Item as mItem } from '../../model';
+import './item.scss';
+type ItemProps = {
+  item: mItem;
+  noLeadingBorder?: boolean;
+  active?: boolean;
+  style: React.CSSProperties;
+};
+
+export default function Item({ item, noLeadingBorder = false, active = false, style = {} }: ItemProps) {
+  return (
+    <Link
+      className={classNames('item', {
+        'item--no-leading-border': noLeadingBorder,
+        'is-active': active,
+      })}
+      pageName={`${item.quadrant}/${item.name}`}
+      style={style}
+    >
+      <div className='item__title'>
+        {item.title}
+        <Flag item={item} />
+      </div>
+      {item.info && <div className='item__info'>{item.info}</div>}
+    </Link>
+  );
+}

src/components/Item/item.scss

@@ -0,0 +1,49 @@
+.item {
+  padding: 10px;
+  border-bottom: 1px solid var(--color-gray-normal);
+  display: block;
+  text-decoration: none;
+  transition: background 200ms ease-out;
+  color: var(--color-gray-normal);
+  box-sizing: border-box;
+
+  &.is-active {
+    background: var(--color-gray-dark-alt);
+  }
+
+  &:hover {
+    background: var(--color-gray-dark-alt2);
+  }
+
+  &:first-child {
+    border-top: 1px solid var(--color-gray-normal);
+  }
+
+  &--big {
+    min-height: 80px;
+    padding: 20px 10px;
+  }
+
+  &--no-leading-border {
+    &:first-child {
+      border-top: none;
+    }
+  }
+
+  &--no-trailing-border {
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  &__title {
+    font-size: 16px;
+    color: var(--color-white);
+  }
+
+  &__info {
+    margin-top: 5px;
+    font-size: 12px;
+    color: var(--color-gray-normal);
+  }
+}