Files
marketplaces/src/app/components/back-button/back-button.component.ts
2026-02-19 01:23:25 +04:00

69 lines
1.6 KiB
TypeScript

import { Component } from '@angular/core';
import { Location } from '@angular/common';
import { environment } from '../../../environments/environment';
@Component({
selector: 'app-back-button',
template: `
@if (!isnovo) {
<button class="dexar-back-btn" (click)="goBack()" aria-label="Назад">
<svg width="37" height="24" viewBox="0 0 37 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.73 11.46c-.97-.52-.97-1.4 0-1.92L20.39 1.21c1.48-.79 3.89-.19 3.89.95v3.74h6.94c1.28 0 2.31.59 2.31 1.31v6.56c0 .73-1.03 1.31-2.31 1.31h-6.94v3.74c0 1.15-2.42 1.74-3.89.96L4.73 11.46Z"
fill="#497671" fill-opacity="0.75" stroke="white" stroke-opacity="0.6" stroke-linejoin="round"/>
</svg>
</button>
}
`,
styles: [`
.dexar-back-btn {
position: fixed;
top: 76px;
left: 20px;
z-index: 100;
background: none;
border: none;
cursor: pointer;
padding: 4px;
transition: transform 0.2s ease;
svg path {
transition: fill 0.2s ease, fill-opacity 0.2s ease;
}
&:hover {
transform: scale(1.08);
svg path {
fill: #A1B4B5;
fill-opacity: 1;
}
}
&:active {
transform: scale(0.95);
}
}
@media (max-width: 768px) {
.dexar-back-btn {
top: 68px;
left: 12px;
svg {
width: 30px;
height: 20px;
}
}
}
`]
})
export class BackButtonComponent {
isnovo = environment.theme === 'novo';
constructor(private location: Location) {}
goBack(): void {
this.location.back();
}
}