diff --git a/components/Blocks/Shortcuts/OneColumnList/index.tsx b/components/Blocks/Shortcuts/OneColumnList/index.tsx index 4284aa777..2098c0d89 100644 --- a/components/Blocks/Shortcuts/OneColumnList/index.tsx +++ b/components/Blocks/Shortcuts/OneColumnList/index.tsx @@ -1,6 +1,4 @@ -import { ArrowRightIcon } from "@/components/Icons" -import Link from "@/components/TempDesignSystem/Link" -import Body from "@/components/TempDesignSystem/Text/Body" +import Shortcut from "../Shortcut" import styles from "./oneColumnList.module.css" @@ -9,19 +7,7 @@ import { ShortcutsListProps } from "@/types/components/myPages/myPage/shortcuts" export default function OneColumnList({ linkList }: ShortcutsListProps) { return (
- {linkList.map((shortcut) => ( - - - {shortcut.text ? shortcut.text : shortcut.title} - - - - ))} +
) } diff --git a/components/Blocks/Shortcuts/OneColumnList/oneColumnList.module.css b/components/Blocks/Shortcuts/OneColumnList/oneColumnList.module.css index f4635b30f..5918f2b65 100644 --- a/components/Blocks/Shortcuts/OneColumnList/oneColumnList.module.css +++ b/components/Blocks/Shortcuts/OneColumnList/oneColumnList.module.css @@ -1,6 +1,6 @@ .section { display: grid; - background-color: var(--Base-Surface-Primary-light-Normal); border-radius: var(--Corner-radius-Medium); border: 1px solid var(--Base-Border-Subtle); + overflow: hidden; } diff --git a/components/Blocks/Shortcuts/Shortcut/index.tsx b/components/Blocks/Shortcuts/Shortcut/index.tsx new file mode 100644 index 000000000..88a310030 --- /dev/null +++ b/components/Blocks/Shortcuts/Shortcut/index.tsx @@ -0,0 +1,28 @@ +import { ArrowRightIcon } from "@/components/Icons" +import Link from "@/components/TempDesignSystem/Link" +import Body from "@/components/TempDesignSystem/Text/Body" + +import styles from "./shortcut.module.css" + +import { ShortcutsListProps } from "@/types/components/myPages/myPage/shortcuts" + +export default function Shortcut({ linkList }: ShortcutsListProps) { + return ( + <> + {linkList.map((shortcut) => ( + + + {shortcut.text ? shortcut.text : shortcut.title} + + + + ))} + + ) +} diff --git a/components/Blocks/Shortcuts/Shortcut/shortcut.module.css b/components/Blocks/Shortcuts/Shortcut/shortcut.module.css new file mode 100644 index 000000000..fa03c1717 --- /dev/null +++ b/components/Blocks/Shortcuts/Shortcut/shortcut.module.css @@ -0,0 +1,3 @@ +.link { + background-color: var(--Base-Surface-Primary-light-Normal); +} diff --git a/components/Blocks/Shortcuts/TwoColumnList/index.tsx b/components/Blocks/Shortcuts/TwoColumnList/index.tsx index b0f0e210d..1a6a0ef90 100644 --- a/components/Blocks/Shortcuts/TwoColumnList/index.tsx +++ b/components/Blocks/Shortcuts/TwoColumnList/index.tsx @@ -1,6 +1,4 @@ -import { ArrowRightIcon } from "@/components/Icons" -import Link from "@/components/TempDesignSystem/Link" -import Body from "@/components/TempDesignSystem/Text/Body" +import Shortcut from "../Shortcut" import styles from "./twoColumnList.module.css" @@ -11,30 +9,13 @@ export default function TwoColumnList({ linkList }: ShortcutsListProps) { const leftColumn = linkList.slice(0, middleIndex) const rightColumn = linkList.slice(middleIndex) - function renderShortcuts({ linkList }: ShortcutsListProps) { - return linkList.map((shortcut) => ( - - - {shortcut.text ? shortcut.text : shortcut.title} - - - - )) - } - return (
-
- {renderShortcuts({ linkList: leftColumn })} +
+
-
- {renderShortcuts({ linkList: rightColumn })} +
+
) diff --git a/components/Blocks/Shortcuts/TwoColumnList/twoColumnList.module.css b/components/Blocks/Shortcuts/TwoColumnList/twoColumnList.module.css index 43285e44d..5060c0943 100644 --- a/components/Blocks/Shortcuts/TwoColumnList/twoColumnList.module.css +++ b/components/Blocks/Shortcuts/TwoColumnList/twoColumnList.module.css @@ -5,14 +5,10 @@ overflow: hidden; } -.columeOne { +.leftColumn { 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; @@ -21,8 +17,8 @@ border: none; } - .columeOne, - .columnTwo { + .leftColumn, + .rightColumn { height: fit-content; border: 1px solid var(--Base-Border-Subtle); border-radius: var(--Corner-radius-Medium);