Захаров Дмитрий Анатольевич
54 lines
1.5 KiB
Vue
54 lines
1.5 KiB
Vue
<script lang="ts" setup>
|
|
import type { ButtonTranslations } from 'vitepress/types/local-search'
|
|
import { createSearchTranslate } from 'vitepress/dist/client/theme-default/support/translation'
|
|
|
|
const defaultTranslations: { button: ButtonTranslations } = {
|
|
button: {
|
|
buttonText: 'Поиск',
|
|
buttonAriaLabel: 'Поиск'
|
|
}
|
|
}
|
|
|
|
const $t = createSearchTranslate(defaultTranslations)
|
|
</script>
|
|
|
|
<template>
|
|
<button type="button" :class="$style.HomeHeroSearchButton" :aria-label="$t('button.buttonAriaLabel')">
|
|
<span :class="$style.HomeHeroSearchButtonContainer">
|
|
<img :class="$style.HomeHeroSearchButtonIcon" src="/icons/search.svg" alt="Поиск">
|
|
<span :class="$style.HomeHeroSearchButtonPlaceholder">{{ $t('button.buttonText') }}</span>
|
|
</span>
|
|
</button>
|
|
</template>
|
|
|
|
<style lang="scss" module>
|
|
@use "@beeline/design-tokens/scss/tokens/themes";
|
|
@use "@beeline/design-tokens/scss/tokens/globals/sizes";
|
|
@use "@beeline/design-tokens/scss/mixin";
|
|
@use "@beeline/design-tokens/scss/tokens/components/search";
|
|
|
|
.HomeHeroSearchButton {
|
|
display: flex;
|
|
width: 100%;
|
|
align-items: center;
|
|
border-radius: search.$search-border-radius;
|
|
height: search.$search-medium-height;
|
|
background: search.$search-background-color;
|
|
|
|
&Container {
|
|
display: flex;
|
|
}
|
|
|
|
&Icon {
|
|
margin: 0 search.$search-category-icon-spacing;
|
|
color: themes.$color-text-inactive;
|
|
fill: currentColor;
|
|
}
|
|
|
|
&Placeholder {
|
|
@include mixin.body2;
|
|
color: themes.$color-text-disabled;
|
|
}
|
|
}
|
|
</style>
|