2 files changed, 54 insertions, 0 deletions
diff --git a/src/lib/components/actions/topic.svelte b/src/lib/components/actions/topic.svelte
new file mode 100644
index 0000000..1311d06
--- /dev/null
+++ b/src/lib/components/actions/topic.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+  import type { TopicAction } from '$lib/stores/action';
+	export let actions: TopicAction;
+
+	import { _ } from 'svelte-i18n';
+</script>
+
+<li>
+  <a href="/reply/{actions.id}" title={$_('header.action.reply.title')}>
+    {@html $_('header.action.reply.display')}
+  </a>
+</li>
+
+<style>
+	li {
+		display: inline;
+		margin: 5px;
+	}
+
+	a {
+		text-decoration: none;
+		line-height: 3em;
+		display: inline-block;
+	}
+</style>
diff --git a/src/lib/components/actions/topic.test.ts b/src/lib/components/actions/topic.test.ts
new file mode 100644
index 0000000..0037a7f
--- /dev/null
+++ b/src/lib/components/actions/topic.test.ts
@@ -0,0 +1,29 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import '@testing-library/jest-dom/extend-expect';
+
+import { render } from '@testing-library/svelte';
+import '$lib/i18n';
+
+import Topic from './topic.svelte';
+
+const internals = {
+  results: null
+};
+
+describe('Topic Actions component', () => {
+
+  test('Should link to reply page', () => {
+
+    const results = render(Topic, { props: {
+      actions: {
+        id: '8ebaa211-fd9b-423a-8b4f-b57622007fde'
+      }
+    } });
+
+    expect(results.getByTitle('Reply').closest('a'))
+      .toHaveAttribute('href', '/reply/8ebaa211-fd9b-423a-8b4f-b57622007fde');
+  });
+});