import React from "react";
import { ListGroupItem } from "react-bootstrap";
import { Flex, FlexItem } from "../../../base";

const SampleCacheItem = ({ hash, id }) => (
    <ListGroupItem>
        <Flex alignItems="flex-start" justifyContent="space-between">
            <FlexItem>
                <Flex alignItems="center">
                    <i className="fas fa-archive fa-fw" style={{ fontSize: "24px" }} />
                    <FlexItem pad={10}>
                        <div>
                            <strong className="text-uppercase">{id}</strong>
                        </div>
                        <div>
                            <small>Created from SOMETHING</small>
                        </div>
                    </FlexItem>
                </Flex>
            </FlexItem>
            <FlexItem>
                <div className="text-right">
                    <div>
                        <strong>SIZE</strong>
                    </div>
                </div>
            </FlexItem>
        </Flex>
    </ListGroupItem>
);

export default SampleCacheItem;

@@ -1,12 +1,47 @@
+import %7B sumBy %7D from %22lodash-es%22;%0A
 import React
@@ -123,24 +123,38 @@
 ex, FlexItem
+, RelativeTime
  %7D from %22../
@@ -165,16 +165,129 @@
 ./base%22;
+%0Aimport %7B byteSize %7D from %22../../../utils/utils%22;%0A%0Aconst calculateSize = files =%3E byteSize(sumBy(files, %22size%22));
 %0A%0Aconst 
@@ -311,16 +311,31 @@
  (%7B 
+created_at, files, 
 hash
-, id
  %7D) 
@@ -692,39 +692,14 @@
 rong
- className=%22text-uppercase%22%3E%7Bid
+%3E%7Bhash
 %7D%3C/s
@@ -805,30 +805,112 @@
 all%3E
-Created from SOMETHING
+%0A                                Created %3CRelativeTime time=%7Bcreated_at%7D /%3E%0A                            
 %3C/sm
@@ -1155,12 +1155,30 @@
 ong%3E
-SIZE
+%7BcalculateSize(files)%7D
 %3C/st

Fix CacheItem appearance