feat: add LanguageSelector

Author: jgiovaresco

src/app/language-selector/LanguageSelector.stories.tsx

@@ -0,0 +1,14 @@
+import { action } from '@storybook/addon-actions';
+import { storiesOf } from '@storybook/react';
+import React from 'react';
+
+import { LanguageSelector } from './LanguageSelector';
+
+const stories = storiesOf('Components', module);
+
+const languages = [{ code: 'en', name: 'English' }, { code: 'fr', name: 'Français' }];
+stories.add(
+    'LanguageSelector',
+    () => <LanguageSelector languages={languages} setActiveLanguage={action('setActiveLanguage')} />,
+    { info: { inline: true } },
+);

src/app/language-selector/LanguageSelector.tsx

@@ -0,0 +1,28 @@
+import React, { FunctionComponent } from 'react';
+
+export type Language = {
+    /** Language name to display */
+    name: string;
+    /** Language code */
+    code: string;
+};
+
+export type LanguageSelectorProps = {
+    /** Available languages */
+    languages: Language[];
+    /** Select language handler */
+    setActiveLanguage: Function;
+};
+
+/**
+ * Language selector
+ */
+export const LanguageSelector: FunctionComponent<LanguageSelectorProps> = ({ languages, setActiveLanguage }) => (
+    <ul className="selector">
+        {languages.map(lang => (
+            <li key={lang.code}>
+                <button onClick={() => setActiveLanguage(lang.code)}>{lang.name}</button>
+            </li>
+        ))}
+    </ul>
+);

src/app/language-selector/index.ts

@@ -0,0 +1 @@
+export * from './LanguageSelector';