✨ finish https://redwoodjs.com/docs/tutorial/chapter6/the-redwood-way…

…#storybook

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' }

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()
+  })
+})

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