first push

src/components/listings/EventListing.vue

@@ -0,0 +1,69 @@
+<script setup>
+    import moment from 'moment-timezone';
+
+    defineProps({
+        item: {
+            type: Object,
+            required: true
+        },
+        index: {
+            type: Number,
+            require: true
+        },
+    })
+
+    function format_date(dateString) {
+        let date = moment.utc(dateString);
+        return date.format('dd @ h:mm a');
+    };
+</script>
+        
+<template>
+    <div class="m-auto">
+        <div class="float-right text-right text-xs p-2 m-3 w-70">
+            {{  format_date(item.show_date) }} <br/>
+            <a :href="item.venue.website" target="_blank">
+                <b>
+                    {{  item.venue.name }}
+                </b>
+            </a> 
+            <a :href="item.show_link"  target="_blank">
+                <p class="text-lg">
+                    {{ item.show_title }}
+                </p>
+            </a>
+            <span class="float-right text-xs">
+                {{  item.venue.city }} | {{  item.event_type }}
+            </span>
+        </div>
+    </div>
+</template>
+<style scoped>
+    .events {
+    border: .1em solid #333;
+    border-radius: 25px;
+    min-width: 325px;
+    max-width: 400px;
+    }
+
+    @media (min-width: 800px) and (max-width:1023px) {
+        .events {
+            min-width: 300px;
+            max-width: 300px;
+        }
+    }
+
+    @media (min-width: 1024px) and (max-width: 1249) {
+        .events {
+            min-width: 300px;
+            max-width: 400px;
+        }
+    }
+
+    @media (min-width: 1250px) {
+        .events {
+            min-width: 325px;
+            max-width: 475px;
+        }
+    }
+</style>