From bf4004acffb2c87e0f03ea62a0e6317a82ab6f9f Mon Sep 17 00:00:00 2001
From: Ruth Wong <ruthwongny@gmail.com>
Date: Sun, 21 Jul 2024 23:00:48 +0800
Subject: [PATCH] Highlight chorus with line

---
 src/assets/sample-chart.js        |  5 ++++-
 src/components/ChordChartLine.vue | 15 ++++++++++++---
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/assets/sample-chart.js b/src/assets/sample-chart.js
index 79b8c47..d37139c 100644
--- a/src/assets/sample-chart.js
+++ b/src/assets/sample-chart.js
@@ -20,9 +20,12 @@ export const sampleChordProChart =
 [F]Gotta make you [G]understand
 
 {comment: Chorus}
+{start_of_chorus}
 Never gonna [F]give you [G]up
 Never gonna [Em]let you [Am]down
 Never gonna [F]run [G]around and [E]desert [Am]you
 Never gonna [F]make you [G]cry
 Never gonna [Em]say good [Am]bye
-Never gonna [F]tell a [G]lie and [E]hurt [Am]you`;
+Never gonna [F]tell a [G]lie and [E]hurt [Am]you
+{end_of_chorus}
+`;
diff --git a/src/components/ChordChartLine.vue b/src/components/ChordChartLine.vue
index d8291ab..8bac699 100644
--- a/src/components/ChordChartLine.vue
+++ b/src/components/ChordChartLine.vue
@@ -1,5 +1,10 @@
 <template>
-  <p class="chordchart-body-paragraph-line">
+  <p
+    class="chordchart-body-paragraph-line"
+    :class="{
+      'chordchart-body-paragraph-line-chorus': line.type === 'chorus',
+    }"
+  >
     <ChordChartLineItem
       v-for="(item, index) in line.items"
       :key="index"
@@ -26,7 +31,11 @@ defineProps({
   flex-wrap: wrap;
 }
 
-.chordchart-body-paragraph-line-verse {
-  margin-left: 2em;
+.chordchart-body-paragraph-line-chorus {
+  border-left: 1px solid #000;
+  
+  &:last-child {
+    padding-bottom: 1.1em;
+  }
 }
 </style>