Commit 755ee6b5 authored by Bendegúz Cseresnyés's avatar Bendegúz Cseresnyés
Browse files

Format guest page

parent 2713da0f
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>
);
}
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>
);
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment