From 3d22080ff7e901cb38f8cba9f00ea2ea54592332 Mon Sep 17 00:00:00 2001
From: tkt <37575408+tktcorporation@users.noreply.github.com>
Date: Mon, 10 Oct 2022 09:35:37 +0000
Subject: [PATCH] :sparkles: finish
 https://redwoodjs.com/docs/tutorial/chapter6/the-redwood-way#storybook

---
 .../components/Comment/Comment.stories.tsx    | 15 ++++++++++
 web/src/components/Comment/Comment.test.tsx   | 14 +++++++++
 web/src/components/Comment/Comment.tsx        | 30 +++++++++++++++++++
 3 files changed, 59 insertions(+)
 create mode 100644 web/src/components/Comment/Comment.stories.tsx
 create mode 100644 web/src/components/Comment/Comment.test.tsx
 create mode 100644 web/src/components/Comment/Comment.tsx

diff --git a/web/src/components/Comment/Comment.stories.tsx b/web/src/components/Comment/Comment.stories.tsx
new file mode 100644
index 000000000..83dea125e
--- /dev/null
+++ b/web/src/components/Comment/Comment.stories.tsx
@@ -0,0 +1,15 @@
+import Comment from './Comment'
+
+export const generated = () => {
+  return (
+    <Comment
+      comment={{
+        name: 'Rob Cameron',
+        body: 'This is the first comment!',
+        createdAt: '2020-01-01T12:34:56Z',
+      }}
+    />
+  )
+}
+
+export default { title: 'Components/Comment' }
diff --git a/web/src/components/Comment/Comment.test.tsx b/web/src/components/Comment/Comment.test.tsx
new file mode 100644
index 000000000..a1bc6f833
--- /dev/null
+++ b/web/src/components/Comment/Comment.test.tsx
@@ -0,0 +1,14 @@
+import { render } from '@redwoodjs/testing/web'
+
+import Comment from './Comment'
+
+//   Improve this test with help from the Redwood Testing Doc:
+//    https://redwoodjs.com/docs/testing#testing-components
+
+describe('Comment', () => {
+  it('renders successfully', () => {
+    expect(() => {
+      render(<Comment />)
+    }).not.toThrow()
+  })
+})
diff --git a/web/src/components/Comment/Comment.tsx b/web/src/components/Comment/Comment.tsx
new file mode 100644
index 000000000..f146714bb
--- /dev/null
+++ b/web/src/components/Comment/Comment.tsx
@@ -0,0 +1,30 @@
+const formattedDate = (datetime: ConstructorParameters<typeof Date>[0]) => {
+  const parsedDate = new Date(datetime)
+  const month = parsedDate.toLocaleString('default', { month: 'long' })
+  return `${parsedDate.getDate()} ${month} ${parsedDate.getFullYear()}`
+}
+
+// Just a temporary type. We'll replace this later
+interface Props {
+  comment: {
+    name: string
+    createdAt: string
+    body: string
+  }
+}
+
+const Comment = ({ comment }: Props) => {
+  return (
+    <div className="bg-gray-200 p-8 rounded-lg">
+      <header className="flex justify-between">
+        <h2 className="font-semibold text-gray-700">{comment.name}</h2>
+        <time className="text-xs text-gray-500" dateTime={comment.createdAt}>
+          {formattedDate(comment.createdAt)}
+        </time>
+      </header>
+      <p className="text-sm mt-2">{comment.body}</p>
+    </div>
+  )
+}
+
+export default Comment