Add new-link icon to cards with external links (#116)

client/components/MainPage/Card/Card.module.css

@@ -111,6 +111,10 @@
 }
 
 .CardTitle {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
     position: relative;
     font-size: 16px;
     font-weight: 500;
@@ -124,6 +128,7 @@
 }
 
 .CardTitle.CardTitle_Bg {
+    width: auto;
     padding: .5em .75em;
     color: white;
     text-decoration-color: rgba(255, 255, 255, 0.3);
@@ -154,12 +159,17 @@
     line-height: 1.35;
 }
 
+.CardExternalLink {
+    margin-left: 16px;
+    flex-shrink: 0;
+}
+
 @media screen and (min-width: 375px) {
     .Card {
         padding: 24px;
     }
 
-    .CardTitle   {
+    .CardTitle {
         font-size: max(16px, 4vw);
     }
 

client/components/MainPage/Card/Card.tsx

@@ -6,6 +6,8 @@ import { useSmoothCorners } from './useSmoothCorners';
 
 import { CardProps } from './Card.types';
 
+import NewLink from './icon-external-link.svg';
+
 import styles from './Card.module.css';
 
 const CARD_TYPES_CLASSNAMES = {
@@ -32,6 +34,8 @@ export function Card({
 }: CardProps) {
     const cardRef = useRef<HTMLAnchorElement>(null);
     const cardTitleRef = useRef<HTMLDivElement>(null);
+    const isExternalUrl = url.includes('http');
+
     useSmoothCorners(cardRef);
 
     if (titleBackgroundColor) {
@@ -44,6 +48,7 @@ export function Card({
             href={url}
             onClick={onClick}
             ref={cardRef}
+            target={isExternalUrl ? '_blank' : ''}
             style={
                 {
                     '--CardTitleBgColor': titleBackgroundColor,
@@ -61,6 +66,7 @@ export function Card({
                     ref={cardTitleRef}
                 >
                     {t(title)}
+                    {isExternalUrl && <NewLink className={cn(styles.CardExternalLink)} />}
                 </div>
             )}
             {headerCaption && <p className={cn(styles.CardHeaderCaption)}>{t(headerCaption)}</p>}