+
+ You are creating a new group. Share this code with your flatmates so
+ they can join the group.
+
+
+
+
+ #
+ {id}
+
+ {copiedToClipboard ? (
+
+ Code copied to clipboard!
+
+ ) : null}
+
+
+
+
+
+
+ );
+};
+
+export default CreateGroup;
diff --git a/client/src/Flats.tsx b/client/src/Flats.tsx
new file mode 100644
index 0000000..f3af35f
--- /dev/null
+++ b/client/src/Flats.tsx
@@ -0,0 +1,57 @@
+import { useEffect, useState } from "react";
+import { stockData } from "./stock";
+import styled from "styled-components";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
+
+const FlatCard = styled.div`
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ border: 1px solid #ccc;
+ border-radius: 10px;
+ padding: 10px;
+ margin: 10px;
+ width: 300px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ text-align: left;
+ background-color: #2a4d1a;
+`;
+
+const FlatName = styled.div`
+ font-weight: bold;
+ font-size: 18px;
+`;
+
+export const Flats = () => {
+ const [items, setItems] = useState