Try out a story for FeedClose

web/components/contract-feed.tsx

@@ -79,7 +79,7 @@ function FeedComment(props: {
   )
 }
 
-function Timestamp(props: { time: number }) {
+export function Timestamp(props: { time: number }) {
   const { time } = props
   return (
     <DateTimeTooltip time={time}>

web/stories/FeedClose.stories.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+
+import { FeedClose } from './FeedClose'
+
+export default {
+  title: 'Example/FeedClose',
+  component: FeedClose,
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
+    layout: 'fullscreen',
+  },
+} as ComponentMeta<typeof FeedClose>
+
+const Template: ComponentStory<typeof FeedClose> = (args) => (
+  <FeedClose {...args} />
+)
+
+export const LoggedIn = Template.bind({})
+LoggedIn.args = {
+  contract: {
+    id: '9jvisdkf',
+    slug: '1234-3123-14hfk',
+    closeTime: 1598486400000,
+  },
+}
+
+// export const LoggedOut = Template.bind({})
+// LoggedOut.args = {}

web/stories/FeedClose.tsx

@@ -0,0 +1,28 @@
+import { LockClosedIcon } from '@heroicons/react/solid'
+import { Contract } from '../../common/contract'
+import { Timestamp } from '../components/contract-feed'
+
+export function FeedClose(props: { contract: Contract }) {
+  const { contract } = props
+
+  return (
+    <div className="relative flex items-start space-x-3">
+      <div>
+        <div className="relative px-1">
+          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-gray-200">
+            <LockClosedIcon
+              className="h-5 w-5 text-gray-500"
+              aria-hidden="true"
+            />
+          </div>
+        </div>
+      </div>
+      <div className="min-w-0 flex-1 py-1.5">
+        <div className="text-sm text-gray-500">
+          Trading closed in this market{' '}
+          <Timestamp time={contract.closeTime || 0} />
+        </div>
+      </div>
+    </div>
+  )
+}