Format guest page

src/components/PlacementCard.tsx

+import { Badge, HStack, Text, VStack } from "@chakra-ui/layout";
+import React, { ReactElement } from "react";
+import { Placement } from "../data/Placement";
+
+interface Props {
+  placement: Placement;
+}
+
+export default function PlacementCard({ placement }: Props): ReactElement {
+  return (
+    <VStack
+      cursor="pointer"
+      bg={placement.active ? "blue.200" : "gray.200"}
+      p={3}
+      borderRadius={4}
+      align="stretch"
+      onClick={() => {
+        console.log("placement clicked", placement);
+      }}
+    >
+      <Text fontWeight="bold" fontSize="2xl">
+        Fogas: {placement.placementNumber}
+      </Text>
+      <HStack p={1} wrap="wrap">
+        {placement.belongings.map((v) => (
+          <Badge>{v}</Badge>
+        ))}
+      </HStack>
+    </VStack>
+  );
+}

src/pages/Guest.tsx

 import { Button } from "@chakra-ui/button";
-import { HStack, Text, VStack } from "@chakra-ui/layout";
+import { Grid, HStack, Text, VStack } from "@chakra-ui/layout";
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { ReactElement, useState } from "react";
 import { useHistory } from "react-router";
+import PlacementCard from "../components/PlacementCard";
 import { Person } from "../data/Person";
 import CreatePersonDialog from "../dialogs/CreatePersonDialog";
 import CreatePlacementDialog from "../dialogs/CreatePlacementDialog";
@@ -15,8 +16,8 @@ export default function Guest(): ReactElement {
   const history = useHistory();
 
   return (
-    <VStack align="stretch">
-      <Text fontSize="3xl">Vendég</Text>
+    <VStack align="stretch" spacing={4}>
+      <Text fontSize="3xl">Vendég ({person?.name})</Text>
       <CreatePersonDialog
         barcode=""
         onCreated={(person) => setPerson(person)}
@@ -41,6 +42,36 @@ export default function Guest(): ReactElement {
           Add placement
         </Button>
       </HStack>
+      <Grid templateColumns="repeat(3, 1fr)" gap={4}>
+        <PlacementCard
+          placement={{
+            active: true,
+            barcode: "",
+            person: "",
+            belongings: ["Kabát", "Piros táska"],
+            placementNumber: "123",
+          }}
+        />
+        <PlacementCard
+          placement={{
+            active: true,
+            barcode: "",
+            person: "",
+            belongings: ["Kabát", "Kék táska", "Síléc"],
+            placementNumber: "124",
+          }}
+        />
+
+        <PlacementCard
+          placement={{
+            active: false,
+            barcode: "",
+            person: "",
+            belongings: ["Kokain", "Aggregátor"],
+            placementNumber: "125",
+          }}
+        />
+      </Grid>
     </VStack>
   );
 }