From 24c2f05a76f0e201a117a4f6d785be092c5ddc53 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 10:55:32 +0100
Subject: [PATCH] feat: initial section implementation
---
examples/web/react/components/index.ts | 1 +
examples/web/react/components/info/info.tsx | 4 +--
.../web/react/components/section/section.css | 0
.../web/react/components/section/section.tsx | 25 +++++++++++++++++++
4 files changed, 28 insertions(+), 2 deletions(-)
create mode 100644 examples/web/react/components/section/section.css
create mode 100644 examples/web/react/components/section/section.tsx
diff --git a/examples/web/react/components/index.ts b/examples/web/react/components/index.ts
index e97b9f97..4672a519 100644
--- a/examples/web/react/components/index.ts
+++ b/examples/web/react/components/index.ts
@@ -3,3 +3,4 @@ export * from "./button-increment/button-increment";
export * from "./button-switch/button-switch";
export * from "./info/info";
export * from "./pair/pair";
+export * from "./section/section";
diff --git a/examples/web/react/components/info/info.tsx b/examples/web/react/components/info/info.tsx
index ce6130a4..a899b91c 100644
--- a/examples/web/react/components/info/info.tsx
+++ b/examples/web/react/components/info/info.tsx
@@ -3,7 +3,7 @@ import React, { FC, ReactNode } from "react";
import "./info.css";
type InfoProps = {
- children?: ReactNode;
+ children: ReactNode;
style?: string[];
};
@@ -18,7 +18,7 @@ type InfoProps = {
* to build the info pairs.
* @returns The info component with the associated pairs.
*/
-export const Info: FC<InfoProps> = ({ children = [], style = [] }) => {
+export const Info: FC<InfoProps> = ({ children, style = [] }) => {
const classes = () => ["info", ...style].join(" ");
return <dl className={classes()}>{children}</dl>;
};
diff --git a/examples/web/react/components/section/section.css b/examples/web/react/components/section/section.css
new file mode 100644
index 00000000..e69de29b
diff --git a/examples/web/react/components/section/section.tsx b/examples/web/react/components/section/section.tsx
new file mode 100644
index 00000000..91a84184
--- /dev/null
+++ b/examples/web/react/components/section/section.tsx
@@ -0,0 +1,25 @@
+import React, { FC, ReactNode } from "react";
+
+import "./section.css";
+
+type SectionProps = {
+ children: ReactNode;
+ separator?: boolean;
+ style?: string[];
+};
+
+export const Section: FC<SectionProps> = ({
+ children,
+ separator = true,
+ style = []
+}) => {
+ const classes = () => ["section", ...style].join(" ");
+ return (
+ <div className={classes()}>
+ {separator && <div className="separator"></div>}
+ <div className="section-contents">{children}</div>
+ </div>
+ );
+};
+
+export default Section;
--
GitLab