From e48a89c188890dcc93921ff3666d1a0675e1a7e0 Mon Sep 17 00:00:00 2001
From: Amy Haywood Dutton <me@amyhaywood.com>
Date: Mon, 1 Jul 2024 12:06:44 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20WIP:=20Dedicated=20Changelog=20p?=
 =?UTF-8?q?age?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ChangelogDetails.stories.tsx              | 26 +++++++++++++++++++
 .../ChangelogDetails.test.tsx                 | 14 ++++++++++
 .../ChangelogDetails/ChangelogDetails.tsx     | 14 ++++++++++
 3 files changed, 54 insertions(+)
 create mode 100644 web/src/components/ChangelogDetails/ChangelogDetails.stories.tsx
 create mode 100644 web/src/components/ChangelogDetails/ChangelogDetails.test.tsx
 create mode 100644 web/src/components/ChangelogDetails/ChangelogDetails.tsx

diff --git a/web/src/components/ChangelogDetails/ChangelogDetails.stories.tsx b/web/src/components/ChangelogDetails/ChangelogDetails.stories.tsx
new file mode 100644
index 0000000..aad1a81
--- /dev/null
+++ b/web/src/components/ChangelogDetails/ChangelogDetails.stories.tsx
@@ -0,0 +1,26 @@
+// Pass props to your component by passing an `args` object to your story
+//
+// ```tsx
+// export const Primary: Story = {
+//  args: {
+//    propName: propValue
+//  }
+// }
+// ```
+//
+// See https://storybook.js.org/docs/react/writing-stories/args.
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+import ChangelogDetails from './ChangelogDetails'
+
+const meta: Meta<typeof ChangelogDetails> = {
+  component: ChangelogDetails,
+  tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof ChangelogDetails>
+
+export const Primary: Story = {}
diff --git a/web/src/components/ChangelogDetails/ChangelogDetails.test.tsx b/web/src/components/ChangelogDetails/ChangelogDetails.test.tsx
new file mode 100644
index 0000000..47ba156
--- /dev/null
+++ b/web/src/components/ChangelogDetails/ChangelogDetails.test.tsx
@@ -0,0 +1,14 @@
+import { render } from '@redwoodjs/testing/web'
+
+import ChangelogDetails from './ChangelogDetails'
+
+//   Improve this test with help from the Redwood Testing Doc:
+//    https://redwoodjs.com/docs/testing#testing-components
+
+describe('ChangelogDetails', () => {
+  it('renders successfully', () => {
+    expect(() => {
+      render(<ChangelogDetails />)
+    }).not.toThrow()
+  })
+})
diff --git a/web/src/components/ChangelogDetails/ChangelogDetails.tsx b/web/src/components/ChangelogDetails/ChangelogDetails.tsx
new file mode 100644
index 0000000..8596fcf
--- /dev/null
+++ b/web/src/components/ChangelogDetails/ChangelogDetails.tsx
@@ -0,0 +1,14 @@
+import { prettifyDate } from 'src/helpers/DateHelpers'
+
+const ChangelogDetails = ({ children, date }) => {
+  return (
+    <div className="changelog mb-10">
+      <strong className="mb-8 block text-2xl leading-relaxed">
+        {prettifyDate(date)}
+      </strong>
+      {children}
+    </div>
+  )
+}
+
+export default ChangelogDetails