From 7c0a3b6375ba6ce8ac46f0691bc569b0e6db3698 Mon Sep 17 00:00:00 2001
From: pskfyi <patrick.keenan.fyi@gmail.com>
Date: Mon, 10 Jan 2022 02:14:02 -0800
Subject: [PATCH] refactor: componentize responsive grid

---
 components/ResponsiveGrid.vue | 18 +++++++++++++++
 pages/Missions.vue            | 41 +++++++++--------------------------
 2 files changed, 28 insertions(+), 31 deletions(-)
 create mode 100644 components/ResponsiveGrid.vue

diff --git a/components/ResponsiveGrid.vue b/components/ResponsiveGrid.vue
new file mode 100644
index 0000000..866373e
--- /dev/null
+++ b/components/ResponsiveGrid.vue
@@ -0,0 +1,18 @@
+<template>
+  <div
+    class="grid gap-4"
+    :class="`grid-cols-${min} md:grid-cols-${mid} 2xl:grid-cols-${max}`"
+  >
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    min: { type: [Number, String], default: 1 },
+    mid: { type: [Number, String], default: 2 },
+    max: { type: [Number, String], default: 3 },
+  },
+}
+</script>
diff --git a/pages/Missions.vue b/pages/Missions.vue
index d0f52ca..b08eed9 100644
--- a/pages/Missions.vue
+++ b/pages/Missions.vue
@@ -1,33 +1,12 @@
 <template>
-  <div class="tab-content grid md:overflow-hidden">
-    <template v-for="(mission, index) in $store.state.missions">
-      <progress-button
-        :key="index"
-        :label="mission.name"
-        :description="mission.description"
-        :max="mission.completionCriteria.cost"
-        :value="$store.state.currency"
-      />
-    </template>
-  </div>
+  <responsive-grid>
+    <progress-button
+      v-for="(mission, index) in $store.state.missions"
+      :key="index"
+      :label="mission.name"
+      :description="mission.description"
+      :max="mission.completionCriteria.cost"
+      :value="$store.state.currency"
+    />
+  </responsive-grid>
 </template>
-
-<style scoped>
-.tab-content {
-  --columns: 1;
-  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
-  grid-gap: 1rem;
-}
-/* md */
-@media (min-width: 768px) {
-  .tab-content {
-    --columns: 2;
-  }
-}
-/* 2xl */
-@media (min-width: 1536px) {
-  .tab-content {
-    --columns: 3;
-  }
-}
-</style>