sort talks by date descending

Signed-off-by: Piotr Zaniewski <piotrzan@gmail.com>

src/components/Talks.js

@@ -5,15 +5,22 @@ const talksData = require('../data/talks.json');
 const Talks = () => {
   const [selectedYear, setSelectedYear] = useState('all');
   const [selectedTag, setSelectedTag] = useState('all');
-
-  const years = [...new Set(talksData.map(talk => talk.date))];
+
+  // Sort the years array for the dropdown
+  const years = [...new Set(talksData.map(talk => talk.date))].sort();
   const allTags = [...new Set(talksData.flatMap(talk => talk.tags))];
-
-  const filteredTalks = talksData.filter(talk => {
-    const yearMatch = selectedYear === 'all' || talk.date === selectedYear;
-    const tagMatch = selectedTag === 'all' || talk.tags.includes(selectedTag);
-    return yearMatch && tagMatch;
-  });
+
+  // Filter and sort the talks
+  const filteredTalks = talksData
+    .filter(talk => {
+      const yearMatch = selectedYear === 'all' || talk.date === selectedYear;
+      const tagMatch = selectedTag === 'all' || talk.tags.includes(selectedTag);
+      return yearMatch && tagMatch;
+    })
+    .sort((a, b) => {
+      // Convert dates to timestamps for comparison
+      return new Date(a.date) - new Date(b.date);
+    });
 
   return (
     <div className="max-w-4xl mx-auto">
@@ -26,7 +33,6 @@ const Talks = () => {
           Feel free to check out the recordings and slides!
         </p>
       </div>
-
       <div className="mb-8 flex flex-wrap gap-4">
         <select
           value={selectedYear}
@@ -38,7 +44,6 @@ const Talks = () => {
             <option key={year} value={year}>{year}</option>
           ))}
         </select>
-
         <select
           value={selectedTag}
           onChange={(e) => setSelectedTag(e.target.value)}
@@ -50,7 +55,6 @@ const Talks = () => {
           ))}
         </select>
       </div>
-
       <div>
         {filteredTalks.map((talk, index) => (
           <TalkCard key={index} talk={talk} />