<commit_before><template>
  <div class="search-container bg-white border-b border-r border-grey-light h-16 px-4 flex items-center justify-center">
    <div class="relative w-full">
      <input
        v-model="currentSearchQuery"
        type="text"
        class="search-input text-input w-full pl-8"
        placeholder="Gaze through your telescope">
      <Icon
        type="SearchIcon"
        class="search-input-icon absolute fill-none stroke-grey transition-stroke"
        height="18"/>
    </div>
  </div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex'
import Icon from '@/components/Icon'

export default {
  name: 'Galileo',
  components: {
    Icon
  },
  computed: {
    ...mapGetters({
      query: 'searchQuery'
    }),
    currentSearchQuery: {
      get () {
        return this.query
      },
      set (query) {
        this.setSearchQuery(query)
      }
    }
  },
  methods: {
    ...mapActions(['setSearchQuery'])
  }
}
</script>
<style lang="scss">
.search-input:focus {
  border-color: config('colors.grey');
  + .search-input-icon {
    stroke: config('colors.grey');
  }
}
.search-input-icon {
  top: 11px;
  left: 8px;
  stroke: config('colors.grey-light');
}
</style><commit_msg>Added clear search button to search bar<commit_after><template>
  <div class="search-container bg-white border-b border-r border-grey-light h-16 px-4 flex items-center justify-center">
    <div class="relative w-full">
      <input
        v-model="currentSearchQuery"
        type="text"
        class="search-input text-input w-full pl-8"
        placeholder="Gaze through your telescope">
      <Icon
        type="SearchIcon"
        class="search-input-icon absolute fill-none stroke-grey transition-stroke"
        height="18"/>
        <button
        v-if="query"
        class="clear-search-icon absolute text-1xl focus-none rounded-full w-6 h-6 bg-transparent hover:bg-grey-light transition-bg"
        @click="resetSearch">&times;</button>
    </div>
  </div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex'
import Icon from '@/components/Icon'

export default {
  name: 'Galileo',
  components: {
    Icon
  },
  computed: {
    ...mapGetters({
      query: 'searchQuery'
    }),
    currentSearchQuery: {
      get () {
        return this.query
      },
      set (query) {
        this.setSearchQuery(query)
      }
    }
  },
  methods: {
    ...mapActions(['setSearchQuery']),
    resetSearch () {
      this.setSearchQuery('')
    }
  }
}
</script>
<style lang="scss">
.search-input:focus {
  border-color: config('colors.grey');
  + .search-input-icon {
    stroke: config('colors.grey');
  }
}
.search-input-icon {
  top: 11px;
  left: 8px;
  stroke: config('colors.grey-light');
}
.clear-search-icon {
  top: 7px;
  right: 7px;
  stroke: config('colors.grey-light');
}
</style>
{'fraction_non_alphanumeric': 0.15354884047786366, 'fraction_numerical': 0.008081517919887562, 'mean_word_length': 2.6453265044814342, 'pattern_counts': {'":': 0, '<': 29, '<?xml version=': 0, '>': 29, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '671725', 'n_tokens_mistral': 948, 'n_tokens_neox': 923, 'n_words': 193}