Chakra UI Data Display - Horizon UI

function Event() {
  return (
    <Flex
      justifyContent="center"
      alignItems="center"
      w="100%"
      s
      px="12px"
      py="16px"
      borderRadius="16px"
    >
      <Flex
        bg={useColorModeValue("brand.500", "brand.400")}
        w="4px"
        h="100%"
        borderRadius="16px"
        me="10px"
      ></Flex>
      <Flex direction="column" align="start" me="auto">
        <Text
          textAlign="start"
          color={useColorModeValue("#1B2559", "white")}
          fontSize="md"
          me="6px"
          fontWeight="700"
        >
          Product Design Course
        </Text>
        <Text textAlign="start" color="#A3AED0" fontSize="sm" fontWeight="500">
          02:00 PM - 03:25 PM
        </Text>
      </Flex>
    </Flex>
  )
}

import Event from "components/dataDisplay/Event"

<Event name="Product Design Course" time="02:00 PM - 03:25 PM" />

function OrderStep() {
  return (
    <Flex justifyContent="center" alignItems="center" w="100%" zIndex="2">
      <Box
        h="66px"
        w="66px"
        borderRadius="50%"
        align="center"
        justify="center"
        bg={useColorModeValue(
          "white",
          "linear-gradient(180deg, #1F2A4F 0%, #18224D 50.63%, #111C44 100%)",
        )}
        boxShadow={useColorModeValue(
          "0px 18px 40px rgba(112, 144, 176, 0.12)",
          "inset 0px 4px 4px rgba(255, 255, 255, 0.2)",
        )}
      >
        <BellIcon
          mt="18px"
          color={useColorModeValue("brand.500", "white")}
          h="24px"
          w="24px"
        />
      </Box>
      <Flex direction="column" align="start" ms="20px" mr="auto">
        <Text
          color={useColorModeValue("#1B2559", "white")}
          fontSize="md"
          me="6px"
          fontWeight="500"
        >
          Products Picked
        </Text>
        <Text color="#A3AED0" fontSize="md" fontWeight="400">
          27 Jul 2022
        </Text>
      </Flex>
      <Flex
        align="center"
        justify="center"
        h="30px"
        w="30px"
        borderRadius="50%"
        border="1px solid"
        borderColor="green.500"
      >
        <CheckIcon h="18px" w="18px" color="green.500" />
      </Flex>
    </Flex>
  )
}

import OrderStep from "components/dataDisplay/OrderStep"

<OrderStep
  name="Products Picked"
  date="27 Jul 2022"
  status="done"
  icon={
    <IconBox
      h="66px"
      w="66px"
      bg={completeBg}
      boxShadow={completeShadow}
      icon={<BellIcon color={brandColor} h="32px" w="32px" />}
    />
  }
/>

function SessionBadge() {
  return (
    <Flex justifyContent="space-between" alignItems="center" w="100%">
      <Text
        color={useColorModeValue("#1B2559", "white")}
        fontSize="md"
        me="6px"
        fontWeight="500"
      >
        Chrome MacOS (Your current session)
      </Text>
      <Flex align="center" ms="auto">
        <Text color="#A3AED0" fontSize="sm" fontWeight="400" me="40px">
          US
        </Text>
        <Badge
          colorScheme="green"
          color="green.500"
          px="24px"
          fontSize="sm"
          borderRadius="10px"
          lineHeight="100%"
          padding="7px"
          paddingLeft="12px"
          paddingRight="12px"
        >
          Enabled
        </Badge>
      </Flex>
    </Flex>
  )
}

import SessionBadge from "components/dataDisplay/SessionBadge"

<SessionBadge
  detail="US"
  name="Chrome MacOS (Your current session)"
  status="Enabled"
  color="green"
/>

function TimelineItem() {
  return (
    <Flex
      align="center"
      p="6px"
      borderRadius="20px"
      bg={useColorModeValue("brand.900", "brand.400")}
    >
      <Flex
        me="20px"
        direction="column"
        align="center"
        justify="center"
        w="77px"
        h="77px"
        borderRadius="15px"
        bg={useColorModeValue("#32278D", "#1B2559")}
      >
        <Text
          mb="2px"
          fontSize="md"
          fontWeight="500"
          color={useColorModeValue("white", "white")}
        >
          Fri
        </Text>
        <Text
          lineHeight="100%"
          fontSize="34px"
          fontWeight="700"
          color={("#1B2559", "white")}
        >
          12
        </Text>
      </Flex>
      <Box>
        <Text
          fontSize="lg"
          fontWeight="700"
          color={useColorModeValue("white", "white")}
        >
          Webinar - Marketing for Developers
        </Text>
        <Flex align="center">
          <TimeIcon
            me="8px"
            w="16px"
            h="16px"
            color={useColorModeValue("white", "white")}
          />
          <Text
            fontSize="sm"
            fontWeight="500"
            color={useColorModeValue("white", "white")}
          >
            10:30 - 12:00
          </Text>
        </Flex>
      </Box>
      <Button mt="auto" variant="no-hover" bg="transparent" p="0px" ms="auto">
        <CheckIcon
          color={useColorModeValue("white", "white")}
          w="20px"
          h="20px"
        />
      </Button>
    </Flex>
  )
}

import TimelineItem from "components/dataDisplay/TimelineItem"

<TimelineItem
  title="Webinar - Marketing for Developers"
  day="12"
  weekday="Fri"
  hours="10:30 - 12:00"
  current
/>

function Transaction() {
  return (
    <Flex justifyContent="center" alignItems="center" w="100%">
      <Flex
        justify="center"
        align="center"
        h="42px"
        borderRadius="60px"
        me="6px"
        w="42px"
        bg={useColorModeValue("#F4F7FE", "whiteAlpha.100")}
      >
        <CheckIcon color={useColorModeValue("brand.400", "white")} />
      </Flex>
      <Flex direction="column" align="start" me="auto">
        <Text
          color={useColorModeValue("#1B2559", "white")}
          fontSize="sm"
          me="6px"
          fontWeight="700"
        >
          Bill & Taxes
        </Text>
        <Text
          color={useColorModeValue("#A3AED0", "white")}
          fontSize="xs"
          fontWeight="500"
        >
          Today, 16:36
        </Text>
      </Flex>
      <Text
        ms="auto"
        color={useColorModeValue("#1B2559", "white")}
        fontSize="sm"
        me="6px"
        fontWeight="700"
      >
        -$154.50
      </Text>
    </Flex>
  )
}

import Transaction from "components/dataDisplay/Transaction"

<Transaction name="Bill & Taxes" date="Today, 16:36" sum="-$154.50" />

function Transfer() {
  return (
    <Flex justifyContent="center" alignItems="center" w="100%">
      <Avatar
        h="34px"
        w="34px"
        src="https://i.ibb.co/2nCGngs/avatar4.png"
        me="14px"
      />
      <Flex direction="column" align="start" me="auto">
        <Text
          color={useColorModeValue("#1B2559", "white")}
          fontSize="md"
          me="6px"
          fontWeight="700"
        >
          From Adela Parkson
        </Text>
        <Text color="#A3AED0" fontSize="sm" fontWeight="500">
          Today, 16:36
        </Text>
      </Flex>
      <Badge ms="auto" colorScheme="green" color="green.500" fontSize="sm">
        +$50
      </Badge>
    </Flex>
  )
}

import Transfer from "components/dataDisplay/Transfer"

<Transfer
  mb="20px"
  name="From Adela Parkson"
  date="Today, 16:36"
  sum="+$50"
  avatar={avatar1}
/>