chore: convert everything to vue sfc

packages/search-site/src/components/StrainList.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="container">
+    <div>
+      <h3 v-if="strains.length === 0" class="title is-3">No Matching Strains :(</h3>
+      <h3 v-if="strains.length > 0" class="title is-3">Found {{strains.length}} Strains</h3>
+    </div>
+
+    <div class="cards">
+      <StrainCard v-for="strain in strains" :key="strain.id" :strain="strain" />
+    </div>
+  </div>
+</template>
+
+<script>
+import StrainCard from './StrainCard.vue';
+
+export default {
+  components: {
+    StrainCard,
+  },
+  props: {
+    strains: {
+      type: Array,
+      required: true,
+    },
+  },
+};
+</script>
+
+<style scoped>
+.cards {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.cards .card {
+  width: 100%;
+  margin: 12px;
+}
+
+.cards .card .tag-list--title {
+  font-size: 0.8em;
+}
+
+@media screen and (min-width: 769px) {
+  .cards .card {
+    width: 45%;
+  }
+}
+
+@media screen and (min-width: 1280px) {
+  .cards .card {
+    width: 30%;
+  }
+}
+
+@media screen and (max-width: 860px) {
+  .cards .card .tag-list--title {
+    font-size: 0.7em;
+  }
+}
+</style>