From 30986c3b221e3e7cd3ec89f14c99253aa1bd6595 Mon Sep 17 00:00:00 2001
From: leon-up9 <97597983+leon-up9@users.noreply.github.com>
Date: Tue, 19 Apr 2022 13:50:34 +0300
Subject: [PATCH] Link component (#1005)

* Link component

* change defualt use

* PR comments

Co-authored-by: Leon <>
---
 .../src/components/UI/InformationIcon.tsx     | 23 +++++++++++--------
 ui-common/src/components/UI/index.ts          |  4 ++--
 2 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/ui-common/src/components/UI/InformationIcon.tsx b/ui-common/src/components/UI/InformationIcon.tsx
index 51bd8b6d9..7bbb90137 100644
--- a/ui-common/src/components/UI/InformationIcon.tsx
+++ b/ui-common/src/components/UI/InformationIcon.tsx
@@ -1,19 +1,22 @@
-import React, { CSSProperties } from "react";
+import React from "react";
 import styles from "./style/InformationIcon.module.sass"
 
 const DEFUALT_LINK = "https://getmizu.io/docs"
 
-export interface InformationIconProps {
+interface LinkProps {
     link?: string,
-    style?: CSSProperties
+    className?: string
+    title?: string
 }
 
-export const InformationIcon: React.FC<InformationIconProps> = ({ link, style }) => {
-    return <React.Fragment>
-        <a href={DEFUALT_LINK ? DEFUALT_LINK : link} style={style} className={styles.linkStyle} title="documentation" target="_blank">
-            <span>Docs</span>
-        </a>
-    </React.Fragment>
+export const Link: React.FC<LinkProps> = ({ link, className, title, children }) => {
+    return <a href={link} className={className} title={title} target="_blank">
+        {children}
+    </a>
 }
 
-
+export const InformationIcon: React.FC<LinkProps> = ({ className }) => {
+    return <Link title="documentation" className={`${styles.linkStyle} ${className}`} link={DEFUALT_LINK}>
+        <span>Docs</span>
+    </Link>
+}
\ No newline at end of file
diff --git a/ui-common/src/components/UI/index.ts b/ui-common/src/components/UI/index.ts
index 481196b54..b4d6c904b 100644
--- a/ui-common/src/components/UI/index.ts
+++ b/ui-common/src/components/UI/index.ts
@@ -5,10 +5,10 @@ import Tooltip from "./Tooltip";
 import Checkbox from "./Checkbox"
 import { StatusBar } from "./StatusBar";
 import CustomModal from "./CustomModal";
-import { InformationIcon } from "./InformationIcon";
+import { InformationIcon, Link } from "./InformationIcon";
 import SelectList from "./SelectList";
 import NoDataMessage from "./NoDataMessage";
 
 
-export { LoadingOverlay, Select, Tabs, Tooltip, Checkbox, CustomModal, InformationIcon, SelectList, NoDataMessage }
+export { LoadingOverlay, Select, Tabs, Tooltip, Checkbox, CustomModal, InformationIcon, SelectList, NoDataMessage, Link }
 export { StatusBar }
\ No newline at end of file