From 48f77a2b352d6774f9a0b9dfde8db7f422479f23 Mon Sep 17 00:00:00 2001
From: Austin Chen <akrolsmir@gmail.com>
Date: Wed, 23 Feb 2022 02:06:26 -0800
Subject: [PATCH] Try out a story for FeedClose

---
 web/components/contract-feed.tsx  |  2 +-
 web/stories/FeedClose.stories.tsx | 29 +++++++++++++++++++++++++++++
 web/stories/FeedClose.tsx         | 28 ++++++++++++++++++++++++++++
 3 files changed, 58 insertions(+), 1 deletion(-)
 create mode 100644 web/stories/FeedClose.stories.tsx
 create mode 100644 web/stories/FeedClose.tsx

diff --git a/web/components/contract-feed.tsx b/web/components/contract-feed.tsx
index 318a07a5..d21c81c4 100644
--- a/web/components/contract-feed.tsx
+++ b/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}>
diff --git a/web/stories/FeedClose.stories.tsx b/web/stories/FeedClose.stories.tsx
new file mode 100644
index 00000000..db220fbf
--- /dev/null
+++ b/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 = {}
diff --git a/web/stories/FeedClose.tsx b/web/stories/FeedClose.tsx
new file mode 100644
index 00000000..1a35ae1e
--- /dev/null
+++ b/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>
+  )
+}