feat: create LanguageSwitcher component

src/app/(public)/about/work/page.tsx

@@ -2,7 +2,7 @@ import Image from 'next/image';
 import * as React from 'react';
 import ReactMarkdown from 'react-markdown';
 
-import Heading from '@/components/atoms/Heading';
+import Heading from '@/components/atoms/headings/Heading';
 import Education from '@/components/organisms/about-work/Education';
 import Intro from '@/components/organisms/about-work/Intro';
 import Languages from '@/components/organisms/about-work/Languages';

src/components/atoms/LanguageSwitcher/LanguageSwitcher.tsx

@@ -0,0 +1,73 @@
+import { InputLabel, MenuItem, Select, SelectChangeEvent } from '@mui/material';
+import FormControl from '@mui/material/FormControl';
+import { useState } from 'react';
+
+// export interface LanguageSwitcherProps {
+//   language: string;
+// }
+
+interface Language {
+  label: string;
+  value: string;
+  enabled: boolean;
+}
+
+const languages: Language[] = [
+  {
+    label: '🇬🇧 EN',
+    value: 'en',
+    enabled: true,
+  },
+  {
+    label: '🇮🇹 IT',
+    value: 'it',
+    enabled: true,
+  },
+  {
+    label: '🇩🇪 DE',
+    value: 'de',
+    enabled: true,
+  },
+];
+
+const LanguageSwitcher = () => {
+  const [chosenLanguage, setChosenLanguage] = useState('');
+
+  const handleChange = (event: SelectChangeEvent) => {
+    setChosenLanguage(event.target.value);
+  };
+
+  const label = <>🌐</>;
+
+  return (
+    <div>
+      <FormControl sx={{ m: 1, minWidth: 80 }} size='small'>
+        <InputLabel id='demo-select-small-label'>{label}</InputLabel>
+        <Select
+          id='demo-select-small'
+          labelId='demo-select-small-label'
+          value={chosenLanguage}
+          label={label}
+          onChange={handleChange}
+          style={{ fontSize: '14px' }}
+        >
+          {languages.map(
+            (lang: Language) =>
+              lang.enabled && (
+                <MenuItem
+                  className='font-light'
+                  style={{ fontSize: '14px', fontWeight: 300 }}
+                  key={lang.value}
+                  value={lang.value}
+                >
+                  {lang.label}
+                </MenuItem>
+              )
+          )}
+        </Select>
+      </FormControl>
+    </div>
+  );
+};
+
+export default LanguageSwitcher;

src/components/atoms/LanguageSwitcher/__stories__/LanguageSwitcher.stories.tsx

@@ -0,0 +1,17 @@
+import { Meta } from '@storybook/react';
+
+import LanguageSwitcher, {
+  LanguageSwitcherProps,
+} from '@/components/atoms/LanguageSwitcher/LanguageSwitcher';
+
+const meta: Meta<typeof LanguageSwitcher> = {
+  title: 'LanguageSwitcher',
+  component: LanguageSwitcher,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+export const SampleStory = (args: LanguageSwitcherProps) => {
+  return <LanguageSwitcher {...args} />;
+};

src/components/organisms/about-work/Education.tsx

@@ -4,7 +4,7 @@ import Image from 'next/image';
 import * as React from 'react';
 import ReactMarkdown from 'react-markdown';
 
-import SectionHeading from '@/components/atoms/SectionHeading';
+import SectionHeading from '@/components/atoms/headings/SectionHeading';
 
 import { School } from '@/types/School';
 

src/components/organisms/about-work/Intro.tsx

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import ReactMarkdown from 'react-markdown';
 
-import SectionHeading from '@/components/atoms/SectionHeading';
+import SectionHeading from '@/components/atoms/headings/SectionHeading';
 
 import { SoftwareDevIntro } from '@/types/ShortText';
 

src/components/organisms/about-work/Languages.tsx

@@ -3,7 +3,7 @@
 import Image from 'next/image';
 import * as React from 'react';
 
-import SectionHeading from '@/components/atoms/SectionHeading';
+import SectionHeading from '@/components/atoms/headings/SectionHeading';
 
 import { Language } from '@/types/Language';
 

src/components/organisms/about-work/Publications.tsx

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { AiOutlineFilePdf } from 'react-icons/ai';
 
-import SectionHeading from '@/components/atoms/SectionHeading';
+import SectionHeading from '@/components/atoms/headings/SectionHeading';
 import UnstyledLink from '@/components/links/UnstyledLink';
 
 import { Publication } from '@/types/Publication';

src/components/organisms/about-work/WorkExperience.tsx

@@ -5,7 +5,7 @@ import { useTheme } from 'next-themes';
 import * as React from 'react';
 import ReactMarkdown from 'react-markdown';
 
-import SectionHeading from '@/components/atoms/SectionHeading';
+import SectionHeading from '@/components/atoms/headings/SectionHeading';
 
 import { Job } from '@/types/Job';