From bf9608271845567c26cf67c004840d37f8d88216 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Magalh=C3=A3es?= <joamag@gmail.com>
Date: Fri, 19 Aug 2022 16:17:59 +0100
Subject: [PATCH] feat: better paragraph support
---
examples/web/react/app.tsx | 36 +++++++++++++++++++
examples/web/react/components/index.ts | 1 +
.../react/components/paragraph/paragraph.css | 5 +++
.../react/components/paragraph/paragraph.tsx | 20 +++++++++++
examples/web/react/components/title/title.tsx | 4 ++-
5 files changed, 65 insertions(+), 1 deletion(-)
create mode 100644 examples/web/react/components/paragraph/paragraph.css
create mode 100644 examples/web/react/components/paragraph/paragraph.tsx
diff --git a/examples/web/react/app.tsx b/examples/web/react/app.tsx
index 1b5e6e0f..ed6b8eac 100644
--- a/examples/web/react/app.tsx
+++ b/examples/web/react/app.tsx
@@ -6,8 +6,10 @@ import {
ButtonIncrement,
ButtonSwitch,
Info,
+ Link,
Pair,
PanelSplit,
+ Paragraph,
Section,
Title
} from "./components";
@@ -27,6 +29,40 @@ export const App = () => {
versionUrl="https://gitlab.stage.hive.pt/joamag/boytacean/-/blob/master/CHANGELOG.md"
iconSrc={require("../res/thunder.png")}
></Title>
+ <Section>
+ <Paragraph>
+ This is a{" "}
+ <Link
+ href="https://en.wikipedia.org/wiki/Game_Boy"
+ target="_blank"
+ >
+ Game Boy
+ </Link>{" "}
+ emulator built using the{" "}
+ <Link href="https://www.rust-lang.org" target="_blank">
+ Rust Programming Language
+ </Link>{" "}
+ and is running inside this browser with the help of{" "}
+ <Link href="https://webassembly.org/" target="_blank">
+ WebAssembly
+ </Link>
+ .
+ </Paragraph>
+ <Paragraph>
+ You can check the source code of it at{" "}
+ <Link
+ href="https://gitlab.stage.hive.pt/joamag/boytacean"
+ target="_blank"
+ >
+ GitLab
+ </Link>
+ .
+ </Paragraph>
+ <Paragraph>
+ TIP: Drag and Drop ROM files to the Browser to load the
+ ROM.
+ </Paragraph>
+ </Section>
<Section>
<Button text={getText()} onClick={onClick} />
<Button
diff --git a/examples/web/react/components/index.ts b/examples/web/react/components/index.ts
index e9f2875b..a9e3046a 100644
--- a/examples/web/react/components/index.ts
+++ b/examples/web/react/components/index.ts
@@ -5,5 +5,6 @@ export * from "./info/info";
export * from "./link/link";
export * from "./pair/pair";
export * from "./panel-split/panel-split";
+export * from "./paragraph/paragraph";
export * from "./section/section";
export * from "./title/title";
diff --git a/examples/web/react/components/paragraph/paragraph.css b/examples/web/react/components/paragraph/paragraph.css
new file mode 100644
index 00000000..4d6c5b87
--- /dev/null
+++ b/examples/web/react/components/paragraph/paragraph.css
@@ -0,0 +1,5 @@
+.paragraph {
+ font-size: 18px;
+ line-height: 24px;
+ margin: 12px 0px 12px 0px;
+}
diff --git a/examples/web/react/components/paragraph/paragraph.tsx b/examples/web/react/components/paragraph/paragraph.tsx
new file mode 100644
index 00000000..aeaa51dc
--- /dev/null
+++ b/examples/web/react/components/paragraph/paragraph.tsx
@@ -0,0 +1,20 @@
+import React, { ReactNode, FC } from "react";
+
+import "./paragraph.css";
+
+type ParagraphProps = {
+ children?: ReactNode;
+ text?: string;
+ style?: string[];
+};
+
+export const Paragraph: FC<ParagraphProps> = ({
+ children,
+ text,
+ style = []
+}) => {
+ const classes = () => ["paragraph", ...style].join(" ");
+ return <p className={classes()}>{children || text}</p>;
+};
+
+export default Paragraph;
diff --git a/examples/web/react/components/title/title.tsx b/examples/web/react/components/title/title.tsx
index ff77d1f3..c3906175 100644
--- a/examples/web/react/components/title/title.tsx
+++ b/examples/web/react/components/title/title.tsx
@@ -23,7 +23,9 @@ export const Title: FC<TitleProps> = ({
<h1 className={classes()}>
{text}
{version && (
- <Link href={versionUrl} target="_blank">{version}</Link>
+ <Link href={versionUrl} target="_blank">
+ {version}
+ </Link>
)}
{iconSrc && <img className="icon" src={iconSrc} alt="icon" />}
</h1>
--
GitLab