Restructure project to atomize structure

src/components/organisms/concertsListSection.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { useConcertStore } from "@/stores/concert.store";
+import concertListItem from "@/components/organisms/concertListItem.vue";
+import cardViewHorizontal from "@/components/molecules/cardViewHorizontal.vue";
+import sectionDivider from "@/components/molecules/sectionDivider.vue";
+import concertFilterbar from "./concertFilterbar.vue";
+
+const concertStore = useConcertStore();
+</script>
+
+<template>
+  <div v-if="concertStore.fetchInProgress">
+    <section-divider :loading="true" />
+    <v-row v-for="i in 3">
+      <v-col>
+        <card-view-horizontal :loading="true" />
+      </v-col>
+    </v-row>
+  </div>
+
+  <div
+    v-else-if="concertStore.concerts.length > 0"
+    v-for="(concert, index) of concertStore.concerts"
+  >
+    <div v-if="concert.offered">
+      <v-row
+        v-if="
+          index == 0 ||
+          new Date(concertStore.concerts[index - 1].date).getMonth() !=
+            new Date(concertStore.concerts[index].date).getMonth()
+        "
+      >
+        <v-col>
+          <section-divider
+            :title="
+              new Date(concert.date).toLocaleString('default', {
+                month: 'long',
+              }) +
+              ' ' +
+              new Date(concert.date).getFullYear()
+            "
+          />
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <v-col>
+          <concert-list-item
+            :concert="concert"
+            :band="concert.band"
+            :location="concert.location"
+          />
+        </v-col>
+      </v-row>
+    </div>
+  </div>
+</template>