Merge branch 'main' into update-skill-names

src/components/dropdowns/Dropdown.tsx

@@ -1,5 +1,4 @@
 import {
-  Label,
   Listbox,
   ListboxButton,
   ListboxOption,
@@ -10,35 +9,37 @@ import { CheckIcon } from "@heroicons/react/20/solid/index";
 import { clsx } from "clsx";
 import { Fragment } from "react";
 
-interface Props {
-  item: string;
-  options: readonly string[];
-  onChange: (option: string) => void;
-  label?: string;
-  icon: JSX.Element;
+type Item<T> = { label: string; value: T };
+
+interface Props<T> {
+  item: Item<T>;
+  options: Item<T>[];
+  onChange: (option: T) => void;
+  leftIcon?: JSX.Element;
+  rightIcon?: JSX.Element;
 }
 
-export const Dropdown = ({ item, options, icon, onChange, label }: Props) => {
+export function Dropdown<T>({
+  item,
+  options,
+  onChange,
+  leftIcon,
+  rightIcon,
+}: Props<T>) {
   return (
     <Listbox
       value={item}
-      onChange={(option) => option !== item && onChange(option)}
+      onChange={(option) =>
+        option.value !== item.value && onChange(option.value)
+      }
     >
       {({ open }) => (
         <div className="min-w-[6rem]">
-          {label && (
-            <Label className="mb-1 block text-sm font-medium text-gray-700">
-              {label}
-            </Label>
-          )}
           <div className="relative">
-            <ListboxButton className="peer relative w-full cursor-default rounded-md py-2 pl-3 pr-10 text-left text-white hover:bg-wsg-orange-400 hover:bg-opacity-50 focus:ring-1 focus:ring-wsi-blue-300 sm:text-sm">
-              <span className="block truncate text-base font-medium">
-                {item}
-              </span>
-              <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
-                {icon}
-              </span>
+            <ListboxButton className="peer flex w-full items-center gap-2 rounded-md px-4 py-2 text-left text-white hover:bg-wsg-orange-400 hover:bg-opacity-50 focus:ring-1 focus:ring-wsi-blue-300 sm:text-sm">
+              {leftIcon && <span>{leftIcon}</span>}
+              <span className="flex-1 text-base font-medium">{item.label}</span>
+              {rightIcon && <span>{rightIcon}</span>}
             </ListboxButton>
 
             <Transition
@@ -49,11 +50,11 @@ export const Dropdown = ({ item, options, icon, onChange, label }: Props) => {
               leaveTo="opacity-0"
             >
               <ListboxOptions className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
-                {options.map((option) => (
+                {options.map((option, index) => (
                   <ListboxOption
-                    key={option}
+                    key={index}
                     className={
-                      "relative cursor-default select-none py-2 pl-3 pr-9 text-gray-900 hover:bg-wsg-orange-700"
+                      "relative cursor-pointer select-none py-2 pl-3 pr-9 text-gray-900 hover:bg-wsg-orange-700"
                     }
                     value={option}
                   >
@@ -65,14 +66,14 @@ export const Dropdown = ({ item, options, icon, onChange, label }: Props) => {
                             "block truncate",
                           )}
                         >
-                          {option}
+                          {option.label}
                         </span>
 
-                        {selected ? (
+                        {selected && (
                           <span className="absolute inset-y-0 right-0 flex items-center pr-4 text-wsi-blue-300">
                             <CheckIcon className="h-5 w-5" aria-hidden="true" />
                           </span>
-                        ) : null}
+                        )}
                       </>
                     )}
                   </ListboxOption>
@@ -84,4 +85,4 @@ export const Dropdown = ({ item, options, icon, onChange, label }: Props) => {
       )}
     </Listbox>
   );
-};
+}

src/components/dropdowns/LanguageDropdown.tsx

@@ -1,21 +1,21 @@
-import { ChevronUpDownIcon } from "@heroicons/react/20/solid";
-import type { LocalePath } from "~/i18n";
+import { LanguageIcon } from "@heroicons/react/20/solid";
+import { languages, type Language, type LocalePath } from "~/i18n";
 import { Dropdown } from "./Dropdown";
 
 interface Props {
-  lang: string;
+  lang: Language;
   paths: LocalePath[];
 }
 
 export const LanguageDropdown = ({ lang, paths }: Props) => (
   <Dropdown
-    item={lang.toUpperCase()}
-    icon={<ChevronUpDownIcon className="h-5 w-5" aria-hidden="true" />}
-    options={paths.map(({ lang }) => lang.toUpperCase())}
-    onChange={(option) =>
+    item={{ label: languages[lang], value: lang }}
+    leftIcon={<LanguageIcon className="h-5 w-5" aria-hidden="true" />}
+    options={paths.map(({ lang }) => ({ label: languages[lang], value: lang }))}
+    onChange={(option) => {
       window.location.assign(
-        paths.find(({ lang }) => lang.toUpperCase() === option)?.path || "",
-      )
-    }
+        paths.find(({ lang }) => lang === option)?.path || "",
+      );
+    }}
   />
 );

src/components/dropdowns/SkillsDropdown.tsx

@@ -13,9 +13,9 @@ interface Props {
 
 export const SkillsDropdown = ({ title, skills }: Props) => (
   <Dropdown
-    item={title}
-    icon={<ChevronDownIcon className="h-5 w-5" aria-hidden="true" />}
-    options={skills.map(({ name }) => name)}
+    item={{ label: title, value: "" }}
+    rightIcon={<ChevronDownIcon className="h-5 w-5" aria-hidden="true" />}
+    options={skills.map(({ name }) => ({ label: name, value: name }))}
     onChange={(option) =>
       window.location.assign(
         skills.find(({ name }) => name === option)?.href || "",

src/pages/en/it-software-solutions-for-business.astro

@@ -16,7 +16,7 @@ const historyData = historyJson[lang]["skill09"];
       "The skill IT Software Solutions for Business represents the entire spectrum of software-developing IT professions. All full-stack programmers are suitable. This includes desktop, server, database, mobile app and web development.<br /><br />For this job you need a good technical understanding and logical thinking. You need to understand the requirements and wishes of the client and develop programs that are reliable, updatable, and easy for users to understand and use.",
     requirements:
       "You are proficient in at least one programming language, e.g., C#, can program desktop, server, web, and mobile applications, have knowledge of UML and databases (SQL), and understand English-language tasks.",
-    videoUrl: "https://www.youtube.com/embed/tSGg8S-_I4k",
+    videoUrl: "https://www.youtube-nocookie.com/embed/tSGg8S-_I4k",
     occupation: {
       title: "A Career with a future and always on the cutting edge",
       text: "The possibilities for communication and information exchange are constantly increasing. With a degree in IT, you are in demand: In 2021, approximately 12&thinsp;% more IT talents were sought than in the previous year. As a software developer, you belong to one of the fastest growing occupational groups.<br /><br />Your main working tool is the computer. This means that you are almost unrestricted in terms of where and when you work, as long as you don't have a customer appointment. The only thing you need is a stable Internet connection.",

src/pages/en/mobile-applications-development.astro

@@ -16,7 +16,7 @@ const historyData = historyJson[lang]["skill08"];
       "As a software developer with a specialization in mobile applications, you are a programmer and designer in one. You ensure that the apps work on users' mobile devices, look appealing, and are fun to use.<br /><br />For the job, you need a certain understanding of technology and design. You need to understand the requirements and wishes of the clients and develop a product that is reliable, updatable, and easy for users to understand and use.",
     requirements:
       "You master at least one programming language, e.g. Dart or Kotlin, and program mobile apps, including the connection to online APIs and the use of integrated sensors. You understand tasks in English.",
-    videoUrl: "https://www.youtube.com/embed/Qe0ZaQAOQUY",
+    videoUrl: "https://www.youtube-nocookie.com/embed/Qe0ZaQAOQUY",
     occupation: {
       title: "A Career with a future and always on the cutting edge",
       text: "The possibilities of communication and information exchange are constantly increasing. With a degree in IT, you are in demand: in 2021, about 12&thinsp;% more IT talents were sought than in the previous year. The Mobile Applications Developer is therefore one of the fastest growing occupations.<br /><br />Your main working tool is your laptop, so you are almost unrestricted in terms of work location and time, as long as there is no customer appointment. The only thing you need is a stable internet connection.",

src/pages/mobile-applications-development.astro

@@ -16,7 +16,7 @@ const historyData = historyJson[lang]["skill08"];
       "Als Softwareentwickler*in mit der Spezialisierung auf mobile Apps bist du Programmierer*in und Designer*in in einem. Du sorgst dafür, dass die Apps auf den mobilen Endgeräten der Benutzer*innen funktionieren, ansprechend aussehen und Spaß machen.<br /><br />Für den Beruf brauchst du ein gewisses Verständnis für Technologie und Design. Du musst die Anforderungen und Wünsche der Auftraggeber*innen verstehen und ein Produkt entwickeln, das zuverlässig, aktualisierbar und für Benutzer*innen leicht zu verstehen und zu verwenden ist.",
     requirements:
       "Du beherrschst mindestens eine Programmiersprache, z.&thinsp;B. Dart oder Kotlin, und programmierst Android-Apps, auch mit Verknüpfung zu Webschnittstellen und der Verwendung integrierter Sensoren. Du verstehst englischsprachige Aufgabenstellungen.",
-    videoUrl: "https://www.youtube.com/embed/v7I124lty3s",
+    videoUrl: "https://www.youtube-nocookie.com/embed/v7I124lty3s",
     occupation: {
       title: "Ein Beruf mit Zukunft und stets am Puls der Zeit",
       text: "Die Möglichkeiten der Kommunikation und des Informationsaustauschs nehmen stetig zu. Mit einem Abschluss in der IT bist du gefragt: Im Jahr 2021 wurden ca.&nbsp;12&thinsp;% mehr IT-Talente gesucht als im Vorjahr. Als App-Entwickler*in gehörst du somit zu einer der am schnellsten wachsenden Berufsgruppen.<br /><br />Dein Hauptarbeitsmittel ist dein Laptop. Du bist also in Sachen Arbeitsort und -zeit fast ungebunden, sofern kein Kundentermin ansteht. Das Einzige, was du brauchst, ist eine stabile Internetverbindung.",