feat: title and icon support

examples/web/react/app.tsx

@@ -8,7 +8,8 @@ import {
     Info,
     Pair,
     PanelSplit,
-    Section
+    Section,
+    Title
 } from "./components";
 
 import "./app.css";
@@ -19,7 +20,13 @@ export const App = () => {
     const onClick = () => setCount(count + 1);
     return (
         <>
-            <PanelSplit>
+            <PanelSplit left={<div>This is the left panel</div>}>
+                <Title
+                    text="Boytacean"
+                    version="0.3.0"
+                    versionUrl="https://gitlab.stage.hive.pt/joamag/boytacean/-/blob/master/CHANGELOG.md"
+                    iconSrc={require("../res/thunder.png")}
+                ></Title>
                 <Section>
                     <Button text={getText()} onClick={onClick} />
                     <Button

examples/web/react/components/index.ts

@@ -2,6 +2,8 @@ export * from "./button/button";
 export * from "./button-increment/button-increment";
 export * from "./button-switch/button-switch";
 export * from "./info/info";
+export * from "./link/link";
 export * from "./pair/pair";
 export * from "./panel-split/panel-split";
 export * from "./section/section";
+export * from "./title/title";

examples/web/react/components/link/link.css

+.link {
+    border-bottom: 2px dotted #ffffff;
+    color: #ffffff;
+    text-decoration: none;
+}

examples/web/react/components/link/link.tsx

+import React, { FC } from "react";
+
+import "./link.css";
+
+type LinkProps = {
+    text: string;
+    href?: string;
+    target?: string;
+    style?: string[];
+};
+
+export const Link: FC<LinkProps> = ({ text, href, target, style = [] }) => {
+    const classes = () => ["link", ...style].join(" ");
+    return (
+        <a className={classes()} href={href} target={target}>
+            {text}
+        </a>
+    );
+};
+
+export default Link;

examples/web/react/components/title/title.css

+.title > .link {
+    margin-left: 14px;
+}
+
+.title > .icon {
+    margin-left: 14px;
+    vertical-align: middle;
+    width: 32px;
+}

examples/web/react/components/title/title.tsx

+import React, { FC } from "react";
+import { Link } from "../link/link";
+
+import "./title.css";
+
+type TitleProps = {
+    text: string;
+    version?: string;
+    versionUrl?: string;
+    iconSrc?: string;
+    style?: string[];
+};
+
+export const Title: FC<TitleProps> = ({
+    text,
+    version,
+    versionUrl,
+    iconSrc,
+    style = []
+}) => {
+    const classes = () => ["title", ...style].join(" ");
+    return (
+        <h1 className={classes()}>
+            {text}
+            {version && (
+                <Link text={version} href={versionUrl} target="_blank"></Link>
+            )}
+            {iconSrc && <img className="icon" src={iconSrc} alt="icon" />}
+        </h1>
+    );
+};
+
+export default Title;