@@ -10,6 +10,7 @@ interface EditorColumn {
10
10
title: string ;
11
11
description: string ;
12
12
redirectUrl: string ;
13
+ highlighted? : boolean ;
13
14
features: Feature [];
14
15
}
15
16
@@ -30,6 +31,7 @@ const editorColumns: EditorColumn[] = [
30
31
description: ' Advanced features, free account' ,
31
32
redirectUrl:
32
33
' https://www.mermaidchart.com/app/sign-up?utm_source=mermaid_js&utm_medium=editor_selection&utm_campaign=mermaid_chart' ,
34
+ highlighted: true ,
33
35
features: [
34
36
{ iconUrl: ' /icons/icon-folder.svg' , featureName: ' Storage' },
35
37
{ iconUrl: ' /icons/icon-terminal.svg' , featureName: ' Code editor' },
@@ -87,13 +89,12 @@ onUnmounted(() => {
87
89
>
88
90
<div class =" flex flex-row relative top-[8%] gap-4 p-4" >
89
91
<div
90
- v-for =" (column, index) in editorColumns"
91
- :key =" index"
92
+ v-for =" column in editorColumns"
92
93
class =" w-80 flex relative flex-col items-center justify-start bg-[#dceef1] p-6 m-6 text-gray-800 shadow-sm"
93
- :class =" index === 1 ? 'bg-white rounded-b-lg' : 'bg-[#DCEEF1] rounded-lg'"
94
+ :class =" column.highlighted ? 'bg-white rounded-b-lg' : 'bg-[#DCEEF1] rounded-lg'"
94
95
>
95
96
<div
96
- v-if =" index === 1 "
97
+ v-if =" column.highlighted "
97
98
class =" absolute -top-8 w-full rounded-t-3xl bg-[#E0095F] py-2 flex items-center justify-center shadow-md"
98
99
>
99
100
<p class =" text-sm font-semibold text-white" >Best for collaboration</p >
@@ -110,7 +111,9 @@ onUnmounted(() => {
110
111
:href =" column.redirectUrl"
111
112
target =" _blank"
112
113
class =" mb-4 flex h-10 w-full items-center justify-center rounded-xl hover:bg-[#272040] hover:text-white"
113
- :class =" index === 1 ? 'bg-[#1e1a2e] text-[#BEDDE3]' : 'bg-[#BEDDE3] text-[#1E1A2E]'"
114
+ :class ="
115
+ column.highlighted ? 'bg-[#1e1a2e] text-[#BEDDE3]' : 'bg-[#BEDDE3] text-[#1E1A2E]'
116
+ "
114
117
>
115
118
Start free
116
119
</a >
0 commit comments