Feed ​

<script lang="ts" setup>
import {
  Feed,
  FeedItem,
  FeedItemSimple,
  FeedItemBlock,
  FeedItemDateIndicator,
  FeedItemIcon,
  TextStyle,
} from '@returnless/focus-ui';
</script>

<template>
  <Feed>
    <FeedItem>
      <FeedItemIcon color="indigo">
        <CheckIcon />
      </FeedItemIcon>
      <FeedItemSimple>
        <TextStyle variant="strong">Application user</TextStyle> created the return order.
        <FeedItemDateIndicator>5 days ago</FeedItemDateIndicator>
      </FeedItemSimple>
    </FeedItem>
    <FeedItem>
    <FeedItemSimple>
      <TextStyle variant="strong">Application user</TextStyle> edited the return order.
      <FeedItemDateIndicator>5 days ago</FeedItemDateIndicator>
    </FeedItemSimple>
    </FeedItem>
    <FeedItem>
      <FeedItemIcon color="slate">
        <ChatBubbleBottomCenterIcon />
      </FeedItemIcon>
      <FeedItemBlock>
        <TextStyle variant="strong">Application user</TextStyle> commented
        <p>Called client, they reassured me the invoice would be paid by the 25th.</p>
        <FeedItemDateIndicator>just now</FeedItemDateIndicator>
      </FeedItemBlock>
    </FeedItem>
    <FeedItem>
      <FeedItemSimple>
        <TextStyle variant="strong">Application user</TextStyle> sent the return order.
        <FeedItemDateIndicator>just now</FeedItemDateIndicator>
      </FeedItemSimple>
    </FeedItem>
  </Feed>
</template>