feat: better paragraph support

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

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";

examples/web/react/components/paragraph/paragraph.css

+.paragraph {
+    font-size: 18px;
+    line-height: 24px;
+    margin: 12px 0px 12px 0px;
+}

examples/web/react/components/paragraph/paragraph.tsx

+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;

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>