Add a changelog list component

2 files changed, 31 insertions, 0 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/changelog-list/ChangelogList.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/changelog-list/ChangelogList.tsx
new file mode 100644
index 0000000000..bc6b3a2295
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/changelog-list/ChangelogList.tsx
@@ -0,0 +1,30 @@
+import styled from 'styled-components';
+
+import { IChangelog } from '../../../shared/ipc-types';
+import { BodySmall } from '../../lib/components';
+import { Flex } from '../../lib/components';
+import { Colors } from '../../lib/foundations';
+
+const StyledList = styled(Flex)`
+  list-style-type: disc;
+  padding-left: 0;
+  li {
+    margin-left: 1.5em;
+  }
+`;
+
+export type ChangelogListProps = {
+  changelog: IChangelog;
+};
+
+export function ChangelogList({ changelog }: ChangelogListProps) {
+  return (
+    <StyledList as="ul" $flexDirection="column" $gap="medium">
+      {changelog.map((item, i) => (
+        <BodySmall as="li" key={`${item}${i}`} color={Colors.white60}>
+          {item}
+        </BodySmall>
+      ))}
+    </StyledList>
+  );
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/changelog-list/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/changelog-list/index.ts
new file mode 100644
index 0000000000..f560f0ebd6
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/changelog-list/index.ts
@@ -0,0 +1 @@
+export * from './ChangelogList';