From 568665da7dde2c3cf4f25fe9f41d9889c501dc9b Mon Sep 17 00:00:00 2001
From: Sasha Chabin <alex.chabin@gmail.com>
Date: Mon, 26 Aug 2024 22:41:35 +0500
Subject: [PATCH] Add new-link icon to cards with external links (#116)

---
 client/components/MainPage/Card/Card.module.css      | 12 +++++++++++-
 client/components/MainPage/Card/Card.tsx             |  6 ++++++
 .../components/MainPage/Card/icon-external-link.svg  |  1 +
 3 files changed, 18 insertions(+), 1 deletion(-)
 create mode 100644 client/components/MainPage/Card/icon-external-link.svg

diff --git a/client/components/MainPage/Card/Card.module.css b/client/components/MainPage/Card/Card.module.css
index a0ea5bf..ba44691 100644
--- a/client/components/MainPage/Card/Card.module.css
+++ b/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);
     }
 
diff --git a/client/components/MainPage/Card/Card.tsx b/client/components/MainPage/Card/Card.tsx
index 004b9ab..2959502 100644
--- a/client/components/MainPage/Card/Card.tsx
+++ b/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>}
diff --git a/client/components/MainPage/Card/icon-external-link.svg b/client/components/MainPage/Card/icon-external-link.svg
new file mode 100644
index 0000000..a1b610b
--- /dev/null
+++ b/client/components/MainPage/Card/icon-external-link.svg
@@ -0,0 +1 @@
+<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor"><path d="m4.875 4.5c-.20711 0-.375.16789-.375.375v14.25c0 .2071.16789.375.375.375h14.25c.2071 0 .375-.1679.375-.375v-6.9h2.25v6.9c0 1.4498-1.1753 2.625-2.625 2.625h-14.25c-1.44975 0-2.625-1.1753-2.625-2.625v-14.25c0-1.44975 1.17525-2.625 2.625-2.625h6.9v2.25z"/><path d="m17.909 4.5h-4.034v-2.25h7.875v7.875h-2.25v-4.03401l-6.7045 6.70451-1.591-1.591z"/></g></svg>
\ No newline at end of file