katoikia-app/mobile-ui/components/ReservasCard/index.js

76 lines
1.9 KiB
JavaScript
Raw Normal View History

2022-08-23 02:53:58 +00:00
import { format } from "date-fns";
import {
2022-08-29 23:15:46 +00:00
Box,
2022-08-23 02:53:58 +00:00
ScrollView,
Text,
Stack,
2022-08-23 04:20:07 +00:00
Heading,
Badge
2022-08-23 02:53:58 +00:00
} from "native-base";
import PropTypes from 'prop-types';
import React from 'react';
2022-08-24 17:15:27 +00:00
export const ReservasCard = ({ date, startTime, endTime, status, name}) => {
2022-08-23 02:53:58 +00:00
const dateFormated = format(new Date(date), "dd LL yyyy")
try {
} catch (error) {
}
return (
<ScrollView showsVerticalScrollIndicator={false}>
<Box mt="5" alignItems="center">
<Box width="80" rounded="lg" overflow="hidden" borderColor="coolGray.200" borderWidth="1" _dark={{
borderColor: "coolGray.600",
backgroundColor: "gray.700"
}} _web={{
shadow: 2,
borderWidth: 0
}} _light={{
backgroundColor: "gray.50"
}}>
<Stack p="4" space={3}>
<Stack space={2}>
2022-08-23 04:20:07 +00:00
2022-08-24 00:43:50 +00:00
<Badge backgroundColor={status == 1 ? 'tertiary.500' : 'danger.600'} _text={{
2022-08-23 04:20:07 +00:00
color: "white"
}} variant="solid" rounded="4">
2022-08-24 00:43:50 +00:00
<Text bold={true} color='danger.50'> {status == 1 ? 'LIBRE' : 'RESERVADO'}</Text>
2022-08-23 04:20:07 +00:00
</Badge>
2022-08-23 02:53:58 +00:00
<Heading size="md" ml="-1">
2022-08-24 17:15:27 +00:00
{name}
2022-08-23 02:53:58 +00:00
</Heading>
<Text fontSize="xs" _light={{
color: "violet.500"
}} _dark={{
color: "violet.400"
}} fontWeight="500" ml="-0.5" mt="-1">
{dateFormated}
</Text>
</Stack>
<Text fontWeight="400">
Hora de inicio: {startTime}
</Text>
<Text fontWeight="400">
Hora de finalización: {endTime}
</Text>
</Stack>
</Box>
</Box>
</ScrollView>
)
}
ReservasCard.propTypes = {
date: PropTypes.string.isRequired,
startTime: PropTypes.string.isRequired,
endTime: PropTypes.string.isRequired,
status: PropTypes.string.isRequired
}