content, css: generateDotSwitcherTemplate

1 files changed, 29 insertions, 0 deletions

diff --git a/src/content/dependencies/generateDotSwitcherTemplate.js b/src/content/dependencies/generateDotSwitcherTemplate.js
new file mode 100644
index 00000000..6d350b22
--- /dev/null
+++ b/src/content/dependencies/generateDotSwitcherTemplate.js
@@ -0,0 +1,29 @@
+export default {
+  extraDependencies: ['html', 'language'],
+
+  slots: {
+    attributes: {
+      type: 'attributes',
+      mutable: false,
+    },
+
+    options: {
+      validate: v => v.strictArrayOf(v.isHTML),
+    },
+
+    initialOptionIndex: {type: 'number'},
+  },
+
+  generate: (slots, {html, language}) =>
+    html.tag('span', {class: 'dot-switcher'},
+      slots.attributes,
+
+      language.formatListWithoutSeparator(
+        slots.options
+          .map((option, index) =>
+            html.tag('span',
+              index === slots.initialOptionIndex &&
+                {class: 'current'},
+
+              option)))),
+};