From bcf89a0f56b35b0c76ff7a2d5ceaf84e939d42fa Mon Sep 17 00:00:00 2001
From: Alexander Rudolph <alexr30@web.de>
Date: Wed, 15 Dec 2021 18:01:06 +0100
Subject: [PATCH] create layout for the tiles where the boats are shown
---
client/src/components/RentedBoatTile.tsx | 18 ++++++++++++++++++
1 file changed, 18 insertions(+)
create mode 100644 client/src/components/RentedBoatTile.tsx
diff --git a/client/src/components/RentedBoatTile.tsx b/client/src/components/RentedBoatTile.tsx
new file mode 100644
index 0000000..1a10abb
--- /dev/null
+++ b/client/src/components/RentedBoatTile.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+// import { Image } from "react-bootstrap";
+// import { Link } from "react-router-dom";
+
+function RentedBoatTile(props: any) {
+ return(
+ <div className="rented-boat-tile mb-1 col-sm rounded-2" style={{height: "5rem", minWidth: "17rem", maxWidth: "100%)", margin: "10px"}}>
+ <div className="tile-body position-relative w-100 h-100">
+ <h3 className="tile-label-boatName position-absolute top-0 start-0 text-white fw-bold">{props.boatName}</h3>
+ <h4 className="tile-label-time position-absolute top-0 end-0 text-white">{props.time}</h4>
+ <h4 className="tile-label-persons position-absolute bottom-0 start-0 text-white">{props.persons}</h4>
+ <h3 className="tile-label-overdue position-absolute bottom-0 end-0 text-white fw-bold">{props.overdue}</h3>
+ </div>
+ </div>
+ );
+}
+
+export default RentedBoatTile;
\ No newline at end of file
--
GitLab