♻️ Ajoute des types TS aux différents composants

En particulier, ça permettre d'améliorer la complétion !

src/components/card.astro

@@ -1,10 +1,21 @@
 ---
-import { Tick } from "@components/ui/icons";
 import SquareRoundedCheck from "@components/ui/icons/square-rounded-check.astro";
 
-import Link from "@components/ui/link.astro";
+export type CardInfo = {
+  name: string;
+  popular: boolean;
+  features: string[];
+  button: {
+    text: string;
+    link: string;
+  };
+};
 
+type Props = {
+  card: CardInfo;
+}
 const { card } = Astro.props;
+
 ---
 
 <div>

src/components/container.astro

@@ -1,4 +1,7 @@
 ---
+type Props = {
+  class?: string;
+}
 const { class: className } = Astro.props;
 ---
 

src/components/features.astro

@@ -42,7 +42,6 @@ const features = [
   },
 ];
 ---
-
 <div class="mt-16 md:mt-0">
   <h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold lg:tracking-tight">
     Missions de l'institut

src/components/item.astro

@@ -1,21 +1,29 @@
 ---
 import { Icon } from "astro-icon";
-const { color = "white", icon = "circle-filled" } = Astro.props;
-
-let textColor;
-let backgroundColor;
 
-if (color == "white") {
-    textColor = "text-white";
-    backgroundColor = "bg-black";
-} else {
-    textColor = `text-${color}-600`;
-    backgroundColor = `bg-${color}-100`;
+const supportedStyles = {
+    white: {
+        textColor: "text-white",
+        backgroundColor: "bg-black",
+    },
+    sky: {
+        textColor: "text-sky-600",
+        backgroundColor: "bg-sky-100",
+    },
+    purple: {
+        textColor: "text-purple-600",
+        backgroundColor: "bg-purple-100",
+    },
 }
+type SupportedStyle = keyof typeof supportedStyles;
+
+type Props = {
+    color?: SupportedStyle;
+    icon: string;
+};
+const { color = "white", icon = "circle-filled" } = Astro.props;
 
-// Tailwind tree shaker
-("bg-sky-100 bg-purple-100 bg-red-100 bg-black");
-("text-sky-600 text-purple-600 text-red-600 text-black");
+const {textColor, backgroundColor } = supportedStyles[color]
 ---
 
 <span class="relative">

src/components/itn-list-item.astro

@@ -1,6 +1,9 @@
 ---
-import Topic from "/src/components/itn-topic.astro";
+import Topic, { type ItnTopicType } from "./itn-topic.astro";
 
+type Props = {
+  name: ItnTopicType;
+};
 const { name } = Astro.props;
 ---
 

src/components/itn-topic.astro

@@ -4,27 +4,28 @@ import { Icon } from "astro-icon";
 const icons = {
   "Ingénierie Numérique": {
     name: "abacus",
-    iconColor: "sky-600",
-    backgroundColor: "sky-100",
+    iconColor: "text-sky-600",
+    backgroundColor: "bg-sky-100",
   },
   "Industries Culturelles et Créatives": {
     name: "tabler:palette",
-    iconColor: "purple-600",
-    backgroundColor: "purple-100",
+    iconColor: "text-purple-600",
+    backgroundColor: "bg-purple-100",
   },
   "Santé Numérique": {
     name: "tabler:vaccine",
-    iconColor: "red-600",
-    backgroundColor: "red-100",
+    iconColor: "text-red-600",
+    backgroundColor: "bg-red-100",
   },
 };
+export type ItnTopicType = keyof typeof icons;
 
+type Props = {
+  name: ItnTopicType;
+};
 const { name } = Astro.props;
-const icon = icons[name];
 
-`bg-sky-100 text-sky-600 
-bg-purple-100 text-purple-600
-bg-red-100 bg-red-600`;
+const icon = icons[name];
 ---
 
 <span
@@ -34,10 +35,10 @@ bg-red-100 bg-red-600`;
   title={name}>
   <span style="position: relative; top:0.0625em;">
     <span
-      class={`bg-${icon.backgroundColor} top-1 mt-0 w-5 h-5 rounded inline-flex items-center justify-center`}>
+      class={`${icon.backgroundColor} top-1 mt-0 w-5 h-5 rounded inline-flex items-center justify-center`}>
       <Icon
         name={icon.name}
-        class={`text-${icon.iconColor} inline-block w-4 h-4`}
+        class={`${icon.iconColor} inline-block w-4 h-4`}
       />
     </span>
   </span>

src/components/list-item.astro

@@ -1,24 +1,33 @@
 ---
 import { Icon } from "astro-icon";
-const { color = "white", icon = "circle-filled" } = Astro.props;
 
-let textColor;
-let backgroundColor;
+const supportedStyles = {
+  white: {
+    textColor: "text-white",
+    backgroundColor: "bg-bkack",
+  },
+  black: {
+    textColor: "text-black",
+    backgroundColor: "bg-white",
+  },
+  sky: {
+    textColor: "text-sky-600",
+    backgroundColor: "bg-sky-100",
+  },
+  purple: {
+    textColor: "text-purple-600",
+    backgroundColor: "bg-purple-100",
+  },
+};
+type SupportedStyle = keyof typeof supportedStyles;
 
-if (color == "white") {
-  textColor = "text-white";
-  backgroundColor = "bg-black";
-} else if (color == "black") {
-  textColor = "text-black";
-  backgroundColor = "bg-white";
-} else {
-  textColor = `text-${color}-600`;
-  backgroundColor = `bg-${color}-100`;
-}
+type Props = {
+  color?: SupportedStyle;
+  icon?: string;
+};
+const { color = "white", icon = "circle-filled" } = Astro.props;
 
-// Tailwind tree shaker
-("bg-sky-100 bg-purple-100 bg-red-100 bg-black bg-white");
-("text-sky-600 text-purple-600 text-red-600 text-white text-black");
+const { textColor, backgroundColor} = supportedStyles[color];
 ---
 
 <li class="relative">

src/components/mareva-list-item.astro

@@ -1,5 +1,9 @@
 ---
-import Topic from "/src/components/mareva-topic-alt.astro";
+import Topic, { type MarevaTopicType } from "./mareva-topic-alt.astro";
+
+type Props = {
+  name: MarevaTopicType
+};
 const { name } = Astro.props;
 ---
 

src/components/mareva-topic-alt.astro

@@ -23,17 +23,14 @@ const icons = {
     background: "purple-200",
   },
 };
+export type MarevaTopicType = keyof typeof icons;
 
+type Props = {
+  name: MarevaTopicType
+};
 const { name } = Astro.props;
-const icon = icons[name];
 
-`bg-slate-800 text-slate-200 
-bg-orange-200 text-orange-500 
-bg-slate-200 text-slate-800 
-text-green-200
-bg-purple-200 text-purple-500
-bg-rose-200 text-rose-500
-bg-blue-200 text-blue-500`;
+const icon = icons[name];
 ---
 
 <span

src/components/mareva-topic.astro

@@ -8,6 +8,9 @@ const icons = {
   Apprentissage: "brain",
 };
 
+type Props = {
+  name: keyof typeof icons;
+};
 const { name } = Astro.props;
 ---
 

src/components/movie-project.astro

@@ -1,12 +1,7 @@
 ---
 import { Image } from "@astrojs/image/components";
-import { Picture } from "@astrojs/image/components";
-import Link from "@components/ui/card-link.astro";
 import { Icon } from "astro-icon";
 
-let { title, author, description, image, url, tags } = Astro.props;
-
-tags = tags.split(",").map((tag) => tag.trim());
 
 const icons = {
   Photogrammétrie: "stereo-glasses",
@@ -20,10 +15,18 @@ const icons = {
   Innovation: "bulb",
 };
 
-// import crossingTheLandscape from "assets/crossing-the-landscape.png";
+type Props = {
+  title: string;
+  author: string;
+  description: string;
+  image: ImageMetadata;
+  url: string;
+  tags: string | string[];
+};
+const { title, author, description, image, url, tags: tagListOrString } = Astro.props;
 
-// const url =
-//     "https://projet-ingenierie.minesparis.psl.eu/portfolio/capture-volumetrique-et-danse-collaboration-avec-lartiste-celeste-rogosin/";
+const tagList = Array.isArray(tagListOrString) ? tagListOrString : tagListOrString.split(",");
+const tags = tagList.map((tag) => tag.trim());
 ---
 
 <div
@@ -32,8 +35,8 @@ const icons = {
     src={image}
     class="hidden md:inline-block rounded-l-md m-0"
     alt="Crossing the Landscape"
-    width="196"
-    height="196"
+    width={196}
+    height={196}
     loading="eager"
     format="avif"
   />

src/components/named-tag.astro

@@ -1,9 +1,7 @@
 ---
 import { Icon } from "astro-icon";
 
-const { type } = Astro.props;
-
-const style = {
+const AvailableStyles = {
   "Ingénierie Numérique": {
     iconName: "abacus",
     iconColor: "text-sky-600",
@@ -28,8 +26,15 @@ const style = {
     backgroundColor: "bg-slate-100",
     textColor: "text-slate-900",
   },
-}[type]
+}
+type TagType = keyof typeof AvailableStyles;
+
+type Props = {
+  type: TagType;
+};
+const { type } = Astro.props;
 
+const style = AvailableStyles[type];
 ---
 
 <span class={`py-1 px-1 rounded relative ${style.backgroundColor} ${style.iconColor}`}>

src/components/navbar/dropdown.astro

@@ -1,10 +1,10 @@
 ---
-import { Dropdown, DropdownItems } from "astro-navbar";
+import { Dropdown as AstroDropdown, DropdownItems } from "astro-navbar";
 const { title, lastItem, children } = Astro.props;
 ---
 
 <li class="relative">
-  <Dropdown class="group">
+  <AstroDropdown class="group">
     <button
       class="flex items-center gap-1 w-full lg:w-auto lg:px-3 py-2 text-gray-600 hover:text-gray-900">
       <span>{title}</span>
@@ -43,5 +43,5 @@ const { title, lastItem, children } = Astro.props;
         </div>
       </div>
     </DropdownItems>
-  </Dropdown>
+  </AstroDropdown>
 </li>

src/components/navbar/navbar.astro

@@ -1,13 +1,17 @@
 ---
 import Container from "@components/container.astro";
-import Link from "@components/ui/link.astro";
 import ITNLogo from "@components/itn-logo.astro";
 import Dropdown from "./dropdown.astro";
 import { Astronav, MenuItems, MenuIcon } from "astro-navbar";
-import { Icon } from "astro-icon";
 import Social from "@components/social.astro";
 
-const menuitems = [
+type MenuItem = {
+  title: string;
+  path: string;
+  children?: MenuItem[];
+};
+
+const menuitems: MenuItem[] = [
   // {
   //   title: "Features",
   //   path: "#",