Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat: home page card added to schedule page atm #103

Merged
merged 2 commits into from
Sep 26, 2024
Merged

Feat: home page card added to schedule page atm #103

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e96caad
Feat: home page card added to schedule page atm
Danie1T Aug 9, 2024
744e1b0
Run linter and remove comment
KathleenX7 Sep 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
88 changes: 88 additions & 0 deletions frontend/src/components/pages/home/HomeRoomCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
import React from "react"
import {
Flex,
Heading,
Text,
Box,
Circle
} from "@chakra-ui/react";

type Props = {
room: string | number;
residentId: number;
};

const RoomCard = ({
room,
residentId
}: Props): React.ReactElement => {

return (
<Box
p="10px"
ml="30px"
mr="20px"
mt="20px"
border="solid"
borderRadius="10px"
borderColor="gray.300"
w="17vw"
>
{/* <Avatar name="Jane Doe" src="https://bit.ly/2k1H1t6" /> */}
<Flex flexDir="column" ml={4} my={4}>
<Heading size="sm" color="purple.500">
Room {room} — ID{residentId}
</Heading>
<Flex flexDir="column" my="5px">
<Flex flexDir="row">
<Circle
size="35px"
border="solid"
borderColor="gray.300"
my={1}
>
<Flex alignItems="center" justifyContent="center" fontSize="sm">
1
</Flex>
</Circle>
<Flex alignItems="center" justifyContent="center" fontSize="md" ml={3}>
Pending Tasks
</Flex>
</Flex>
<Flex flexDir="row">
<Circle
size="35px"
border="solid"
borderColor="gray.300"
my={1}
>
<Flex alignItems="center" justifyContent="center" fontSize="sm">
2
</Flex>
</Circle>
<Flex alignItems="center" justifyContent="center" fontSize="md" ml={3}>
Tasks Assigned
</Flex>
</Flex>
<Flex flexDir="row">
<Circle
size="35px"
border="solid"
borderColor="gray.300"
my={1}
>
<Flex alignItems="center" justifyContent="center" fontSize="sm">
2
</Flex>
</Circle>
<Flex alignItems="center" justifyContent="center" fontSize="md" ml={3}>
Active Warnings
</Flex>
</Flex>
</Flex>
</Flex>
</Box>
)
}

export default RoomCard;
25 changes: 23 additions & 2 deletions frontend/src/components/pages/schedule/SchedulePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,31 @@
import React from "react";
import {
Flex,
} from "@chakra-ui/react";

import RoomCard from "../home/HomeRoomCard"
import { residentsMockData } from "../../../mocks/residents";

const renderRoomCards = residentsMockData.map(resident =>
<RoomCard
key={resident.residentId}
room={resident.roomNumber}
residentId={resident.residentId}
/>
)


const SchedulePage = (): React.ReactElement => {
return (
<div>
<Flex flexDir="column" flexGrow={1} p="20px">
<h1>Schedule Page</h1>
</div>
<Flex
flexWrap="wrap"
justifyContent="flex-start"
>
{renderRoomCards}
</Flex>
</Flex>
);
};

Expand Down
Loading