52 lines
1.9 KiB
JavaScript
52 lines
1.9 KiB
JavaScript
import React from 'react';
|
|
import { Text, Button, Card, Group, Menu, Image, Badge } from '@mantine/core'
|
|
import { useAtom } from 'jotai';
|
|
// import { useNavigate } from "react-router-dom";
|
|
import { serverConfigAtom } from '../../state/state';
|
|
import { Link } from 'react-router-dom';
|
|
|
|
|
|
|
|
function LocationCard(props) {
|
|
const {location, idx} = props
|
|
const [serverConfig] = useAtom(serverConfigAtom)
|
|
|
|
const setRoomNumber = (rooms) => {
|
|
if (rooms === null) {
|
|
return <Text>0 Rooms</Text>
|
|
} else if (rooms.length > 1) {
|
|
return <Text>{rooms.length} Rooms</Text>
|
|
} else {
|
|
return <Text>1 Room</Text>
|
|
}
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
<Card key={`${idx} - ${location.ID}`} shadow="md" padding="md">
|
|
<Card.Section>
|
|
{location.CoverPhoto ? <Image src={`${serverConfig.baseURL}/files/locations/${location.Name}/${location.CoverPhoto}`}></Image> : <Text>No Photo</Text>}
|
|
<Group position='right' style={{position: 'absolute', top: '5px', right: '5px', backgroundColor: 'grey', borderRadius: '25%'}}>
|
|
<Menu>
|
|
<Menu.Label>Edit</Menu.Label>
|
|
<Menu.Label>Delete</Menu.Label>
|
|
</Menu>
|
|
</Group>
|
|
|
|
</Card.Section>
|
|
<Group position="apart">
|
|
<Text weight={500}>{location.Name}</Text>
|
|
<Badge variant="light">
|
|
{ setRoomNumber(location.Rooms) }
|
|
</Badge>
|
|
</Group>
|
|
<Text size="sm">{location.Description}</Text>
|
|
<Group position='right' mt="xl">
|
|
<Button component={Link} to={`/locations/${location.ID}`} state={{ location: location }}>View Location Details</Button>
|
|
</Group>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
export default LocationCard; |