diff options
Diffstat (limited to 'packages/frontend/src/components/MkGoogle.vue')
| -rw-r--r-- | packages/frontend/src/components/MkGoogle.vue | 51 |
1 files changed, 51 insertions, 0 deletions
diff --git a/packages/frontend/src/components/MkGoogle.vue b/packages/frontend/src/components/MkGoogle.vue new file mode 100644 index 0000000000..d104cd4cd4 --- /dev/null +++ b/packages/frontend/src/components/MkGoogle.vue @@ -0,0 +1,51 @@ +<template> +<div class="mk-google"> + <input v-model="query" type="search" :placeholder="q"> + <button @click="search"><i class="ti ti-search"></i> {{ $ts.searchByGoogle }}</button> +</div> +</template> + +<script lang="ts" setup> +import { ref } from 'vue'; + +const props = defineProps<{ + q: string; +}>(); + +const query = ref(props.q); + +const search = () => { + window.open(`https://www.google.com/search?q=${query.value}`, '_blank'); +}; +</script> + +<style lang="scss" scoped> +.mk-google { + display: flex; + margin: 8px 0; + + > input { + flex-shrink: 1; + padding: 10px; + width: 100%; + height: 40px; + font-size: 16px; + border: solid 1px var(--divider); + border-radius: 4px 0 0 4px; + -webkit-appearance: textfield; + } + + > button { + flex-shrink: 0; + margin: 0; + padding: 0 16px; + border: solid 1px var(--divider); + border-left: none; + border-radius: 0 4px 4px 0; + + &:active { + box-shadow: 0 2px 4px rgba(#000, 0.15) inset; + } + } +} +</style> |