pcm-shared-components 2.0.105 → 2.0.108
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Cards/EventCard/components/OpenEventCardDialog.js +93 -0
- package/dist/components/Cards/EventCard/components/OpenEventViewAllImageDialog.js +54 -0
- package/dist/components/Cards/EventCard/index.js +98 -0
- package/dist/components/Date/FancyDate/index.js +28 -0
- package/dist/components/Images/HorizontalImageTile/index.js +110 -0
- package/dist/components/Images/VerticalImageTile/index.js +55 -0
- package/dist/languages/en/translations.json +1 -0
- package/dist/languages/es/translations.json +1 -0
- package/dist/languages/fr/translations.json +1 -0
- package/dist/styles/tailwind.css +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
import React, { useState } from "react";
|
|
2
|
+
import { Dialog, DialogContent } from '@mui/material';
|
|
3
|
+
import HorizontalImageTile from "../../../Images/HorizontalImageTile";
|
|
4
|
+
import PropTypes from "prop-types";
|
|
5
|
+
import moment from "moment";
|
|
6
|
+
import OpenEventViewAllImageDialog from "./OpenEventViewAllImageDialog";
|
|
7
|
+
import { IconButton } from '@mui/material';
|
|
8
|
+
import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
|
|
9
|
+
const OpenEventCardDialog = props => {
|
|
10
|
+
const {
|
|
11
|
+
id,
|
|
12
|
+
campground_event_pages_id,
|
|
13
|
+
state_id,
|
|
14
|
+
display_on_booking_page,
|
|
15
|
+
title,
|
|
16
|
+
description,
|
|
17
|
+
event_date,
|
|
18
|
+
pictures,
|
|
19
|
+
open,
|
|
20
|
+
closeDialog
|
|
21
|
+
} = props;
|
|
22
|
+
const [openEventViewAllImageDialog, setOpenEventViewAllImageDialog] = useState(false);
|
|
23
|
+
const handleOnClose = () => {
|
|
24
|
+
setOpenEventViewAllImageDialog(false);
|
|
25
|
+
};
|
|
26
|
+
const handleOnImageClick = () => {
|
|
27
|
+
setOpenEventViewAllImageDialog(true);
|
|
28
|
+
};
|
|
29
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dialog, {
|
|
30
|
+
classes: {
|
|
31
|
+
paper: "m-24"
|
|
32
|
+
},
|
|
33
|
+
open: open,
|
|
34
|
+
onClose: closeDialog,
|
|
35
|
+
fullWidth: true,
|
|
36
|
+
maxWidth: "md"
|
|
37
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
38
|
+
className: "flex justify-start w-full m-10 "
|
|
39
|
+
}, /*#__PURE__*/React.createElement(IconButton, {
|
|
40
|
+
className: "shadow-2",
|
|
41
|
+
onClick: closeDialog,
|
|
42
|
+
size: "small"
|
|
43
|
+
}, /*#__PURE__*/React.createElement(ArrowBackIosNewIcon, null))), /*#__PURE__*/React.createElement(DialogContent, null, /*#__PURE__*/React.createElement("div", {
|
|
44
|
+
className: "flex flex-col"
|
|
45
|
+
}, /*#__PURE__*/React.createElement(HorizontalImageTile, {
|
|
46
|
+
pictures: pictures,
|
|
47
|
+
event_date: event_date,
|
|
48
|
+
onImageClick: handleOnImageClick
|
|
49
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
50
|
+
className: "flex flex-col m-6"
|
|
51
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
52
|
+
className: "w-full flex flex-row justify-between"
|
|
53
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
54
|
+
className: "font-800 capitalize text-24 mt-12"
|
|
55
|
+
}, title), /*#__PURE__*/React.createElement("div", {
|
|
56
|
+
className: "font-500 text-24 mt-12 text-grey-800"
|
|
57
|
+
}, moment(event_date).format('dddd MMMM Do'))), /*#__PURE__*/React.createElement("div", {
|
|
58
|
+
className: "ml-0 md:ml-12 my-12",
|
|
59
|
+
dangerouslySetInnerHTML: {
|
|
60
|
+
__html: description
|
|
61
|
+
}
|
|
62
|
+
}))))), /*#__PURE__*/React.createElement(OpenEventViewAllImageDialog, {
|
|
63
|
+
open: openEventViewAllImageDialog,
|
|
64
|
+
closeDialog: handleOnClose,
|
|
65
|
+
pictures: pictures
|
|
66
|
+
}));
|
|
67
|
+
};
|
|
68
|
+
OpenEventCardDialog.defaultProps = {
|
|
69
|
+
id: -1,
|
|
70
|
+
campground_event_pages_id: -1,
|
|
71
|
+
state_id: 1,
|
|
72
|
+
display_on_booking_page: false,
|
|
73
|
+
title: "",
|
|
74
|
+
description: "",
|
|
75
|
+
event_date: moment().format('YYYY-MM-DD'),
|
|
76
|
+
pictures: [],
|
|
77
|
+
open: false,
|
|
78
|
+
closeDialog: () => {}
|
|
79
|
+
};
|
|
80
|
+
OpenEventCardDialog.propTypes = {
|
|
81
|
+
id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
|
|
82
|
+
campground_event_pages_id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
|
|
83
|
+
state_id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
|
|
84
|
+
display_on_booking_page: PropTypes.bool.isRequired,
|
|
85
|
+
title: PropTypes.string.isRequired,
|
|
86
|
+
description: PropTypes.string.isRequired,
|
|
87
|
+
event_date: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]).isRequired,
|
|
88
|
+
pictures: PropTypes.array.isRequired,
|
|
89
|
+
type: PropTypes.string,
|
|
90
|
+
open: PropTypes.bool,
|
|
91
|
+
closeDialog: PropTypes.func
|
|
92
|
+
};
|
|
93
|
+
export default OpenEventCardDialog;
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
+
import React from "react";
|
|
3
|
+
import { Dialog, DialogContent } from '@mui/material';
|
|
4
|
+
import PropTypes from "prop-types";
|
|
5
|
+
import VerticalImageTile from "../../../Images/VerticalImageTile";
|
|
6
|
+
import Slide from '@mui/material/Slide';
|
|
7
|
+
import { IconButton } from '@mui/material';
|
|
8
|
+
import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
|
|
9
|
+
const Transition = /*#__PURE__*/React.forwardRef(function Transition(props, ref) {
|
|
10
|
+
return /*#__PURE__*/React.createElement(Slide, _extends({
|
|
11
|
+
direction: "up",
|
|
12
|
+
ref: ref
|
|
13
|
+
}, props));
|
|
14
|
+
});
|
|
15
|
+
const OpenEventViewAllImageDialog = props => {
|
|
16
|
+
const {
|
|
17
|
+
pictures,
|
|
18
|
+
open,
|
|
19
|
+
closeDialog
|
|
20
|
+
} = props;
|
|
21
|
+
return /*#__PURE__*/React.createElement(Dialog, {
|
|
22
|
+
open: open,
|
|
23
|
+
onClose: closeDialog,
|
|
24
|
+
fullScreen: true,
|
|
25
|
+
TransitionComponent: Transition
|
|
26
|
+
}, /*#__PURE__*/React.createElement(DialogContent, {
|
|
27
|
+
classes: {
|
|
28
|
+
root: "p-24"
|
|
29
|
+
}
|
|
30
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
31
|
+
className: "flex justify-start w-full m-10"
|
|
32
|
+
}, /*#__PURE__*/React.createElement(IconButton, {
|
|
33
|
+
className: "shadow-2 ",
|
|
34
|
+
onClick: closeDialog,
|
|
35
|
+
size: "small"
|
|
36
|
+
}, /*#__PURE__*/React.createElement(ArrowBackIosNewIcon, {
|
|
37
|
+
className: "material-icons text-32"
|
|
38
|
+
}))), /*#__PURE__*/React.createElement("div", {
|
|
39
|
+
className: "mt-12 w-3/4 mx-auto"
|
|
40
|
+
}, /*#__PURE__*/React.createElement(VerticalImageTile, {
|
|
41
|
+
pictures: pictures
|
|
42
|
+
}))));
|
|
43
|
+
};
|
|
44
|
+
OpenEventViewAllImageDialog.defaultProps = {
|
|
45
|
+
pictures: [],
|
|
46
|
+
open: false,
|
|
47
|
+
closeDialog: () => {}
|
|
48
|
+
};
|
|
49
|
+
OpenEventViewAllImageDialog.propTypes = {
|
|
50
|
+
pictures: PropTypes.array.isRequired,
|
|
51
|
+
open: PropTypes.bool,
|
|
52
|
+
closeDialog: PropTypes.func
|
|
53
|
+
};
|
|
54
|
+
export default OpenEventViewAllImageDialog;
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
+
import React, { useState, useEffect, useCallback } from "react";
|
|
3
|
+
import PropTypes from "prop-types";
|
|
4
|
+
import moment from "moment";
|
|
5
|
+
import Button from '@mui/material/Button';
|
|
6
|
+
import OpenEventCardDialog from './components/OpenEventCardDialog';
|
|
7
|
+
import FancyDate from '../../Date/FancyDate';
|
|
8
|
+
export const EventCard = ({
|
|
9
|
+
event
|
|
10
|
+
}) => {
|
|
11
|
+
const pictures = event.pictures || [];
|
|
12
|
+
const [currentImage, setCurrentImage] = useState(0);
|
|
13
|
+
const [openEventCardDialog, setOpenEventCardDialog] = useState(false);
|
|
14
|
+
|
|
15
|
+
//---------------------------------------------------
|
|
16
|
+
// Use Effect
|
|
17
|
+
//---------------------------------------------------
|
|
18
|
+
useEffect(() => {
|
|
19
|
+
if (pictures.length > 1) {
|
|
20
|
+
const interval = setInterval(() => {
|
|
21
|
+
if (!openEventCardDialog) {
|
|
22
|
+
setCurrentImage(currentImage => {
|
|
23
|
+
const randomIndex = Math.floor(Math.random() * pictures.length);
|
|
24
|
+
return randomIndex !== currentImage ? randomIndex : (randomIndex + 1) % pictures.length;
|
|
25
|
+
});
|
|
26
|
+
}
|
|
27
|
+
}, 5000 + Math.floor(Math.random() * 3000));
|
|
28
|
+
|
|
29
|
+
// Clear interval when openEventCardDialog becomes true
|
|
30
|
+
if (openEventCardDialog) {
|
|
31
|
+
clearInterval(interval);
|
|
32
|
+
}
|
|
33
|
+
return () => clearInterval(interval);
|
|
34
|
+
}
|
|
35
|
+
}, [event, openEventCardDialog]);
|
|
36
|
+
const backgroundImage = pictures.length > 0 ? `url(${pictures[currentImage]})` : "";
|
|
37
|
+
const hasImages = pictures.length > 0;
|
|
38
|
+
|
|
39
|
+
//---------------------------------------------------
|
|
40
|
+
// Local Functions
|
|
41
|
+
//---------------------------------------------------
|
|
42
|
+
function isDatePassed(dateString) {
|
|
43
|
+
const date = moment(dateString);
|
|
44
|
+
return date.isBefore();
|
|
45
|
+
}
|
|
46
|
+
const getRandomTransition = useCallback(() => {
|
|
47
|
+
const randomSeconds = Math.floor(Math.random() * 2) + 1;
|
|
48
|
+
const randomEase = ["ease-in-out", "ease-in", "ease-out", "linear", "cubic-bezier(0.25, 0.1, 0.25, 1)", "ease-in-back", "ease-out-back", "ease-in-out-back", "ease-in-elastic", "ease-out-elastic", "ease-in-out-elastic", "cubic-bezier(0.68, -0.55, 0.265, 1.55)", "cubic-bezier(0.42, 0, 0.58, 1)"][Math.floor(Math.random() * 13)];
|
|
49
|
+
return `background-image ${randomSeconds}s ${randomEase}`;
|
|
50
|
+
}, []);
|
|
51
|
+
const handleCloseDialog = useCallback(() => {
|
|
52
|
+
setOpenEventCardDialog(false);
|
|
53
|
+
}, []);
|
|
54
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
|
|
55
|
+
key: event.id,
|
|
56
|
+
className: "relative rounded overflow-hidden shadow min-h-224 bg-cover cursor-pointer w-full",
|
|
57
|
+
style: {
|
|
58
|
+
backgroundImage,
|
|
59
|
+
transition: getRandomTransition(),
|
|
60
|
+
backgroundPosition: 'center',
|
|
61
|
+
backgroundRepeat: 'no-repeat',
|
|
62
|
+
backgroundSize: 'cover'
|
|
63
|
+
},
|
|
64
|
+
onClick: () => {
|
|
65
|
+
setOpenEventCardDialog(true);
|
|
66
|
+
}
|
|
67
|
+
}, !hasImages && /*#__PURE__*/React.createElement("div", {
|
|
68
|
+
className: "absolute inset-0 flex justify-center items-center text-gray-300 font-bold bg-gray-800"
|
|
69
|
+
}, /*#__PURE__*/React.createElement(FancyDate, {
|
|
70
|
+
date: event.event_date
|
|
71
|
+
})), /*#__PURE__*/React.createElement("div", {
|
|
72
|
+
className: "absolute bottom-0 left-0 right-0 normal-case text-white px-6 py-4 ",
|
|
73
|
+
style: {
|
|
74
|
+
background: 'rgba(0,0,0,0.5)'
|
|
75
|
+
}
|
|
76
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
77
|
+
className: "font-bold text-xl mb-2 capitalize overflow-ellipsis overflow-hidden whitespace-nowrap text-left"
|
|
78
|
+
}, event.title), /*#__PURE__*/React.createElement("div", {
|
|
79
|
+
className: "text-gray-300 normal-case text-base overflow-ellipsis overflow-hidden whitespace-nowrap pr-6 text-left max-h-32"
|
|
80
|
+
}, event.description.replace(/<[^>]+>/g, '')), /*#__PURE__*/React.createElement("div", {
|
|
81
|
+
className: "flex flex-row justify-end mt-4"
|
|
82
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
83
|
+
className: "inline-block normal-case text-16 font-800 text-white overflow-ellipsis overflow-hidden whitespace-nowrap"
|
|
84
|
+
}, moment(event.event_date).format('dddd MMMM Do'))))), /*#__PURE__*/React.createElement(OpenEventCardDialog, _extends({}, event, {
|
|
85
|
+
open: openEventCardDialog,
|
|
86
|
+
closeDialog: handleCloseDialog
|
|
87
|
+
})));
|
|
88
|
+
};
|
|
89
|
+
EventCard.propTypes = {
|
|
90
|
+
event: PropTypes.shape({
|
|
91
|
+
title: PropTypes.string.isRequired,
|
|
92
|
+
description: PropTypes.string.isRequired,
|
|
93
|
+
pictures: PropTypes.arrayOf(PropTypes.string),
|
|
94
|
+
event_date: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]).isRequired,
|
|
95
|
+
state_id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired
|
|
96
|
+
})
|
|
97
|
+
};
|
|
98
|
+
export default EventCard;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import moment from 'moment';
|
|
3
|
+
export const FancyDate = ({
|
|
4
|
+
date
|
|
5
|
+
}) => {
|
|
6
|
+
const formattedDate = moment(date).locale('en').format('dddd MMMM Do');
|
|
7
|
+
const dateParts = formattedDate.split(' ');
|
|
8
|
+
const month = dateParts[1].toUpperCase();
|
|
9
|
+
const day = dateParts[2];
|
|
10
|
+
const weekday = dateParts[0].toUpperCase();
|
|
11
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
12
|
+
className: "flex flex-col justify-center items-center px-8 py-6 w-full h-full text-white font-fancy-date",
|
|
13
|
+
style: {
|
|
14
|
+
background: 'linear-gradient(45deg, rgb(92, 132, 48) 0%, rgb(124, 179, 66) 40%, rgb(241, 100, 47) 100%)',
|
|
15
|
+
backgroundSize: 'cover',
|
|
16
|
+
backdropFilter: 'blur(10px)'
|
|
17
|
+
}
|
|
18
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
19
|
+
className: "absolute top-20 font-bold text-6xl z-10"
|
|
20
|
+
}, month), /*#__PURE__*/React.createElement("div", {
|
|
21
|
+
className: "absolute top-64"
|
|
22
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
23
|
+
className: "mt-4 font-bold text-grey-800 text-2xl z-10"
|
|
24
|
+
}, weekday), /*#__PURE__*/React.createElement("span", {
|
|
25
|
+
className: "ml-8 mt-4 font-bold text-4xl z-10"
|
|
26
|
+
}, day)));
|
|
27
|
+
};
|
|
28
|
+
export default FancyDate;
|
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import PropTypes from 'prop-types';
|
|
3
|
+
import { ThemeProvider } from '@mui/system';
|
|
4
|
+
import { createTheme, useTheme } from '@mui/material/styles';
|
|
5
|
+
import Button from '@mui/material/Button';
|
|
6
|
+
import AppsIcon from '@mui/icons-material/Apps';
|
|
7
|
+
import moment from 'moment';
|
|
8
|
+
import FancyDate from '../../Date/FancyDate';
|
|
9
|
+
export const HorizontalImageTile = ({
|
|
10
|
+
pictures,
|
|
11
|
+
event_date,
|
|
12
|
+
onImageClick,
|
|
13
|
+
view_all_images,
|
|
14
|
+
theme
|
|
15
|
+
}) => {
|
|
16
|
+
const compTheme = theme ? theme : useTheme();
|
|
17
|
+
const defaultTheme = createTheme(compTheme);
|
|
18
|
+
const getImageRounded = (numImages, index) => {
|
|
19
|
+
if (numImages === 4 && index === 2 || numImages === 3 && index === 1 || numImages === 2 && index === 0) {
|
|
20
|
+
return "rounded-tr-lg rounded-br-lg";
|
|
21
|
+
} else if (numImages === 5 && index === 1) {
|
|
22
|
+
return "rounded-tr-lg";
|
|
23
|
+
} else if (numImages === 5 && index === 3) {
|
|
24
|
+
return "rounded-br-lg";
|
|
25
|
+
}
|
|
26
|
+
};
|
|
27
|
+
const ImageTile = ({
|
|
28
|
+
pictures,
|
|
29
|
+
height
|
|
30
|
+
}) => {
|
|
31
|
+
//limit the number of pictures to 5
|
|
32
|
+
const numImages = pictures.slice(0, 5).length;
|
|
33
|
+
|
|
34
|
+
// console.log("numImages",numImages)
|
|
35
|
+
if (numImages === 1) {
|
|
36
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
37
|
+
className: "flex ",
|
|
38
|
+
style: {
|
|
39
|
+
height: height,
|
|
40
|
+
maxHeight: height
|
|
41
|
+
}
|
|
42
|
+
}, /*#__PURE__*/React.createElement("img", {
|
|
43
|
+
src: pictures[0],
|
|
44
|
+
alt: "",
|
|
45
|
+
className: " w-full cursor-pointer duration-300 hover:brightness-75 h-auto object-cover rounded-lg shadow-md"
|
|
46
|
+
}));
|
|
47
|
+
}
|
|
48
|
+
let leftWidth = "w-1/2";
|
|
49
|
+
let rightWidth = "w-1/2";
|
|
50
|
+
if (numImages === 2) {
|
|
51
|
+
leftWidth = "w-1/2";
|
|
52
|
+
rightWidth = "w-1/2";
|
|
53
|
+
} else if (numImages === 3) {
|
|
54
|
+
leftWidth = "w-1/2";
|
|
55
|
+
rightWidth = "w-1/2 grid grid-cols-2 gap-6";
|
|
56
|
+
} else if (numImages === 4) {
|
|
57
|
+
leftWidth = "w-1/2";
|
|
58
|
+
rightWidth = "w-1/2 grid grid-cols-3 gap-6";
|
|
59
|
+
} else if (numImages >= 5) {
|
|
60
|
+
leftWidth = "w-1/2";
|
|
61
|
+
rightWidth = "w-1/2 grid grid-cols-2 grid-rows-2 gap-6";
|
|
62
|
+
}
|
|
63
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
64
|
+
className: "relative flex justify-between ",
|
|
65
|
+
style: {
|
|
66
|
+
height: height,
|
|
67
|
+
maxHeight: height
|
|
68
|
+
},
|
|
69
|
+
onClick: onImageClick
|
|
70
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
71
|
+
className: `${leftWidth} mr-6`
|
|
72
|
+
}, /*#__PURE__*/React.createElement("img", {
|
|
73
|
+
src: pictures[0],
|
|
74
|
+
alt: "",
|
|
75
|
+
className: "w-full h-full cursor-pointer duration-300 hover:brightness-75 object-cover rounded-tl-lg rounded-bl-lg shadow-md"
|
|
76
|
+
})), /*#__PURE__*/React.createElement("div", {
|
|
77
|
+
className: rightWidth
|
|
78
|
+
}, pictures.slice(1, 5).map((image, index) => /*#__PURE__*/React.createElement("img", {
|
|
79
|
+
key: index,
|
|
80
|
+
src: image,
|
|
81
|
+
alt: "",
|
|
82
|
+
className: `w-full h-full cursor-pointer duration-300 hover:brightness-75 object-cover shadow-md ${getImageRounded(numImages, index)}`
|
|
83
|
+
}))), numImages >= 2 && /*#__PURE__*/React.createElement("div", {
|
|
84
|
+
className: "absolute bottom-0 right-0 m-6"
|
|
85
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
86
|
+
variant: "outlined",
|
|
87
|
+
className: 'bg-white hover:bg-grey-300',
|
|
88
|
+
startIcon: /*#__PURE__*/React.createElement(AppsIcon, null)
|
|
89
|
+
}, view_all_images)));
|
|
90
|
+
};
|
|
91
|
+
return /*#__PURE__*/React.createElement(ThemeProvider, {
|
|
92
|
+
theme: defaultTheme
|
|
93
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
94
|
+
className: "w-full"
|
|
95
|
+
}, pictures?.length > 0 ? /*#__PURE__*/React.createElement(ImageTile, {
|
|
96
|
+
pictures: pictures,
|
|
97
|
+
height: 320
|
|
98
|
+
}) : /*#__PURE__*/React.createElement("div", {
|
|
99
|
+
className: " h-136 "
|
|
100
|
+
}, /*#__PURE__*/React.createElement(FancyDate, {
|
|
101
|
+
date: event_date
|
|
102
|
+
}))));
|
|
103
|
+
};
|
|
104
|
+
HorizontalImageTile.propTypes = {
|
|
105
|
+
pictures: PropTypes.arrayOf(PropTypes.string),
|
|
106
|
+
onImageClick: PropTypes.func,
|
|
107
|
+
theme: PropTypes.object,
|
|
108
|
+
view_all_images: PropTypes.string
|
|
109
|
+
};
|
|
110
|
+
export default HorizontalImageTile;
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import PropTypes from 'prop-types';
|
|
3
|
+
import { ThemeProvider } from '@mui/system';
|
|
4
|
+
import { createTheme, useTheme } from '@mui/material/styles';
|
|
5
|
+
export const VerticalImageTile = ({
|
|
6
|
+
pictures,
|
|
7
|
+
theme
|
|
8
|
+
}) => {
|
|
9
|
+
// limit the number of pictures to 5
|
|
10
|
+
const numImages = pictures.length;
|
|
11
|
+
if (numImages === 1) {
|
|
12
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
13
|
+
className: "flex"
|
|
14
|
+
}, /*#__PURE__*/React.createElement("img", {
|
|
15
|
+
src: pictures[0],
|
|
16
|
+
alt: "",
|
|
17
|
+
className: "w-full h-full max-h-512 duration-300 object-cover "
|
|
18
|
+
}));
|
|
19
|
+
}
|
|
20
|
+
let bottomHeight = "flex flex-wrap ";
|
|
21
|
+
const compTheme = theme ? theme : useTheme();
|
|
22
|
+
const defaultTheme = createTheme(compTheme);
|
|
23
|
+
return /*#__PURE__*/React.createElement(ThemeProvider, {
|
|
24
|
+
theme: defaultTheme
|
|
25
|
+
}, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
26
|
+
className: "relative flex flex-col justify-between"
|
|
27
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
28
|
+
className: ``
|
|
29
|
+
}, /*#__PURE__*/React.createElement("img", {
|
|
30
|
+
src: pictures[0],
|
|
31
|
+
alt: "",
|
|
32
|
+
className: "w-full h-400 duration-300 object-cover rounded-t-md "
|
|
33
|
+
})), /*#__PURE__*/React.createElement("div", {
|
|
34
|
+
className: `${bottomHeight} w-full flex flex-row `
|
|
35
|
+
}, pictures.slice(1, pictures.length).map((image, index) => {
|
|
36
|
+
// let imageHeight = "w-full h-auto";
|
|
37
|
+
let imageHeight = index % 3 === 0 ? "w-full h-400" : "w-1/2 h-200";
|
|
38
|
+
|
|
39
|
+
// make it so that the last image is full width if there are an odd number of pictures
|
|
40
|
+
if (pictures.length % 2 === 0 && index === pictures.length - 2 && index % 3 === 0) {
|
|
41
|
+
imageHeight = "w-full h-400";
|
|
42
|
+
}
|
|
43
|
+
return /*#__PURE__*/React.createElement("img", {
|
|
44
|
+
key: index,
|
|
45
|
+
src: image,
|
|
46
|
+
alt: "",
|
|
47
|
+
className: ` ${imageHeight} duration-300 object-cover `
|
|
48
|
+
});
|
|
49
|
+
})))));
|
|
50
|
+
};
|
|
51
|
+
VerticalImageTile.propTypes = {
|
|
52
|
+
pictures: PropTypes.arrayOf(PropTypes.string),
|
|
53
|
+
theme: PropTypes.object
|
|
54
|
+
};
|
|
55
|
+
export default VerticalImageTile;
|
|
@@ -664,6 +664,7 @@
|
|
|
664
664
|
"variable_rate": "Variable Rates",
|
|
665
665
|
"version": "Version",
|
|
666
666
|
"vertical": "Vertical",
|
|
667
|
+
"view_all_images": "View All Images",
|
|
667
668
|
"view_all_plans": "View all plans",
|
|
668
669
|
"visible_on_booking_page": "Visible on Booking Page",
|
|
669
670
|
"visible_online": "Visible Online",
|
|
@@ -664,6 +664,7 @@
|
|
|
664
664
|
"variable_rate": "Tasas Variables",
|
|
665
665
|
"version": "Versión",
|
|
666
666
|
"vertical": "Vertical",
|
|
667
|
+
"view_all_images": "Ver todas las imágenes",
|
|
667
668
|
"view_all_plans": "Ver todos los planes",
|
|
668
669
|
"visible_on_booking_page": "Visible en la página de reservas",
|
|
669
670
|
"visible_online": "Visibles en línea",
|
|
@@ -664,6 +664,7 @@
|
|
|
664
664
|
"variable_rate": "Tarifs variables",
|
|
665
665
|
"version": "Version",
|
|
666
666
|
"vertical": "Verticale",
|
|
667
|
+
"view_all_images": "Voir toutes les images",
|
|
667
668
|
"view_all_plans": "Voir tous les forfaits",
|
|
668
669
|
"visible_on_booking_page": "Visible sur la page de réservation",
|
|
669
670
|
"visible_online": "Visible en ligne",
|
package/dist/styles/tailwind.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2196f380;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.static{position:static}.absolute{position:absolute}.relative{position:relative}.right-0{right:0}.top-0{top:0}.left-0{left:0}.bottom-0{bottom:0}.z-99{z-index:99}.m-auto{margin:auto}.m-4{margin:.4rem}.m-12{margin:1.2rem}.mx-6{margin-left:.6rem;margin-right:.6rem}.my-auto{margin-top:auto;margin-bottom:auto}.mx-12{margin-left:1.2rem;margin-right:1.2rem}.my-4{margin-top:.4rem;margin-bottom:.4rem}.mx-0{margin-left:0;margin-right:0}.my-24{margin-top:2.4rem;margin-bottom:2.4rem}.mx-auto{margin-left:auto;margin-right:auto}.mx-4{margin-left:.4rem;margin-right:.4rem}.my-12{margin-top:1.2rem;margin-bottom:1.2rem}.mx-2{margin-left:.2rem;margin-right:.2rem}.my-6{margin-top:.6rem;margin-bottom:.6rem}.mx-8{margin-left:.8rem;margin-right:.8rem}.-ml-10{margin-left:-1rem}.ml-24{margin-left:2.4rem}.ml-0{margin-left:0}.mr-0{margin-right:0}.ml-4{margin-left:.4rem}.mt-12{margin-top:1.2rem}.mt-24{margin-top:2.4rem}.mt-auto{margin-top:auto}.mb-24{margin-bottom:2.4rem}.mr-24{margin-right:2.4rem}.mb-12{margin-bottom:1.2rem}.ml-1{margin-left:.1rem}.mb-0{margin-bottom:0}.mt-4{margin-top:.4rem}.mt-0{margin-top:0}.mt-6{margin-top:.6rem}.mb-2{margin-bottom:.2rem}.ml-12{margin-left:1.2rem}.ml-6{margin-left:.6rem}.mb-6{margin-bottom:.6rem}.mr-12{margin-right:1.2rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.hidden{display:none}.h-full{height:100%}.h-auto{height:auto}.h-screen{height:100vh}.min-h-160{min-height:16rem}.min-h-256{min-height:25.6rem}.w-full{width:100%}.w-auto{width:auto}.w-1\/2{width:50%}.w-2\/5{width:40%}.max-w-full{max-width:100%}.max-w-min{max-width:-moz-min-content;max-width:min-content}.flex-shrink-0{flex-shrink:0}.grow{flex-grow:1}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.cursor-not-allowed{cursor:not-allowed}.cursor-default{cursor:default}.list-none{list-style-type:none}.list-disc{list-style-type:disc}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.space-x-10>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem*var(--tw-space-x-reverse));margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)))}.space-y-10>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-scroll{overflow:scroll}.overscroll-none{overscroll-behavior:none}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whitespace-normal{white-space:normal}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-line{white-space:pre-line}.rounded{border-radius:.4rem}.rounded-md{border-radius:.6rem}.rounded-lg{border-radius:.8rem}.rounded-full{border-radius:9999px}.border{border-width:1px}.border-2{border-width:2px}.border-t-8{border-top-width:8px}.border-transparent{border-color:#0000}.bg-green-600{--tw-bg-opacity:1;background-color:rgb(67 160 71/var(--tw-bg-opacity))}.bg-grey-100{--tw-bg-opacity:1;background-color:rgb(245 245 245/var(--tw-bg-opacity))}.bg-black{--tw-bg-opacity:1;background-color:rgb(34 41 47/var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(238 238 238/var(--tw-bg-opacity))}.bg-blue{--tw-bg-opacity:1;background-color:rgb(33 150 243/var(--tw-bg-opacity))}.bg-yellow-100\/50{background-color:#fff9c480}.bg-grey-200{--tw-bg-opacity:1;background-color:rgb(238 238 238/var(--tw-bg-opacity))}.p-0{padding:0}.p-6{padding:.6rem}.p-24{padding:2.4rem}.p-12{padding:1.2rem}.px-4{padding-left:.4rem;padding-right:.4rem}.py-2{padding-top:.2rem;padding-bottom:.2rem}.px-2{padding-left:.2rem;padding-right:.2rem}.pl-4{padding-left:.4rem}.pt-0{padding-top:0}.pt-4{padding-top:.4rem}.pl-0{padding-left:0}.pr-0{padding-right:0}.pb-4{padding-bottom:.4rem}.pl-8{padding-left:.8rem}.pt-12{padding-top:1.2rem}.text-left{text-align:left}.text-center{text-align:center}.font-sans{font-family:Muli,Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.font-serif{font-family:Georgia,Cambria,Times New Roman,Times,serif}.text-sm{line-height:2rem}.text-14,.text-sm{font-size:1.4rem}.text-24{font-size:2.4rem}.text-17{font-size:1.7rem}.text-xl{font-size:2rem;line-height:2.8rem}.text-4xl{font-size:3.6rem;line-height:4rem}.text-base{font-size:1.6rem;line-height:2.4rem}.text-5xl{font-size:4.8rem;line-height:1}.text-16{font-size:1.6rem}.text-2xl{font-size:2.4rem;line-height:3.2rem}.font-medium{font-weight:500}.font-800{font-weight:800}.font-bold{font-weight:700}.font-normal{font-weight:400}.font-900{font-weight:900}.font-500{font-weight:500}.font-semibold{font-weight:600}.font-extrabold{font-weight:800}.font-600{font-weight:600}.capitalize{text-transform:capitalize}.leading-tight{line-height:1.25}.leading-none{line-height:1}.tracking-tight{letter-spacing:-.025em}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(117 117 117/var(--tw-text-opacity))}.text-green-600{--tw-text-opacity:1;color:rgb(67 160 71/var(--tw-text-opacity))}.text-orange-600{--tw-text-opacity:1;color:rgb(251 140 0/var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(158 158 158/var(--tw-text-opacity))}.text-gray-700{--tw-text-opacity:1;color:rgb(97 97 97/var(--tw-text-opacity))}.line-through{text-decoration-line:line-through}.no-underline{text-decoration-line:none}.decoration-gray-500{text-decoration-color:#9e9e9e}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.shadow{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px 0 #0000000f;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px 0 var(--tw-shadow-color)}.shadow,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-1{--tw-shadow:0px 2px 1px -1px #0003,0px 1px 1px 0px #00000024,0px 1px 3px 0px #0000001f;--tw-shadow-colored:0px 2px 1px -1px var(--tw-shadow-color),0px 1px 1px 0px var(--tw-shadow-color),0px 1px 3px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.drop-shadow{--tw-drop-shadow:drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f)}.drop-shadow,.drop-shadow-none{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow-none{--tw-drop-shadow:drop-shadow(0 0 #0000)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.hover\:translate-y-1:hover{--tw-translate-y:0.1rem}.hover\:rotate-3:hover,.hover\:translate-y-1:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:rotate-3:hover{--tw-rotate:3deg}.hover\:skew-y-3:hover{--tw-skew-y:3deg}.hover\:scale-105:hover,.hover\:skew-y-3:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05}.hover\:list-disc:hover{list-style-type:disc}.hover\:bg-green-700:hover{--tw-bg-opacity:1;background-color:rgb(56 142 60/var(--tw-bg-opacity))}.hover\:bg-indigo-100\/25:hover{background-color:#c5cae940}.hover\:bg-gray-100\/75:hover{background-color:#f5f5f5bf}.hover\:text-gray-700:hover{--tw-text-opacity:1;color:rgb(97 97 97/var(--tw-text-opacity))}.hover\:underline:hover{text-decoration-line:underline}.hover\:drop-shadow-2xl:hover{--tw-drop-shadow:drop-shadow(0 25px 25px #00000026);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.focus\:outline-none:focus{outline:2px solid #0000;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-green-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(76 175 80/var(--tw-ring-opacity))}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px}@media (prefers-color-scheme:dark){.dark\:text-green-500{--tw-text-opacity:1;color:rgb(76 175 80/var(--tw-text-opacity))}.dark\:text-gray-500{--tw-text-opacity:1;color:rgb(158 158 158/var(--tw-text-opacity))}.dark\:text-orange-500{--tw-text-opacity:1;color:rgb(255 152 0/var(--tw-text-opacity))}}@media (min-width:600px){.sm\:p-8{padding:.8rem}}@media (min-width:960px){.md\:mx-auto{margin-left:auto;margin-right:auto}.md\:max-w-288{max-width:28.8rem}.md\:flex-row{flex-direction:row}.md\:flex-col{flex-direction:column}.md\:pt-0{padding-top:0}}
|
|
1
|
+
*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2196f380;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.static{position:static}.absolute{position:absolute}.relative{position:relative}.inset-0{top:0;right:0;bottom:0;left:0}.right-0{right:0}.top-0{top:0}.left-0{left:0}.bottom-0{bottom:0}.top-20{top:2rem}.top-64{top:6.4rem}.z-99{z-index:99}.z-10{z-index:10}.m-auto{margin:auto}.m-4{margin:.4rem}.m-6{margin:.6rem}.m-24{margin:2.4rem}.m-10{margin:1rem}.m-12{margin:1.2rem}.mx-6{margin-left:.6rem;margin-right:.6rem}.my-auto{margin-top:auto;margin-bottom:auto}.mx-12{margin-left:1.2rem;margin-right:1.2rem}.my-4{margin-top:.4rem;margin-bottom:.4rem}.mx-0{margin-left:0;margin-right:0}.my-24{margin-top:2.4rem;margin-bottom:2.4rem}.mx-auto{margin-left:auto;margin-right:auto}.mx-4{margin-left:.4rem;margin-right:.4rem}.my-12{margin-top:1.2rem;margin-bottom:1.2rem}.mx-2{margin-left:.2rem;margin-right:.2rem}.my-6{margin-top:.6rem;margin-bottom:.6rem}.mx-8{margin-left:.8rem;margin-right:.8rem}.-ml-10{margin-left:-1rem}.ml-24{margin-left:2.4rem}.mb-2{margin-bottom:.2rem}.mt-4{margin-top:.4rem}.ml-8{margin-left:.8rem}.mr-6{margin-right:.6rem}.ml-0{margin-left:0}.mr-0{margin-right:0}.ml-4{margin-left:.4rem}.mt-12{margin-top:1.2rem}.mt-24{margin-top:2.4rem}.mt-auto{margin-top:auto}.mb-24{margin-bottom:2.4rem}.mr-24{margin-right:2.4rem}.mb-12{margin-bottom:1.2rem}.ml-1{margin-left:.1rem}.mb-0{margin-bottom:0}.mt-0{margin-top:0}.mt-6{margin-top:.6rem}.ml-12{margin-left:1.2rem}.ml-6{margin-left:.6rem}.mb-6{margin-bottom:.6rem}.mr-12{margin-right:1.2rem}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-full{height:100%}.h-auto{height:auto}.h-136{height:13.6rem}.h-400{height:40rem}.h-200{height:20rem}.h-screen{height:100vh}.max-h-32{max-height:3.2rem}.max-h-512{max-height:51.2rem}.min-h-224{min-height:22.4rem}.min-h-160{min-height:16rem}.min-h-256{min-height:25.6rem}.w-full{width:100%}.w-auto{width:auto}.w-1\/2{width:50%}.w-3\/4{width:75%}.w-2\/5{width:40%}.max-w-full{max-width:100%}.max-w-min{max-width:-moz-min-content;max-width:min-content}.flex-shrink-0{flex-shrink:0}.grow{flex-grow:1}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.cursor-not-allowed{cursor:not-allowed}.cursor-default{cursor:default}.list-none{list-style-type:none}.list-disc{list-style-type:disc}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-rows-2{grid-template-rows:repeat(2,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.gap-6{gap:.6rem}.space-x-10>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem*var(--tw-space-x-reverse));margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)))}.space-y-10>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-scroll{overflow:scroll}.overscroll-none{overscroll-behavior:none}.truncate{overflow:hidden;white-space:nowrap}.overflow-ellipsis,.truncate{text-overflow:ellipsis}.whitespace-normal{white-space:normal}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-line{white-space:pre-line}.rounded{border-radius:.4rem}.rounded-md{border-radius:.6rem}.rounded-lg{border-radius:.8rem}.rounded-full{border-radius:9999px}.rounded-t-md{border-top-left-radius:.6rem;border-top-right-radius:.6rem}.rounded-tr-lg{border-top-right-radius:.8rem}.rounded-br-lg{border-bottom-right-radius:.8rem}.rounded-tl-lg{border-top-left-radius:.8rem}.rounded-bl-lg{border-bottom-left-radius:.8rem}.border{border-width:1px}.border-2{border-width:2px}.border-t-8{border-top-width:8px}.border-transparent{border-color:#0000}.bg-green-600{--tw-bg-opacity:1;background-color:rgb(67 160 71/var(--tw-bg-opacity))}.bg-gray-800{--tw-bg-opacity:1;background-color:rgb(66 66 66/var(--tw-bg-opacity))}.bg-grey-100{--tw-bg-opacity:1;background-color:rgb(245 245 245/var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-black{--tw-bg-opacity:1;background-color:rgb(34 41 47/var(--tw-bg-opacity))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(238 238 238/var(--tw-bg-opacity))}.bg-blue{--tw-bg-opacity:1;background-color:rgb(33 150 243/var(--tw-bg-opacity))}.bg-yellow-100\/50{background-color:#fff9c480}.bg-grey-200{--tw-bg-opacity:1;background-color:rgb(238 238 238/var(--tw-bg-opacity))}.bg-cover{background-size:cover}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0{padding:0}.p-6{padding:.6rem}.p-24{padding:2.4rem}.p-12{padding:1.2rem}.px-4{padding-left:.4rem;padding-right:.4rem}.py-2{padding-top:.2rem;padding-bottom:.2rem}.px-6{padding-left:.6rem;padding-right:.6rem}.py-4{padding-top:.4rem;padding-bottom:.4rem}.px-8{padding-left:.8rem;padding-right:.8rem}.py-6{padding-top:.6rem;padding-bottom:.6rem}.px-2{padding-left:.2rem;padding-right:.2rem}.pl-4{padding-left:.4rem}.pr-6{padding-right:.6rem}.pt-0{padding-top:0}.pt-4{padding-top:.4rem}.pl-0{padding-left:0}.pr-0{padding-right:0}.pb-4{padding-bottom:.4rem}.pl-8{padding-left:.8rem}.pt-12{padding-top:1.2rem}.text-left{text-align:left}.text-center{text-align:center}.font-sans{font-family:Muli,Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.font-serif{font-family:Georgia,Cambria,Times New Roman,Times,serif}.text-sm{font-size:1.4rem;line-height:2rem}.text-xl{font-size:2rem;line-height:2.8rem}.text-base{line-height:2.4rem}.text-16,.text-base{font-size:1.6rem}.text-6xl{font-size:6rem;line-height:1}.text-2xl{font-size:2.4rem;line-height:3.2rem}.text-4xl{font-size:3.6rem;line-height:4rem}.text-14{font-size:1.4rem}.text-24{font-size:2.4rem}.text-17{font-size:1.7rem}.text-5xl{font-size:4.8rem;line-height:1}.text-32{font-size:3.2rem}.font-medium{font-weight:500}.font-bold{font-weight:700}.font-800{font-weight:800}.font-normal{font-weight:400}.font-900{font-weight:900}.font-500{font-weight:500}.font-semibold{font-weight:600}.font-extrabold{font-weight:800}.font-600{font-weight:600}.capitalize{text-transform:capitalize}.normal-case{text-transform:none}.leading-tight{line-height:1.25}.leading-none{line-height:1}.tracking-tight{letter-spacing:-.025em}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.text-gray-300{--tw-text-opacity:1;color:rgb(224 224 224/var(--tw-text-opacity))}.text-grey-800{--tw-text-opacity:1;color:rgb(66 66 66/var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(117 117 117/var(--tw-text-opacity))}.text-green-600{--tw-text-opacity:1;color:rgb(67 160 71/var(--tw-text-opacity))}.text-orange-600{--tw-text-opacity:1;color:rgb(251 140 0/var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(158 158 158/var(--tw-text-opacity))}.text-gray-700{--tw-text-opacity:1;color:rgb(97 97 97/var(--tw-text-opacity))}.underline{text-decoration-line:underline}.line-through{text-decoration-line:line-through}.no-underline{text-decoration-line:none}.decoration-gray-500{text-decoration-color:#9e9e9e}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.shadow{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px 0 #0000000f;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px 0 var(--tw-shadow-color)}.shadow,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-md{--tw-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -1px var(--tw-shadow-color)}.shadow-1,.shadow-md{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-1{--tw-shadow:0px 2px 1px -1px #0003,0px 1px 1px 0px #00000024,0px 1px 3px 0px #0000001f;--tw-shadow-colored:0px 2px 1px -1px var(--tw-shadow-color),0px 1px 1px 0px var(--tw-shadow-color),0px 1px 3px 0px var(--tw-shadow-color)}.shadow-2{--tw-shadow:0px 3px 1px -2px #0003,0px 2px 2px 0px #00000024,0px 1px 5px 0px #0000001f;--tw-shadow-colored:0px 3px 1px -2px var(--tw-shadow-color),0px 2px 2px 0px var(--tw-shadow-color),0px 1px 5px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.blur{--tw-blur:blur(8px)}.blur,.drop-shadow{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow{--tw-drop-shadow:drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f)}.drop-shadow-none{--tw-drop-shadow:drop-shadow(0 0 #0000)}.drop-shadow-none,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.hover\:translate-y-1:hover{--tw-translate-y:0.1rem}.hover\:rotate-3:hover,.hover\:translate-y-1:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:rotate-3:hover{--tw-rotate:3deg}.hover\:skew-y-3:hover{--tw-skew-y:3deg}.hover\:scale-105:hover,.hover\:skew-y-3:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05}.hover\:list-disc:hover{list-style-type:disc}.hover\:bg-green-700:hover{--tw-bg-opacity:1;background-color:rgb(56 142 60/var(--tw-bg-opacity))}.hover\:bg-indigo-100\/25:hover{background-color:#c5cae940}.hover\:bg-grey-300:hover{--tw-bg-opacity:1;background-color:rgb(224 224 224/var(--tw-bg-opacity))}.hover\:bg-gray-100\/75:hover{background-color:#f5f5f5bf}.hover\:text-gray-700:hover{--tw-text-opacity:1;color:rgb(97 97 97/var(--tw-text-opacity))}.hover\:underline:hover{text-decoration-line:underline}.hover\:brightness-75:hover{--tw-brightness:brightness(.75)}.hover\:brightness-75:hover,.hover\:drop-shadow-2xl:hover{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.hover\:drop-shadow-2xl:hover{--tw-drop-shadow:drop-shadow(0 25px 25px #00000026)}.focus\:outline-none:focus{outline:2px solid #0000;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-green-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(76 175 80/var(--tw-ring-opacity))}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px}@media (prefers-color-scheme:dark){.dark\:text-green-500{--tw-text-opacity:1;color:rgb(76 175 80/var(--tw-text-opacity))}.dark\:text-gray-500{--tw-text-opacity:1;color:rgb(158 158 158/var(--tw-text-opacity))}.dark\:text-orange-500{--tw-text-opacity:1;color:rgb(255 152 0/var(--tw-text-opacity))}}@media (min-width:600px){.sm\:p-8{padding:.8rem}}@media (min-width:960px){.md\:mx-auto{margin-left:auto;margin-right:auto}.md\:ml-12{margin-left:1.2rem}.md\:max-w-288{max-width:28.8rem}.md\:flex-row{flex-direction:row}.md\:flex-col{flex-direction:column}.md\:pt-0{padding-top:0}}
|