feat: add VersionsSelect component (#383)

src/components/VersionsSelect/VersionsSelect.tsx

@@ -0,0 +1,36 @@
+import React, {useCallback, useState} from 'react';
+import {Select} from '@gravity-ui/uikit';
+
+import {useTranslation} from '../../hooks';
+
+export interface VersionsSelectProps {
+    version: string;
+    versions: string[];
+    onChange: (version: string) => void;
+    className?: string;
+}
+
+export const VersionsSelect: React.FC<VersionsSelectProps> = (props) => {
+    const {version: defaultVersion, versions, className, onChange} = props;
+    const [version, setVersion] = useState<string>(defaultVersion);
+
+    const {t} = useTranslation('header');
+
+    const onUpdate = useCallback(
+        (selected: string[]) => {
+            onChange(selected[0]);
+            setVersion(selected[0]);
+        },
+        [onChange, setVersion],
+    );
+
+    return (
+        <Select
+            placeholder={t('versions-select-placeholder')}
+            value={[version]}
+            options={versions.map((value) => ({value, content: value}))}
+            onUpdate={onUpdate}
+            className={className}
+        />
+    );
+};

src/components/VersionsSelect/index.ts

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

src/i18n/ar.json

@@ -130,5 +130,8 @@
   "paginator": {
     "next": "الصفحة التالية",
     "prev": "الصفحة السابقة"
+  },
+  "header": {
+    "versions-select-placeholder": "الإصدارات"
   }
 }

src/i18n/bg.json

@@ -129,5 +129,8 @@
   "paginator": {
     "next": "Следваща страница",
     "prev": "Предходна страница"
+  },
+  "header": {
+    "versions-select-placeholder": "Версии"
   }
 }

src/i18n/cs.json

@@ -133,5 +133,8 @@
   },
   "updated-at-date": {
     "title": "Aktualizováno na"
+  },
+  "header": {
+    "versions-select-placeholder": "Verze"
   }
 }

src/i18n/el.json

@@ -130,5 +130,8 @@
   "paginator": {
     "next": "Επόμενη σελίδα",
     "prev": "Προηγούμενη σελίδα"
+  },
+  "header": {
+    "versions-select-placeholder": "Εκδόσεις"
   }
 }

src/i18n/en.json

@@ -133,5 +133,8 @@
   },
   "updated-at-date": {
     "title": "Updated at"
+  },
+  "header": {
+    "versions-select-placeholder": "Versions"
   }
 }

src/i18n/es.json

@@ -133,5 +133,8 @@
   },
   "updated-at-date": {
     "title": "Actualizado en"
+  },
+  "header": {
+    "versions-select-placeholder": "Versiones"
   }
 }

src/i18n/et.json

@@ -130,5 +130,8 @@
   "paginator": {
     "next": "Järgmine lehekülg",
     "prev": "Eelmine lehekülg"
+  },
+  "header": {
+    "versions-select-placeholder": "Versioonid"
   }
 }

src/i18n/fr.json

@@ -133,5 +133,8 @@
   },
   "updated-at-date": {
     "title": "Mis à jour à"
+  },
+  "header": {
+    "versions-select-placeholder": "Versions"
   }
 }

src/i18n/he.json

@@ -130,5 +130,8 @@
   "paginator": {
     "next": "העמוד הבא",
     "prev": "העמוד הקודם"
+  },
+  "header": {
+    "versions-select-placeholder": "גרסאות"
   }
 }

src/i18n/kk.json

@@ -130,5 +130,8 @@
   "paginator": {
     "next": "Келесі бет",
     "prev": "Алдыңғы бет"
+  },
+  "header": {
+    "versions-select-placeholder": "Нұсқалар"
   }
 }

src/i18n/pt.json

@@ -130,5 +130,8 @@
   "paginator": {
     "next": "Página seguinte",
     "prev": "Página anterior"
+  },
+  "header": {
+    "versions-select-placeholder": "Versões"
   }
 }

src/i18n/ru.json

@@ -133,5 +133,8 @@
   },
   "updated-at-date": {
     "title": "Обновлена"
+  },
+  "header": {
+    "versions-select-placeholder": "Версии"
   }
 }

src/i18n/tr.json

@@ -130,5 +130,8 @@
   "paginator": {
     "next": "Sonraki sayfa",
     "prev": "Önceki sayfa"
+  },
+  "header": {
+    "versions-select-placeholder": "Sürümler"
   }
 }

src/i18n/uz.json

@@ -130,5 +130,8 @@
   "paginator": {
     "next": "Keyingi sahifa",
     "prev": "Avvalgi sahifa"
+  },
+  "header": {
+    "versions-select-placeholder": "Versiyalar"
   }
 }

src/i18n/zh-tw.json

@@ -130,5 +130,8 @@
   "paginator": {
     "next": "下一頁",
     "prev": "上一頁"
+  },
+  "header": {
+    "versions-select-placeholder": "版本"
   }
 }

src/i18n/zh.json

@@ -130,5 +130,8 @@
   "paginator": {
     "next": "下一页",
     "prev": "上一页"
+  },
+  "header": {
+    "versions-select-placeholder": "版本"
   }
 }

src/index.ts

@@ -30,6 +30,7 @@ export * from './components/SearchPage';
 export * from './components/SearchSuggest';
 export * from './components/DocContentPage';
 export * from './components/Notification';
+export * from './components/VersionsSelect';
 
 export * from './components/navigation';