diff --git a/components/Blocks/Shortcuts/OneColumnList/index.tsx b/components/Blocks/Shortcuts/OneColumnList/index.tsx
new file mode 100644
index 000000000..4284aa777
--- /dev/null
+++ b/components/Blocks/Shortcuts/OneColumnList/index.tsx
@@ -0,0 +1,27 @@
+import { ArrowRightIcon } from "@/components/Icons"
+import Link from "@/components/TempDesignSystem/Link"
+import Body from "@/components/TempDesignSystem/Text/Body"
+
+import styles from "./oneColumnList.module.css"
+
+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/shortcuts.module.css b/components/Blocks/Shortcuts/OneColumnList/oneColumnList.module.css
similarity index 50%
rename from components/Blocks/Shortcuts/shortcuts.module.css
rename to components/Blocks/Shortcuts/OneColumnList/oneColumnList.module.css
index a82b672fb..f4635b30f 100644
--- a/components/Blocks/Shortcuts/shortcuts.module.css
+++ b/components/Blocks/Shortcuts/OneColumnList/oneColumnList.module.css
@@ -1,11 +1,6 @@
-.links {
+.section {
display: grid;
- background-color: var(--Scandic-Brand-Pale-Peach);
+ background-color: var(--Base-Surface-Primary-light-Normal);
border-radius: var(--Corner-radius-Medium);
border: 1px solid var(--Base-Border-Subtle);
}
-
-.arrowRight {
- height: 24px;
- width: 24px;
-}
diff --git a/components/Blocks/Shortcuts/TwoColumList/index.tsx b/components/Blocks/Shortcuts/TwoColumList/index.tsx
new file mode 100644
index 000000000..b0f0e210d
--- /dev/null
+++ b/components/Blocks/Shortcuts/TwoColumList/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) => (
+
+
+ {shortcut.text ? shortcut.text : shortcut.title}
+
+
+
+ ))
+ }
+
+ return (
+
+
+ {renderShortcuts({ linkList: leftColumn })}
+
+
+ {renderShortcuts({ linkList: rightColumn })}
+
+
+ )
+}
diff --git a/components/Blocks/Shortcuts/TwoColumList/twoColumnList.module.css b/components/Blocks/Shortcuts/TwoColumList/twoColumnList.module.css
new file mode 100644
index 000000000..43285e44d
--- /dev/null
+++ b/components/Blocks/Shortcuts/TwoColumList/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;
+ }
+}
diff --git a/components/Blocks/Shortcuts/index.tsx b/components/Blocks/Shortcuts/index.tsx
index 1188c06fe..77ad1bcb4 100644
--- a/components/Blocks/Shortcuts/index.tsx
+++ b/components/Blocks/Shortcuts/index.tsx
@@ -1,10 +1,8 @@
-import { ArrowRightIcon } from "@/components/Icons"
import SectionContainer from "@/components/Section/Container"
import SectionHeader from "@/components/Section/Header"
-import Link from "@/components/TempDesignSystem/Link"
-import Body from "@/components/TempDesignSystem/Text/Body"
-import styles from "./shortcuts.module.css"
+import OneColumnList from "./OneColumnList"
+import TwoColumnList from "./TwoColumList"
import type { ShortcutsProps } from "@/types/components/myPages/myPage/shortcuts"
@@ -13,25 +11,16 @@ export default function Shortcuts({
shortcuts,
subtitle,
title,
+ columns,
}: ShortcutsProps) {
return (
-
- {shortcuts.map((shortcut) => (
-
-
- {shortcut.text ? shortcut.text : shortcut.title}
-
-
-
- ))}
-
+ {columns ? (
+
+ ) : (
+
+ )}
)
}
diff --git a/components/Blocks/index.tsx b/components/Blocks/index.tsx
index 2423508d1..f48014044 100644
--- a/components/Blocks/index.tsx
+++ b/components/Blocks/index.tsx
@@ -47,6 +47,7 @@ export default function Blocks({ blocks }: BlocksProps) {
shortcuts={block.shortcuts.shortcuts}
subtitle={block.shortcuts.subtitle}
title={block.shortcuts.title}
+ columns={block.shortcuts.columns}
/>
)
case BlocksEnums.block.Table:
diff --git a/components/Webviews/AccountPage/Blocks.tsx b/components/Webviews/AccountPage/Blocks.tsx
index 8e24918d4..534dd1a83 100644
--- a/components/Webviews/AccountPage/Blocks.tsx
+++ b/components/Webviews/AccountPage/Blocks.tsx
@@ -70,6 +70,7 @@ export default function Content({ content }: ContentProps) {
shortcuts={shortcuts}
subtitle={item.shortcuts.subtitle}
title={item.shortcuts.title}
+ columns={item.shortcuts.columns}
/>
)
case BlocksEnums.block.TextContent:
diff --git a/components/Webviews/LoyaltyPage/Blocks.tsx b/components/Webviews/LoyaltyPage/Blocks.tsx
index 77d59dd22..98b1f1b5d 100644
--- a/components/Webviews/LoyaltyPage/Blocks.tsx
+++ b/components/Webviews/LoyaltyPage/Blocks.tsx
@@ -61,6 +61,7 @@ export default function Blocks({ blocks }: BlocksProps) {
shortcuts={shortcuts}
subtitle={block.shortcuts.subtitle}
title={block.shortcuts.title}
+ columns={block.shortcuts.columns}
/>
)
default:
diff --git a/lib/graphql/Fragments/Blocks/Shortcuts.graphql b/lib/graphql/Fragments/Blocks/Shortcuts.graphql
index b7d597db3..993f1891b 100644
--- a/lib/graphql/Fragments/Blocks/Shortcuts.graphql
+++ b/lib/graphql/Fragments/Blocks/Shortcuts.graphql
@@ -9,6 +9,7 @@
fragment Shortcuts on Shortcuts {
subtitle: preamble
title
+ columns
shortcuts {
open_in_new_tab
text
diff --git a/server/routers/contentstack/schemas/blocks/shortcuts.ts b/server/routers/contentstack/schemas/blocks/shortcuts.ts
index 1059a9485..85bb5d684 100644
--- a/server/routers/contentstack/schemas/blocks/shortcuts.ts
+++ b/server/routers/contentstack/schemas/blocks/shortcuts.ts
@@ -12,6 +12,7 @@ export const shortcutsSchema = z.object({
shortcuts: z.object({
subtitle: z.string().nullable(),
title: z.string().nullable(),
+ columns: z.boolean().default(false),
shortcuts: z
.array(
z.object({
diff --git a/types/components/myPages/myPage/shortcuts.ts b/types/components/myPages/myPage/shortcuts.ts
index 9ef3a5f84..1e6fa4ae4 100644
--- a/types/components/myPages/myPage/shortcuts.ts
+++ b/types/components/myPages/myPage/shortcuts.ts
@@ -3,3 +3,7 @@ import type { Shortcut } from "@/types/trpc/routers/contentstack/blocks"
export interface ShortcutsProps extends Shortcut {
firstItem?: boolean
}
+
+export type ShortcutsListProps = {
+ linkList: ShortcutsProps["shortcuts"]
+}