✨ Update video entries and implement sorting by publication date

app/videos/config/videos.ts

@@ -9,10 +9,19 @@ export interface YouTubeVideo {
 export const videos: YouTubeVideo[] = [
   {
     id: "1",
-    title: "Comment j'ai créé mon Portfolio avec Next.js",
+    title: "Une journée avec un développeur web étudiant | vlog dev",
     thumbnail: "/images/videos/Video1.png",
     url: "https://youtu.be/xzs5jgJWWVU",
-    publishedAt: "13/11/2024",
+    publishedAt: "24-11-2024",
+    new: false,
+  },
+  {
+    id: "2",
+    title:
+      "On upgrade (un peu) mon setup | Une journée en télétravail d’un alternant",
+    thumbnail: "/images/videos/Video2.png",
+    url: "https://youtu.be/xpul90E3VXM?si=kiqaWnQCWnTRpoH8",
+    publishedAt: "8-12-2024",
     new: true,
   },
 ];

app/videos/page.tsx

@@ -1,17 +1,28 @@
+import { videos } from "@/app/videos/config/videos";
 import {
   TypographyH2,
   TypographyP,
   TypographySmall,
 } from "@/components/typography";
 import { VideoCardBadge } from "@/components/VideoCard";
-import { videos } from "@/app/videos/config/videos";
 
 export default function VideosPage() {
+  const parseDate = (dateStr: string) => {
+    const [day, month, year] = dateStr.split("-").map(Number);
+    return new Date(year, month - 1, day);
+  };
+
+  const sortedVideos = [...videos].sort((a, b) => {
+    const dateA = parseDate(a.publishedAt);
+    const dateB = parseDate(b.publishedAt);
+    return dateB.getTime() - dateA.getTime();
+  });
+
   return (
     <div className="w-full">
       <TypographyH2 border={false}>youtube videos</TypographyH2>
 
-      {videos.length === 0 ? (
+      {sortedVideos.length === 0 ? (
         <TypographyP>
           Cette section est un peu vide pour le moment. Je prévois de commencer
           à faire des vidéos sur le développement logiciel, le lifestyle, la vie
@@ -32,7 +43,7 @@ export default function VideosPage() {
         </TypographyP>
       ) : (
         <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
-          {videos.map((video) => (
+          {sortedVideos.map((video) => (
             <VideoCardBadge key={video.id} video={video} />
           ))}
         </div>