feat(SW-322): refactor shortcuts list

components/Blocks/ShortcutsList/index.tsx

@@ -0,0 +1,46 @@
+import SectionContainer from "@/components/Section/Container"
+import SectionHeader from "@/components/Section/Header"
+
+import ShortcutsListItems from "./ShortcutsListItems"
+
+import styles from "./shortcutsList.module.css"
+
+import type { ShortcutsListProps } from "@/types/components/blocks/shortcuts"
+
+export default function ShortcutsList({
+  firstItem = false,
+  shortcuts,
+  subtitle,
+  title,
+  hasTwoColumns,
+}: ShortcutsListProps) {
+  const middleIndex = Math.ceil(shortcuts.length / 2)
+  const leftColumn = shortcuts.slice(0, middleIndex)
+  const rightColumn = shortcuts.slice(middleIndex)
+
+  const classNames = hasTwoColumns
+    ? {
+        section: styles.twoColumnSection,
+        leftColumn: styles.leftColumn,
+        rightColumn: styles.rightColumn,
+      }
+    : {
+        section: styles.oneColumnSection,
+        leftColumn: styles.leftColumnBottomBorder,
+        rightColumn: "",
+      }
+
+  return (
+    <SectionContainer>
+      <SectionHeader preamble={subtitle} title={title} topTitle={firstItem} />
+      <section className={classNames.section}>
+        <div className={classNames.leftColumn}>
+          <ShortcutsListItems shortCutList={leftColumn} />
+        </div>
+        <div className={classNames.rightColumn}>
+          <ShortcutsListItems shortCutList={rightColumn} />
+        </div>
+      </section>
+    </SectionContainer>
+  )
+}