Add share icon to expanded flight card

Angular's expanded FlightCard bottom bar has a share button on the
left next to the 'Детали рейса' action on the right. Render an icon
button backed by /assets/img/share.svg with the same
justify-content: space-between layout. Click uses the Web Share API
when available and falls back to writing the current URL to the
clipboard.
This commit is contained in:
2026-04-19 14:59:14 +03:00
parent 217971bd81
commit b04e80d2d8
2 changed files with 49 additions and 1 deletions
+25 -1
View File
@@ -150,10 +150,34 @@
&__actions {
display: flex;
justify-content: flex-end;
justify-content: space-between;
align-items: center;
padding-top: vars.$space-s;
}
&__share-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
background: transparent;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 120ms ease;
img {
width: 20px;
height: 20px;
}
&:hover {
background-color: rgba(46, 87, 255, 0.08);
}
}
&__details-btn {
background: colors.$blue;
color: #fff;
+24
View File
@@ -292,6 +292,30 @@ export const FlightCard: FC<FlightCardProps> = ({
{onViewDetails && (
<div className="flight-card__actions">
<button
type="button"
className="flight-card__share-btn"
data-testid="flight-share-button"
aria-label={t("BOARD.SHARE")}
title={t("BOARD.SHARE")}
onClick={(e) => {
e.stopPropagation();
const url = typeof window !== "undefined"
? window.location.href
: "";
const navShare = (
typeof navigator !== "undefined" &&
(navigator as Navigator & { share?: (data: ShareData) => Promise<void> }).share
);
if (navShare && url) {
void navShare.call(navigator, { url });
} else if (url && typeof navigator !== "undefined" && navigator.clipboard) {
void navigator.clipboard.writeText(url);
}
}}
>
<img src="/assets/img/share.svg" alt="" aria-hidden="true" />
</button>
<button
type="button"
className="flight-card__details-btn"