/***************************************************************************
 * The contents of this file were generated with Amplify Studio.           *
 * Please refrain from making any modifications to this file.              *
 * Any changes to this file will be overwritten when running amplify pull. *
 **************************************************************************/

/* eslint-disable */
import React from "react";
import { getOverrideProps } from "@aws-amplify/ui-react/internal";
import { Flex, Image, Text, View } from "@aws-amplify/ui-react";
export default function Organismscardbooksreading(props) {
  const { overrides, ...rest } = props;
  return (
    <Flex
      gap="10px"
      direction="column"
      position="relative"
      boxShadow="0px 0px 8px rgba(0.4901960790157318, 0.4901960790157318, 0.4901960790157318, 0.11999999731779099)"
      borderRadius="8px"
      padding="0px 0px 0px 0px"
      {...rest}
      {...getOverrideProps(overrides, "Organismscardbooksreading")}
    >
      <Flex
        padding="0px 0px 0px 0px"
        width="273px"
        height="140px"
        shrink="0"
        position="relative"
        {...getOverrideProps(overrides, "Group 17")}
      >
        <View
          width="273px"
          height="140px"
          position="absolute"
          top="0px"
          left="0px"
          borderRadius="8px"
          padding="0px 0px 0px 0px"
          backgroundColor="rgba(255,255,255,1)"
          {...getOverrideProps(overrides, "Rectangle 6")}
        ></View>
        <Image
          width="91px"
          height="118px"
          position="absolute"
          top="11px"
          left="11px"
          borderRadius="4px"
          padding="0px 0px 0px 0px"
          {...getOverrideProps(overrides, "Rectangle 7")}
        ></Image>
        <Text
          fontFamily="Roboto"
          fontSize="14px"
          fontWeight="400"
          color="rgba(23,23,23,1)"
          lineHeight="22px"
          textAlign="left"
          display="flex"
          direction="column"
          justifyContent="flex-start"
          width="142px"
          position="absolute"
          top="11px"
          left="118px"
          padding="0px 0px 0px 0px"
          whiteSpace="pre-wrap"
          children="Three Men in a Boat"
          {...getOverrideProps(overrides, "Three Men in a Boat")}
        ></Text>
        <Text
          fontFamily="Roboto"
          fontSize="12px"
          fontWeight="400"
          color="rgba(137,137,137,1)"
          lineHeight="16px"
          textAlign="left"
          display="flex"
          direction="column"
          justifyContent="flex-start"
          width="142px"
          position="absolute"
          top="37px"
          left="118px"
          padding="0px 0px 0px 0px"
          whiteSpace="pre-wrap"
          children="By Jerome K. Jerome"
          {...getOverrideProps(overrides, "By Jerome K. Jerome")}
        ></Text>
        <Text
          fontFamily="Roboto"
          fontSize="12px"
          fontWeight="400"
          color="rgba(137,137,137,1)"
          lineHeight="16px"
          textAlign="left"
          display="flex"
          direction="column"
          justifyContent="flex-start"
          width="142px"
          position="absolute"
          top="57px"
          left="118px"
          padding="0px 0px 0px 0px"
          whiteSpace="pre-wrap"
          children="Catergory - Humorous"
          {...getOverrideProps(overrides, "Catergory - Humorous")}
        ></Text>
        <Text
          fontFamily="Roboto"
          fontSize="12px"
          fontWeight="400"
          color="rgba(137,137,137,1)"
          lineHeight="16px"
          textAlign="left"
          display="flex"
          direction="column"
          justifyContent="flex-start"
          width="142px"
          position="absolute"
          top="113px"
          left="118px"
          padding="0px 0px 0px 0px"
          whiteSpace="pre-wrap"
          children="20/250 pages left"
          {...getOverrideProps(overrides, "20/250 pages left")}
        ></Text>
      </Flex>
    </Flex>
  );
}