Refactored search and autocomplete

Now with more icons, much simpler dropdown and a smooth open animation.
Filter is moved to the searchPage instead of baking in the search
dropdown.

src/components/AutocompleteDropdown.vue

@@ -0,0 +1,231 @@
+<template>
+  <transition name="shut">
+    <ul class="dropdown">
+      <li
+        v-for="result in searchResults"
+        @click="openPopup(result)"
+        :class="`result di-${result.index} ${
+          result.index === index ? 'active' : ''
+        }`"
+      >
+        <IconMovie v-if="result.type == 'movie'" class="type-icon" />
+        <IconShow v-if="result.type == 'show'" class="type-icon" />
+        <span>{{ result.title }}</span>
+      </li>
+    </ul>
+  </transition>
+</template>
+
+<script>
+import { mapActions } from "vuex";
+import IconMovie from "src/icons/IconMovie";
+import IconShow from "src/icons/IconShow";
+import IconPerson from "src/icons/IconPerson";
+import { elasticSearchMoviesAndShows } from "@/api";
+
+export default {
+  components: { IconMovie, IconShow, IconPerson },
+  props: {
+    query: {
+      type: String,
+      default: null,
+      required: false
+    },
+    index: {
+      type: Number,
+      default: -1,
+      required: false
+    },
+    results: {
+      type: Array,
+      default: [],
+      required: false
+    }
+  },
+  watch: {
+    query(newQuery) {
+      if (newQuery && newQuery.length > 1) this.fetchAutocompleteResults();
+    }
+  },
+  data() {
+    return {
+      searchResults: [],
+      keyboardNavigationIndex: 0
+    };
+  },
+  methods: {
+    ...mapActions("popup", ["open"]),
+    openPopup(result) {
+      const { id, type } = result;
+      this.open({ id, type });
+    },
+    fetchAutocompleteResults() {
+      this.keyboardNavigationIndex = 0;
+
+      elasticSearchMoviesAndShows(this.query).then(resp => {
+        const data = resp.hits.hits;
+
+        let results = data.map(item => {
+          let index = null;
+          if (item._source.log.file.path.includes("movie")) index = "movie";
+          if (item._source.log.file.path.includes("series")) index = "show";
+
+          if (index === "movie" || index === "show") {
+            return {
+              title: item._source.original_name || item._source.original_title,
+              id: item._source.id,
+              adult: item._source.adult,
+              type: index
+            };
+          }
+        });
+
+        results = this.removeDuplicates(results);
+        results = results.map((el, index) => {
+          return { ...el, index };
+        });
+
+        this.$emit("update:results", results);
+        this.searchResults = results.slice(0, 10);
+      });
+    },
+    removeDuplicates(searchResults) {
+      let filteredResults = [];
+      searchResults.map(result => {
+        if (result === undefined) return;
+        const numberOfDuplicates = filteredResults.filter(
+          filterItem => filterItem.id == result.id
+        );
+        if (numberOfDuplicates.length >= 1) {
+          return null;
+        }
+        filteredResults.push(result);
+      });
+
+      if (this.adult == false) {
+        filteredResults = filteredResults.filter(
+          result => result.adult == false
+        );
+      }
+
+      return filteredResults;
+    }
+  },
+  created() {
+    this.fetchAutocompleteResults();
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "./src/scss/variables";
+@import "./src/scss/media-queries";
+@import "./src/scss/main";
+$sizes: 22;
+
+@for $i from 0 through $sizes {
+  .dropdown .di-#{$i} {
+    visibility: visible;
+    transform-origin: top center;
+    animation: scaleZ 200ms calc(50ms * #{$i}) ease-in forwards;
+  }
+}
+
+@keyframes scaleZ {
+  0% {
+    opacity: 0;
+    transform: scale(0);
+  }
+  80% {
+    transform: scale(1.07);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.dropdown {
+  top: var(--header-size);
+  position: relative;
+  height: 100%;
+  width: 100%;
+  max-width: 720px;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  z-index: 5;
+
+  margin-top: -1px;
+  border-top: none;
+  padding: 0;
+
+  @include mobile {
+    position: fixed;
+    left: 0;
+    max-width: 100vw;
+  }
+
+  @include tablet-min {
+    top: unset;
+    --gutter: 1.5rem;
+    max-width: calc(100% - (2 * var(--gutter)));
+    margin: -1px var(--gutter) 0 var(--gutter);
+  }
+
+  @include desktop {
+    max-width: 720px;
+  }
+}
+
+li.result {
+  opacity: 0;
+  height: 56px;
+  width: 100%;
+  visibility: hidden;
+  display: flex;
+  align-items: center;
+  background-color: var(--background-95);
+  color: var(--text-color-50);
+  padding: 0.5rem 2rem;
+
+  font-size: 1.4rem;
+  text-transform: capitalize;
+  list-style: none;
+  cursor: pointer;
+  white-space: nowrap;
+
+  transition: color 0.1s ease, stroke 0.4s ease;
+
+  span {
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+    transition: inherit;
+  }
+
+  &.active,
+  &:hover,
+  &:active {
+    color: var(--text-color);
+    // background-color: var(--background-color-secondary);
+    border-bottom: 2px solid var(--color-green);
+
+    .type-icon {
+      stroke: var(--text-color);
+    }
+  }
+
+  .type-icon {
+    margin-right: 1rem;
+    transition: inherit;
+    stroke: var(--text-color-50);
+  }
+}
+
+.shut-leave-to {
+  height: 0px;
+  transition: height 0.4s ease;
+  flex-wrap: no-wrap;
+  overflow: hidden;
+}
+</style>

src/components/SearchInput.vue

@@ -1,6 +1,15 @@
 <template>
   <div>
-    <div class="search">
+    <div class="search" :class="{ active: focusingInput }">
+      <svg
+        class="search-icon"
+        tabindex="-1"
+        fill="currentColor"
+        @click="handleSubmit"
+      >
+        <use xlink:href="#iconSearch"></use>
+      </svg>
+
       <input
         ref="input"
         type="text"
@@ -8,7 +17,7 @@
         aria-label="Search input for finding a movie or show"
         autocorrect="off"
         autocapitalize="off"
-        tabindex="1"
+        tabindex="0"
         v-model="query"
         @input="handleInput"
         @click="focus = true"
@@ -16,126 +25,86 @@
         @keyup.enter="handleSubmit"
         @keydown.up="navigateUp"
         @keydown.down="navigateDown"
+        @focus="focusingInput = true"
+        @blur="focusingInput = false"
       />
 
-      <svg class="search-icon" fill="currentColor" @click="handleSubmit">
+      <IconClose
-        <use xlink:href="#iconSearch"></use>
+        tabindex="0"
-      </svg>
+        aria-label="button"
-    </div>
+        v-if="query && query.length"
-
+        @click="resetQuery"
-    <transition name="fade">
+        @keydown.enter.stop="resetQuery"
-      <div class="dropdown" v-if="!disabled && focus && query.length > 0">
+        class="close-icon"
-        <div class="filter">
-          <h2>Filter your search:</h2>
-
-          <div class="filter-items">
-            <toggle-button
-              :options="searchTypes"
-              :selected.sync="selectedSearchType"
       />
-
-            <label
-              >Adult
-              <input type="checkbox" value="adult" v-model="adult" />
-            </label>
-          </div>
     </div>
 
-        <hr />
+    <AutocompleteDropdown
-
+      v-if="showAutocompleteResults"
-        <div class="dropdown-results" v-if="elasticSearchResults.length">
+      :query="query"
-          <ul
+      :index="dropdownIndex"
-            v-for="(item, index) in elasticSearchResults"
+      :results.sync="dropdownResults"
-            @click="openResult(item, index + 1)"
+    />
-            :class="{ active: index + 1 === selectedResult }"
-          >
-            {{
-              item.name
-            }}
-          </ul>
-        </div>
-
-        <div v-else class="dropdown">
-          <div class="dropdown-results">
-            <h2 class="not-found">
-              No results for query: <b>{{ query }}</b>
-            </h2>
-          </div>
-        </div>
-
-        <seasoned-button
-          class="end-section"
-          fullWidth="true"
-          @click="focus = false"
-          :active="elasticSearchResults.length + 1 === selectedResult"
-        >
-          close
-        </seasoned-button>
-      </div>
-    </transition>
   </div>
 </template>
 
 <script>
+import { mapActions, mapGetters } from "vuex";
 import SeasonedButton from "@/components/ui/SeasonedButton";
-import ToggleButton from "@/components/ui/ToggleButton";
+import AutocompleteDropdown from "@/components/AutocompleteDropdown";
 
-import { elasticSearchMoviesAndShows } from "@/api";
+import IconClose from "src/icons/IconClose";
 import config from "@/config.json";
 
 export default {
   name: "SearchInput",
   components: {
     SeasonedButton,
-    ToggleButton
+    AutocompleteDropdown,
+    IconClose
   },
-  props: ["value"],
   data() {
     return {
-      adult: true,
+      query: null,
-      searchTypes: ["all", "movie", "show", "person"],
-      selectedSearchType: "all",
-
-      query: this.value,
-      focus: false,
       disabled: false,
-      scrollListener: undefined,
+      dropdownIndex: -1,
-      scrollDistance: 0,
+      dropdownResults: [],
-      elasticSearchResults: [],
+      focusingInput: false,
-      selectedResult: 0
+      showAutocomplete: false
     };
   },
-  watch: {
+  computed: {
-    focus: function (val) {
+    ...mapGetters("popup", ["isOpen"]),
-      if (val === true) {
+    showAutocompleteResults() {
-        window.addEventListener("scroll", this.disableFocus);
+      return (
-      } else {
+        !this.disabled &&
-        window.removeEventListener("scroll", this.disableFocus);
+        this.focusingInput &&
-        this.scrollDistance = 0;
+        this.query &&
+        this.query.length > 0
+      );
     }
   },
-    adult: function (value) {
+  created() {
-      this.handleInput();
+    const params = new URLSearchParams(window.location.search);
+    if (params && params.has("query")) {
+      this.query = decodeURIComponent(params.get("query"));
     }
-  },
+
-  beforeMount() {
     const elasticUrl = config.ELASTIC_URL;
     if (elasticUrl === undefined || elasticUrl === false || elasticUrl === "") {
       this.disabled = true;
     }
   },
-  beforeDestroy() {
-    console.log("scroll eventlistener not removed, destroying!");
-    window.removeEventListener("scroll", this.disableFocus);
-  },
   methods: {
+    ...mapActions("popup", ["open"]),
     navigateDown() {
-      this.focus = true;
+      if (this.dropdownIndex < this.dropdownResults.length - 1) {
-      this.selectedResult++;
+        this.dropdownIndex++;
+      }
     },
     navigateUp() {
-      this.focus = true;
+      if (this.dropdownIndex > -1) this.dropdownIndex--;
-      this.selectedResult--;
+
       const input = this.$refs.input;
       const textLength = input.value.length;
 
@@ -144,93 +113,48 @@ export default {
         input.setSelectionRange(textLength, textLength + 1);
       }, 1);
     },
-    openResult(item, index) {
+    search() {
-      this.selectedResult = index;
-      this.$popup.open(item.id, item.type);
-    },
-    handleInput(e) {
-      this.selectedResult = 0;
-      this.$emit("input", this.query);
-
-      if (!this.focus) {
-        this.focus = true;
-      }
-
-      elasticSearchMoviesAndShows(this.query).then(resp => {
-        const data = resp.hits.hits;
-
-        let results = data.map(item => {
-          const index = item._index.slice(0, -1);
-          if (index === "movie" || item._source.original_title) {
-            return {
-              name: item._source.original_title,
-              id: item._source.id,
-              adult: item._source.adult,
-              type: "movie"
-            };
-          } else if (index === "show" || item._source.original_name) {
-            return {
-              name: item._source.original_name,
-              id: item._source.id,
-              adult: item._source.adult,
-              type: "show"
-            };
-          }
-        });
-        results = this.removeDuplicates(results);
-        this.elasticSearchResults = results;
-      });
-    },
-    removeDuplicates(searchResults) {
-      let filteredResults = [];
-      searchResults.map(result => {
-        const numberOfDuplicates = filteredResults.filter(
-          filterItem => filterItem.id == result.id
-        );
-        if (numberOfDuplicates.length >= 1) {
-          return null;
-        }
-        filteredResults.push(result);
-      });
-
-      if (this.adult == false) {
-        filteredResults = filteredResults.filter(
-          result => result.adult == false
-        );
-      }
-
-      return filteredResults;
-    },
-    handleSubmit() {
-      let searchResults = this.elasticSearchResults;
-
-      if (this.selectedResult > searchResults.length) {
-        this.focus = false;
-        this.selectedResult = 0;
-      } else if (this.selectedResult > 0) {
-        const resultItem = searchResults[this.selectedResult - 1];
-        this.$popup.open(resultItem.id, resultItem.type);
-      } else {
       const encodedQuery = encodeURI(this.query.replace('/ /g, "+"'));
-        const media_type =
+
-          this.selectedSearchType !== "all" ? this.selectedSearchType : null;
       this.$router.push({
         name: "search",
-          query: { query: encodedQuery, adult: this.adult, media_type }
+        query: {
-        });
+          ...this.$route.query,
-        this.focus = false;
+          query: encodedQuery
-        this.selectedResult = 0;
         }
+      });
+    },
+    resetQuery(event) {
+      this.query = "";
+      this.$refs.input.focus();
+    },
+    handleInput(e) {
+      this.$emit("input", this.query);
+      this.dropdownIndex = -1;
+    },
+    handleSubmit() {
+      if (!this.query || this.query.length == 0) return;
+
+      if (this.dropdownIndex >= 0) {
+        const resultItem = this.dropdownResults[this.dropdownIndex];
+
+        console.log("resultItem:", resultItem);
+        this.open({
+          id: resultItem.id,
+          type: resultItem.type
+        });
+        return;
+      }
+
+      this.search();
+      this.$refs.input.blur();
+      this.dropdownIndex = -1;
     },
     handleEscape() {
-      if (this.$popup.isOpen) {
+      if (!this.isOpen) {
-        console.log("THIS WAS FUCKOING OPEN!");
+        this.$refs.input.blur();
-      } else {
+        this.dropdownIndex = -1;
-        this.focus = false;
       }
-    },
-    disableFocus(_) {
-      this.focus = false;
     }
   }
 };
@@ -241,6 +165,17 @@ export default {
 @import "./src/scss/media-queries";
 @import "./src/scss/main";
 
+.close-icon {
+  position: absolute;
+  top: calc(50% - 12px);
+  right: 0;
+  cursor: pointer;
+
+  @include tablet-min {
+    right: 6px;
+  }
+}
+
 .fade-enter-active {
   transition: opacity 0.2s;
 }
@@ -252,7 +187,6 @@ export default {
 }
 
 .filter {
-  // background-color: rgba(004, 122, 125, 0.2);
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -285,60 +219,13 @@ hr {
   width: 90%;
 }
 
-.dropdown {
+.search.active {
-  width: 100%;
+  input {
-  position: relative;
+    border-color: var(--color-green);
-  display: flex;
-  flex-wrap: wrap;
-  z-index: 5;
-  min-height: $header-size;
-  right: 0px;
-  background-color: $background-color-secondary;
-
-  @include mobile-only {
-    position: fixed;
-    top: 50px;
-    padding-top: 20px;
-    width: calc(100%);
   }
 
-  .not-found {
+  .search-icon {
-    font-weight: 400;
+    fill: var(--color-green);
-  }
-
-  &-results {
-    padding-left: 60px;
-    width: 100%;
-
-    @include mobile-only {
-      padding-left: 45px;
-    }
-
-    > ul {
-      font-size: 1.3rem;
-      padding: 0;
-      margin: 0.2rem 0;
-      width: calc(100% - 25px);
-      max-width: fit-content;
-
-      list-style: none;
-      color: rgba(0, 0, 0, 0.5);
-      text-transform: capitalize;
-      cursor: pointer;
-      border-bottom: 2px solid transparent;
-
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      color: $text-color-50;
-
-      &.active,
-      &:hover,
-      &:active {
-        color: $text-color;
-        border-bottom: 2px solid $text-color;
-      }
-    }
   }
 }
 
@@ -365,7 +252,7 @@ hr {
   input {
     display: block;
     width: 100%;
-    padding: 13px 0 13px 45px;
+    padding: 13px 28px 13px 45px;
     outline: none;
     margin: 0;
     border: 0;
@@ -373,10 +260,15 @@ hr {
     font-weight: 300;
     font-size: 18px;
     color: $text-color;
+    // border-bottom: 1px solid transparent;
+
+    &:focus {
+      border-color: var(--text-color);
+    }
 
     @include tablet-min {
       font-size: 24px;
-      padding: 13px 30px 13px 60px;
+      padding: 13px 40px 13px 60px;
     }
   }
 

src/components/SearchPage.vue

@@ -1,16 +1,30 @@
 <template>
   <div>
-    <button @click="updateQueryParams">Shows</button>
+    <div style="display: flex; flex-direction: row">
+      <label class="filter">
+        <span>Search filter:</span>
+
+        <toggle-button
+          :options="['All', 'movie', 'show']"
+          :selected="mediaType"
+          @change="toggleChanged"
+        />
+      </label>
+    </div>
+
     <ResultsSection :title="title" :apiFunction="searchTmdb" />
   </div>
 </template>
 
 <script>
-import ResultsSection from "./ResultsSection";
 import { searchTmdb } from "@/api";
 
+import ResultsSection from "./ResultsSection";
+import ListHeader from "@/components/ListHeader";
+import ToggleButton from "@/components/ui/ToggleButton";
+
 export default {
-  components: { ResultsSection },
+  components: { ResultsSection, ListHeader, ToggleButton },
   data() {
     return {
       query: "",
@@ -19,16 +33,6 @@ export default {
       mediaType: null
     };
   },
-  watch: {
-    $route(to, from) {
-      console.log("query", to, from);
-      const { query, page, adult, media_type } = this.$route.query;
-      if (query != this.query) console.log("query updated");
-      if (page != this.page) console.log("page updated");
-      if (adult != this.adult) console.log("adult updated");
-      if (media_type != this.media_type) console.log("media_type updated");
-    }
-  },
   computed: {
     title() {
       return `Search results: ${this.query}`;
@@ -36,18 +40,25 @@ export default {
   },
   methods: {
     searchTmdb(page = this.page) {
+      if (this.query && this.query.length)
         return searchTmdb(this.query, page, this.adult, this.mediaType);
     },
+    toggleChanged(value) {
+      if (["movie", "show"].includes(value.toLowerCase())) {
+        this.mediaType = value.toLowerCase();
+      } else {
+        this.mediaType = null;
+      }
+      this.updateQueryParams();
+    },
     updateQueryParams() {
-      console.log("updating");
       const { query, page, adult, media_type } = this.$route.query;
-      this.media_type = media_type == "show" ? "movie" : "show";
 
       this.$router.push({
         path: "search",
         query: {
           ...this.$route.query,
-          media_type: this.media_type
+          media_type: this.mediaType
         }
       });
     }
@@ -69,4 +80,18 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.filter {
+  margin-top: 0.5rem;
+  margin-left: 1.25rem;
+  display: inline-flex;
+  flex-direction: column;
+
+  span {
+    font-size: 1.1rem;
+    line-height: 1;
+    margin: 0.5rem 0;
+    font-weight: 300;
+  }
+}
+</style>

src/components/ui/ToggleButton.vue

@@ -1,14 +1,18 @@
 <template>
   <div class="toggle-container">
-    <button v-for="option in options" class="toggle-button" @click="toggle(option)"
+    <button
+      v-for="option in options"
+      class="toggle-button"
+      @click="toggle(option)"
       :class="toggleValue === option ? 'selected' : null"
-    >{{ option }}</button>
+    >
+      {{ option }}
+    </button>
   </div>
 </template>
 
-
 <script>
-export default {
+export default {
   props: {
     options: {
       Array,
@@ -23,22 +27,20 @@ export default {
   data() {
     return {
       toggleValue: this.selected || this.options[0]
-    }
+    };
-  },
-  beforeMount() {
-    this.toggle(this.toggleValue)
   },
   methods: {
     toggle(toggleValue) {
       this.toggleValue = toggleValue;
       if (this.selected !== undefined) {
-        this.$emit('update:selected', toggleValue)
+        this.$emit("update:selected", toggleValue);
+        this.$emit("change", toggleValue);
       } else {
-        this.$emit('change', toggleValue)
+        this.$emit("change", toggleValue);
       }
     }
-  },
   }
+};
 </script>
 
 <style lang="scss" scoped>
@@ -54,7 +56,6 @@ $background-selected: $background-color-secondary;
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  // padding: 0.2rem;
   background-color: $background;
   border: 2px solid $background;
   border-radius: 8px;
@@ -65,36 +66,18 @@ $background-selected: $background-color-secondary;
     font-size: 1rem;
     line-height: 1rem;
     font-weight: normal;
-    width: 100%;
+    padding: 0.5rem;
-    padding: 0.5rem 0;
     border: 0;
     color: $text-color;
-    // background-color: $text-color-5;
     background-color: $background;
     text-transform: capitalize;
+    cursor: pointer;
 
     &.selected {
       color: $text-color;
-      // background-color: $background-color-secondary;
       background-color: $background-selected;
       border-radius: 8px;
     }
-
-    // &:first-of-type, &:last-of-type {
-    //   border-left: 4px solid $background;
-    //   border-right: 4px solid $background;
-    // }
-
-
-    // &:first-of-type {
-    //   border-top-left-radius: 4px;
-    //   border-bottom-left-radius: 4px;
-    // }
-
-    // &:last-of-type {
-    //   border-top-right-radius: 4px;
-    //   border-bottom-right-radius: 4px;
-    // }
   }
 }
 </style>

src/icons/IconClose.vue

@@ -0,0 +1,19 @@
+<template>
+  <svg
+    @click="$emit('click')"
+    @keydown="event => $emit('keydown', event)"
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="feather feather-x"
+  >
+    <line x1="18" y1="6" x2="6" y2="18"></line>
+    <line x1="6" y1="6" x2="18" y2="18"></line>
+  </svg>
+</template>

src/icons/IconMovie.vue

@@ -0,0 +1,22 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    stroke-width="1"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"></rect>
+    <line x1="7" y1="2" x2="7" y2="22"></line>
+    <line x1="17" y1="2" x2="17" y2="22"></line>
+    <line x1="2" y1="12" x2="22" y2="12"></line>
+    <line x1="2" y1="7" x2="7" y2="7"></line>
+    <line x1="2" y1="17" x2="7" y2="17"></line>
+    <line x1="17" y1="17" x2="22" y2="17"></line>
+    <line x1="17" y1="7" x2="22" y2="7"></line>
+  </svg>
+</template>

src/icons/IconPerson.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
+    <circle cx="12" cy="7" r="4"></circle>
+  </svg>
+</template>

src/icons/IconShow.vue

@@ -0,0 +1,17 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    style="margin-top: -2px"
+  >
+    <rect x="2" y="7" width="20" height="15" rx="2" ry="2"></rect>
+    <polyline points="17 2 12 7 7 2"></polyline>
+  </svg>
+</template>