@parkassist/pa-ui-library/dist/components/ConfigurationEntry/index.js

INX Platform elements

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { Column, Row } from "../Layout/Flex";
import styled from "styled-components";
import Palette from "../../constants/Palette";
import FontStyles from "../../constants/FontStyles";
export const FlexibleBox = styled(Row)`
  flex-wrap: wrap;
  justify-content: space-between;
  background-color: ${Palette.WHITE};
  padding: 16px;
  margin-right: 16px;
  margin-bottom: 16px;
  border-radius: 3px;
  border: 1px solid ${Palette.LIGHT_BLACK}
  font: ${FontStyles.BODY2_FONT};
  height: fit-content;
  transition: all 0.2s;
  &:hover {
    //transform: scale(1.01);
  }
`;
const ConfigurationEntryComponent = ({
  title,
  description,
  children,
  style = {},
  disabled = false,
  width,
  height
}) => {
  return _jsxs(FlexibleBox, {
    style: Object.assign(Object.assign({}, style), {
      width,
      height,
      opacity: disabled ? 0.3 : 1
    }),
    children: [_jsxs(Column, {
      style: {
        width: "40%"
      },
      children: [_jsx(Row, {
        style: {
          font: FontStyles.BODY1_FONT,
          marginBottom: 8
        },
        children: title
      }), _jsx(Row, {
        style: {
          color: Palette.DIM_GREY,
          marginBottom: 8
        },
        children: description
      })]
    }), _jsx(Column, {
      style: {
        justifyContent: "center",
        alignSelf: "center"
      },
      children: children
    })]
  });
};
export default ConfigurationEntryComponent;