feat: add date range download dialog

new-lamassu-admin/src/components/date-range-picker/Tile.js

@@ -0,0 +1,94 @@
+import React from 'react'
+import classnames from 'classnames'
+import { makeStyles } from '@material-ui/core/styles'
+import { primaryColor, spring2, spring3, fontSecondary, disabledColor } from '../../styling/variables'
+
+const styles = {
+  wrapper: {
+    width: 45,
+    height: 26,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'relative'
+  },
+  button: {
+    border: 'none',
+    width: '100%',
+    height: '100%',
+    cursor: 'pointer',
+    padding: 0,
+    backgroundColor: 'transparent',
+    color: primaryColor,
+    zIndex: 2,
+    fontFamily: fontSecondary,
+    fontSize: 14,
+    fontWeight: 500
+  },
+  lowerBound: {
+    width: [['50%', '!important']],
+    left: '50%'
+  },
+  upperBound: {
+    width: [['50%', '!important']],
+    right: '50%'
+  },
+  selected: {
+    width: 26,
+    height: 26,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: spring2,
+    borderRadius: '50%',
+    position: 'absolute',
+    zIndex: 1
+  },
+  between: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    zIndex: 0,
+    backgroundColor: spring3
+  },
+  disabled: {
+    color: disabledColor,
+    cursor: 'default'
+  }
+}
+
+const useStyles = makeStyles(styles)
+
+const Tile = ({ isLowerBound, isUpperBound, isBetween, isDisabled, children, ...props }) => {
+  const classes = useStyles()
+  const selected = isLowerBound || isUpperBound
+
+  const rangeClasses = {
+    [classes.between]: isBetween && !(isLowerBound && isUpperBound),
+    [classes.lowerBound]: isLowerBound && !isUpperBound,
+    [classes.upperBound]: isUpperBound && !isLowerBound
+  }
+
+  const buttonWrapperClasses = {
+    [classes.wrapper]: true,
+    [classes.selected]: selected
+  }
+
+  const buttonClasses = {
+    [classes.button]: true,
+    [classes.disabled]: isDisabled
+  }
+
+  return (
+    <div className={classes.wrapper}>
+      <div className={classnames(rangeClasses)} />
+      <div className={classnames(buttonWrapperClasses)}>
+        <button className={classnames(buttonClasses)}>
+          {children}
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export default Tile