first

src/pages/documentation/ChangeLog.tsx

@@ -0,0 +1,98 @@
+import {
+  faChevronRight,
+  faCircleInfo
+} from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import Button from 'components/base/Button';
+import PhoenixDocCard from 'components/base/PhoenixDocCard';
+import changelogs from 'data/changelog';
+import { Alert } from 'react-bootstrap';
+import { Link } from 'react-router-dom';
+
+const ChangeLog = () => {
+  return (
+    <div>
+      <h2 className="mb-4 lh-sm">Changelog</h2>
+
+      {changelogs.map(changelog => (
+        <PhoenixDocCard className="mb-4" key={changelog.title}>
+          <PhoenixDocCard.Header noPreview>
+            <div className="d-flex justify-content-between align-items-center">
+              <div>
+                <h5 className="mb-2">
+                  <code className="fw-bold fs-7">v{changelog.version}</code> -{' '}
+                  {changelog.title}
+                </h5>
+                <p className="mb-0">{changelog.publishDate}</p>
+              </div>
+              <Button
+                as={Link}
+                variant="link"
+                to={`/migrations/#${changelog.version}`}
+                endIcon={
+                  <FontAwesomeIcon icon={faChevronRight} className="fs-10" />
+                }
+              >
+                See migration
+              </Button>
+            </div>
+          </PhoenixDocCard.Header>
+          <PhoenixDocCard.Body>
+            {changelog.alertText && (
+              <Alert
+                variant={'subtle-warning'}
+                className="d-flex align-items-center"
+              >
+                <FontAwesomeIcon
+                  icon={faCircleInfo}
+                  className="text-warning fs-5 me-3"
+                />
+                {changelog.alertText}
+              </Alert>
+            )}
+
+            {/* New */}
+            <h6 className="d-inline-block">New</h6>
+            <ul>
+              {changelog.logs.new.map(file => (
+                <li dangerouslySetInnerHTML={{ __html: file }} key={file} />
+              ))}
+            </ul>
+            {/* Update */}
+            {changelog.logs.update && (
+              <>
+                <h6 className="d-inline-block">Update</h6>
+                <ul>
+                  {changelog.logs.update.map(file => (
+                    <li dangerouslySetInnerHTML={{ __html: file }} key={file} />
+                  ))}
+                </ul>
+              </>
+            )}
+            {/* Fix */}
+            <h6 className="d-inline-block">Fix</h6>
+            <ul>
+              {changelog.logs.fix.map(file => (
+                <li dangerouslySetInnerHTML={{ __html: file }} key={file} />
+              ))}
+            </ul>
+          </PhoenixDocCard.Body>
+        </PhoenixDocCard>
+      ))}
+
+      <PhoenixDocCard className="mb-4">
+        <PhoenixDocCard.Header noPreview>
+          <h5 className="mb-2">
+            <code className="fw-bold fs-7">v1.0.0</code> - Initial Release
+          </h5>
+          <p className="mb-0">11 Sep, 2023</p>
+        </PhoenixDocCard.Header>
+        <PhoenixDocCard.Body>
+          <p className="mb-0">Nothing to see here.</p>
+        </PhoenixDocCard.Body>
+      </PhoenixDocCard>
+    </div>
+  );
+};
+
+export default ChangeLog;