✨(app-desk) design static LanguagePicker

Design static LanguagePicker, we will add the interactivity later.

src/frontend/apps/desk/src/app/Header/Header.tsx

@@ -5,6 +5,8 @@ import styled from 'styled-components';
 
 import { Box, Text } from '@/components/';
 
+import { LanguagePicker } from '../Language/';
+
 import { default as IconCells } from './assets/icon-cells.svg';
 import { default as IconDesk } from './assets/icon-desk.svg';
 import { default as IconFAQ } from './assets/icon-faq.svg';
@@ -66,6 +68,7 @@ const Header = () => {
             >
               FAQ
             </Button>
+            <LanguagePicker />
           </Box>
           <Button
             aria-label="Access to the cells menu"

src/frontend/apps/desk/src/app/Language/LanguagePicker.tsx

@@ -0,0 +1,79 @@
+import { Select } from '@openfun/cunningham-react';
+import Image from 'next/image';
+import styled from 'styled-components';
+
+import { Box, Text } from '@/components/';
+
+import { default as IconLanguage } from './assets/icon-language.svg';
+
+const SelectStyled = styled(Select)<{ $isSmall?: boolean }>`
+  flex-shrink: 0;
+  width: 5.5rem;
+
+  .c__select__wrapper {
+    min-height: 2rem;
+    height: auto;
+    border-color: #ddd;
+    padding: 0 0.15rem 0 0.45rem;
+    border-radius: 1px;
+
+    .labelled-box .labelled-box__children {
+      padding-right: 2rem;
+
+      .c_select__render .typo-text {
+        ${({ $isSmall }) => $isSmall && `display: none;`}
+      }
+    }
+
+    &:hover {
+      border-color: var(--c--theme--colors--primary-500);
+    }
+  }
+`;
+
+const optionsPicker = [
+  {
+    value: 'FR',
+    label: 'FR',
+    render: () => (
+      <Box
+        className="c_select__render"
+        $direction="row"
+        $gap="0.7rem"
+        $align="center"
+      >
+        <Image priority src={IconLanguage} alt="Language Icon" />
+        <Text>FR</Text>
+      </Box>
+    ),
+  },
+  {
+    value: 'EN',
+    label: 'EN',
+    render: () => (
+      <Box
+        className="c_select__render"
+        $direction="row"
+        $gap="0.7rem"
+        $align="center"
+      >
+        <Image priority src={IconLanguage} alt="Language Icon" />
+        <Text>EN</Text>
+      </Box>
+    ),
+  },
+];
+
+export const LanguagePicker = () => {
+  return (
+    <SelectStyled
+      label="Langue"
+      showLabelWhenSelected={false}
+      clearable={false}
+      hideLabel
+      defaultValue="FR"
+      className="c_select__no_bg"
+      options={optionsPicker}
+    />
+  );
+};

src/frontend/apps/desk/src/app/Language/assets/icon-language.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.334 6.66683L15.2673 14.0002H13.8307L13.03 12.0002H10.3033L9.50398 14.0002H8.06798L11.0007 6.66683H12.334ZM6.66732 1.3335V2.66683H10.6673V4.00016H9.35532C8.84106 5.54821 8.0203 6.97684 6.94198 8.20083C7.42285 8.6299 7.94444 9.01104 8.49932 9.33883L7.99865 10.5908C7.28233 10.1846 6.61238 9.70149 6.00065 9.15016C4.80971 10.228 3.39934 11.035 1.86665 11.5155L1.50932 10.2295C2.82254 9.81077 4.03266 9.11972 5.06065 8.2015C4.29978 7.34012 3.66603 6.37434 3.17865 5.3335H4.67198C5.04355 6.0194 5.4891 6.66257 6.00065 7.2515C6.83406 6.2909 7.49085 5.19037 7.94065 4.00083L1.33398 4.00016V2.66683H5.33398V1.3335H6.66732ZM11.6673 8.59016L10.836 10.6668H12.4973L11.6673 8.59016Z" fill="#000091"/>
+</svg>

src/frontend/apps/desk/src/app/Language/index.ts

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