local bug?

Author: bjerrecs

src/components/Events.astro

@@ -1,5 +1,6 @@
 ---
 import CardButton from "../components/ui/CardButton.astro";
+import MyComponent from "../components/Events.jsx"
 ---
 
 <h3 class="font-semibold text-lg text-secondary mb-2 dark:text-white">Today</h3>
@@ -67,4 +68,5 @@ import CardButton from "../components/ui/CardButton.astro";
     alt=""
     class="w-[280px] max-lg:w-[200px]"
     />
-</div>
+</div>
+<MyComponent client:only/>

src/components/Events.jsx

@@ -0,0 +1,37 @@
+import React, { useEffect, useState } from 'react';
+
+const Events = () => {
+    const [events, setEvents] = useState([]);
+
+    useEffect(() => {
+        const fetchData = async () => {
+            try {
+                const response = await fetch('http://events.vatsim-scandinavia.org/api/calendars/1/events', {
+                    headers: {
+                        Authorization: 'Bearer 83e0745f-486d-4f73-8184-40c98930380c'
+                    },
+                    mode: 'no-cors' // Add the 'no-cors' mode
+                });
+                const data = await response.json();
+                setEvents(data);
+            } catch (error) {
+                console.error('Error fetching events:', error);
+            }
+        };
+
+        fetchData();
+    }, []);
+
+    return (
+        <div>
+            <h1>Events</h1>
+            <ul>
+                {events.map(event => (
+                    <li key={event.id}>{event.title}</li>
+                ))}
+            </ul>
+        </div>
+    );
+};
+
+export default Events;