From be1b91c88e655dbd2494d16258101d0576526ab0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Magalh=C3=A3es?= <joamag@gmail.com>
Date: Thu, 18 Aug 2022 23:21:37 +0100
Subject: [PATCH] feat: title and icon support
---
examples/web/react/app.tsx | 11 +++++--
examples/web/react/components/index.ts | 2 ++
examples/web/react/components/link/link.css | 5 +++
examples/web/react/components/link/link.tsx | 21 ++++++++++++
examples/web/react/components/title/title.css | 9 +++++
examples/web/react/components/title/title.tsx | 33 +++++++++++++++++++
6 files changed, 79 insertions(+), 2 deletions(-)
create mode 100644 examples/web/react/components/link/link.css
create mode 100644 examples/web/react/components/link/link.tsx
create mode 100644 examples/web/react/components/title/title.css
create mode 100644 examples/web/react/components/title/title.tsx
diff --git a/examples/web/react/app.tsx b/examples/web/react/app.tsx
index 00864994..1b5e6e0f 100644
--- a/examples/web/react/app.tsx
+++ b/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
diff --git a/examples/web/react/components/index.ts b/examples/web/react/components/index.ts
index ce050ee2..e9f2875b 100644
--- a/examples/web/react/components/index.ts
+++ b/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";
diff --git a/examples/web/react/components/link/link.css b/examples/web/react/components/link/link.css
new file mode 100644
index 00000000..f04c472e
--- /dev/null
+++ b/examples/web/react/components/link/link.css
@@ -0,0 +1,5 @@
+.link {
+ border-bottom: 2px dotted #ffffff;
+ color: #ffffff;
+ text-decoration: none;
+}
diff --git a/examples/web/react/components/link/link.tsx b/examples/web/react/components/link/link.tsx
new file mode 100644
index 00000000..e316285b
--- /dev/null
+++ b/examples/web/react/components/link/link.tsx
@@ -0,0 +1,21 @@
+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;
diff --git a/examples/web/react/components/title/title.css b/examples/web/react/components/title/title.css
new file mode 100644
index 00000000..b10f9b68
--- /dev/null
+++ b/examples/web/react/components/title/title.css
@@ -0,0 +1,9 @@
+.title > .link {
+ margin-left: 14px;
+}
+
+.title > .icon {
+ margin-left: 14px;
+ vertical-align: middle;
+ width: 32px;
+}
diff --git a/examples/web/react/components/title/title.tsx b/examples/web/react/components/title/title.tsx
new file mode 100644
index 00000000..445e94bb
--- /dev/null
+++ b/examples/web/react/components/title/title.tsx
@@ -0,0 +1,33 @@
+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;
--
GitLab