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

INX Platform elements

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import styled from "styled-components";
import { Column, Row } from "../Layout/Flex";
import Palette from "../../constants/Palette";
import SkeletonLoader from "../SkeletonLoader";
import Button from "../Button";
import { Icons } from "../..";
const Wrapper = styled(Column)`
    height: 300px;
    border: 1px solid ${Palette.GREY_SMOKE};
    background-color: ${Palette.WHITE};
    overflow: hidden;
    border-radius: 8px;
    min-width: 200px;
    cursor: pointer;

    &:hover {
        border-color: ${Palette.DIM_GREY};
    }
`;
const ImageRow = styled(Row)(({
  src
}) => `
    width: 100%;
    height: 50%;
    background-image: url(${src});
    background-size: cover;
`);
const ContentColumn = styled(Column)`
    height: 50%;
    width: 100%;
    padding: 16px;
    align-items: center;
`;
const Title = styled(Row)`
    font-size: 16px;
    margin-bottom: 8px;
    font-family: Poppins;
`;
const SubTitle = styled(Row)`
    font-size: 14px;
    margin-bottom: 32px;
    color: ${Palette.DIM_GREY};
`;
const defaultIconIfNoImage = _jsx(Icons.LayersIcon, {
  filter: Palette.FILTER_WHITE_SMOKE,
  style: {
    height: "50%"
  }
});
export function Card({
  style = {},
  title,
  subtitle,
  imageSrc,
  iconIfNoImage = defaultIconIfNoImage,
  buttonText,
  onClick = () => null,
  loading
}) {
  if (loading) {
    return _jsxs(Wrapper, {
      style: Object.assign({}, style),
      children: [_jsx(SkeletonLoader, {
        width: "100%",
        height: "50%"
      }), _jsxs(ContentColumn, {
        children: [_jsx(Title, {
          children: _jsx(SkeletonLoader, {
            width: 100,
            height: 25
          })
        }), _jsx(SubTitle, {
          children: _jsx(SkeletonLoader, {
            width: 100,
            height: 25
          })
        }), _jsx(Row, {
          children: _jsx(SkeletonLoader, {
            width: 100,
            height: 25
          })
        })]
      })]
    });
  }
  return _jsxs(Wrapper, {
    "data-testid": "card",
    style: Object.assign({}, style),
    onClick: onClick,
    children: [imageSrc ? _jsx(ImageRow, {
      src: imageSrc
    }) : iconIfNoImage, _jsxs(ContentColumn, {
      children: [_jsx(Title, {
        children: title
      }), _jsx(SubTitle, {
        children: subtitle
      }), _jsx(Row, {
        children: _jsx(Button, {
          onClick: onClick,
          style: {
            border: "none",
            color: Palette.DIM_GREY,
            fontSize: 12
          },
          children: buttonText
        })
      })]
    })]
  });
}