From fdc2ecda32d83a20cec6f0ea4a49c98e10f6f201 Mon Sep 17 00:00:00 2001
From: nicosammito <nico@sammito.de>
Date: Fri, 3 May 2024 16:26:54 +0200
Subject: [PATCH] implementation of simple flex container

---
 src/components/flex/Flex.stories.tsx | 20 ++++++++++++++++++++
 src/components/flex/Flex.style.scss  |  3 +++
 src/components/flex/Flex.tsx         | 20 ++++++++++++++++++++
 src/index.ts                         |  1 +
 4 files changed, 44 insertions(+)
 create mode 100644 src/components/flex/Flex.stories.tsx
 create mode 100644 src/components/flex/Flex.style.scss
 create mode 100644 src/components/flex/Flex.tsx

diff --git a/src/components/flex/Flex.stories.tsx b/src/components/flex/Flex.stories.tsx
new file mode 100644
index 00000000..44038173
--- /dev/null
+++ b/src/components/flex/Flex.stories.tsx
@@ -0,0 +1,20 @@
+import {Meta} from "@storybook/react";
+import React from "react";
+import Flex from "./Flex";
+import Text from "../Text/Text";
+
+const meta: Meta = {
+    title: "Flex",
+    component: Flex
+}
+
+export default meta
+
+export const ExampleFlex = () => {
+
+    return <Flex>
+        <Text size={"md"} mr={1}>Example Text 1</Text>
+        <Text size={"md"}>Example Text 2</Text>
+    </Flex>
+
+}
\ No newline at end of file
diff --git a/src/components/flex/Flex.style.scss b/src/components/flex/Flex.style.scss
new file mode 100644
index 00000000..271fd71c
--- /dev/null
+++ b/src/components/flex/Flex.style.scss
@@ -0,0 +1,3 @@
+.flex {
+  display: flex;
+}
\ No newline at end of file
diff --git a/src/components/flex/Flex.tsx b/src/components/flex/Flex.tsx
new file mode 100644
index 00000000..1040b513
--- /dev/null
+++ b/src/components/flex/Flex.tsx
@@ -0,0 +1,20 @@
+import {Code0Component} from "../../utils/types";
+import React from "react";
+import {mergeCode0Props} from "../../utils/utils";
+import "./Flex.style.scss";
+
+interface FlexType extends Code0Component<HTMLDivElement> {
+    children: React.ReactNode | React.ReactNode[]
+}
+
+const Flex: React.FC<FlexType> = props => {
+
+    const {children, ...rest} = props
+
+    return <div {...mergeCode0Props("flex", rest)}>
+        {children}
+    </div>
+
+}
+
+export default Flex
\ No newline at end of file
diff --git a/src/index.ts b/src/index.ts
index 1fd431ec..7c6d7c59 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -14,3 +14,4 @@ export { default as Popover} from "./components/popover/Popover"
 export { default as Quote} from "./components/quote/Quote"
 export { default as Row} from "./components/row/Row"
 export { default as Tooltip} from "./components/tooltip/Tooltip"
+export { default as Flex} from "./components/flex/Flex"