feat(SW-322): fix typo

2024-10-07 10:57:51 +02:00
parent 5ea3410006
commit 2db756b738
3 changed files with 1 additions and 1 deletions
--- a/components/Blocks/Shortcuts/TwoColumnList/index.tsx
+++ b/components/Blocks/Shortcuts/TwoColumnList/index.tsx
@@ -0,0 +1,41 @@
+import { ArrowRightIcon } from "@/components/Icons"
+import Link from "@/components/TempDesignSystem/Link"
+import Body from "@/components/TempDesignSystem/Text/Body"
+
+import styles from "./twoColumnList.module.css"
+
+import { ShortcutsListProps } from "@/types/components/myPages/myPage/shortcuts"
+
+export default function TwoColumnList({ linkList }: ShortcutsListProps) {
+  const middleIndex = Math.ceil(linkList.length / 2)
+  const leftColumn = linkList.slice(0, middleIndex)
+  const rightColumn = linkList.slice(middleIndex)
+
+  function renderShortcuts({ linkList }: ShortcutsListProps) {
+    return linkList.map((shortcut) => (
+      <Link
+        href={shortcut.url}
+        key={shortcut.title}
+        target={shortcut.openInNewTab ? "_blank" : undefined}
+        variant="shortcut"
+        className={styles.link}
+      >
+        <Body textTransform="bold" color="burgundy">
+          <span>{shortcut.text ? shortcut.text : shortcut.title}</span>
+        </Body>
+        <ArrowRightIcon color="burgundy" width={24} height={24} />
+      </Link>
+    ))
+  }
+
+  return (
+    <section className={styles.section}>
+      <div className={styles.columeOne}>
+        {renderShortcuts({ linkList: leftColumn })}
+      </div>
+      <div className={styles.columnTwo}>
+        {renderShortcuts({ linkList: rightColumn })}
+      </div>
+    </section>
+  )
+}
--- a/components/Blocks/Shortcuts/TwoColumnList/twoColumnList.module.css
+++ b/components/Blocks/Shortcuts/TwoColumnList/twoColumnList.module.css
@@ -0,0 +1,31 @@
+.section {
+  display: grid;
+  border-radius: var(--Corner-radius-Medium);
+  border: 1px solid var(--Base-Border-Subtle);
+  overflow: hidden;
+}
+
+.columeOne {
+  border-bottom: 0.5px solid var(--Scandic-Beige-20);
+}
+
+.link {
+  background-color: var(--Base-Surface-Primary-light-Normal);
+}
+
+@media screen and (min-width: 1367px) {
+  .section {
+    grid-template-columns: 1fr 1fr;
+    column-gap: var(--Spacing-x2);
+    border-radius: 0;
+    border: none;
+  }
+
+  .columeOne,
+  .columnTwo {
+    height: fit-content;
+    border: 1px solid var(--Base-Border-Subtle);
+    border-radius: var(--Corner-radius-Medium);
+    overflow: hidden;
+  }
+}