Added raids and converted scroll up to compnent

app/api/events/route.ts

@@ -13,7 +13,7 @@ export async function GET(req: Request) {
       axios.get(eventsData),
       axios.get(leekData),
     ])
-    const userTimezone = decodeURIComponent( req.url).split("=").pop() as string
+    const userTimezone = decodeURIComponent(req.url).split("=").pop() as string
     const currentDate = moment.tz(userTimezone)
 
     // Function to convert date strings to Date objects
@@ -33,8 +33,13 @@ export async function GET(req: Request) {
       ).toISOString()}-${obj.name}`
 
     // Function to combine objects
-    const combineObjects = (obj1: any, obj2: { extraData: any }) => ({
+    const combineObjects = (
+      obj1: any,
+      obj2: { extraData: any; image: string; link: string }
+    ) => ({
       ...obj1,
+      image: obj2.image,
+      link: obj2.link,
       extraData: {
         ...obj2.extraData,
       },

app/api/raids/route.ts

@@ -0,0 +1,37 @@
+import axios from "axios"
+import { NextResponse } from "next/server"
+
+const leekData =
+  "https://raw.githubusercontent.com/bigfoott/ScrapedDuck/data/raids.json"
+export async function GET(req: Request) {
+  try {
+    const leekRaids = await axios.get(leekData)
+
+    // Filter raids into different tiers
+    const tier1Raids = filterRaidsByTier(leekRaids.data, "Tier 1")
+    const tier2Raids = filterRaidsByTier(leekRaids.data, "Tier 2")
+    const tier3Raids = filterRaidsByTier(leekRaids.data, "Tier 3")
+    const tier4Raids = filterRaidsByTier(leekRaids.data, "Tier 4")
+    const tier5Raids = filterRaidsByTier(leekRaids.data, "Tier 5")
+    const megaRaids = filterRaidsByTier(leekRaids.data, "Mega")
+
+    return NextResponse.json(
+      {
+        msg: "Success",
+        tier_1: tier1Raids,
+        tier_2: tier2Raids,
+        tier_3: tier3Raids,
+        tier_4: tier4Raids,
+        tier_5: tier5Raids,
+        mega: megaRaids,
+      },
+      { status: 200 }
+    )
+  } catch (error) {
+    return NextResponse.json({ msg: "Error in Grunts GET" }, { status: 500 })
+  }
+}
+
+function filterRaidsByTier(raids: any[], tier: string) {
+  return raids.filter((raid) => raid.tier === tier)
+}

app/raids/page.tsx

@@ -0,0 +1,13 @@
+"use client"
+import { Container } from "@mantine/core"
+import { NavBar } from "@/components/NavBar"
+import { Raids} from "@/components/Raids"
+
+export default function PokemonName() {
+  return (
+    <Container fluid className="overflow-hidden w-full md:w-4/5">
+      <NavBar />
+      <Raids />
+    </Container>
+  )
+}

components/EventList.tsx

@@ -6,15 +6,17 @@ import {
   Title,
   Stack,
   Image,
+  Skeleton,
+  Button,
 } from "@mantine/core"
 import useEvents from "@/hooks/useEvents"
 import { useEffect, useState } from "react"
+import { IconArrowRight } from "@tabler/icons-react"
+import { ScrollUp } from "./ScrollUp"
 
 export const EventList = () => {
   const userTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone
-
   const { data, isLoading } = useEvents(userTimezone)
-
   const [currentTime, setCurrentTime] = useState(new Date())
 
   useEffect(() => {
@@ -71,7 +73,7 @@ export const EventList = () => {
         <Text size="sm" c="dimmed">
           {label}
         </Text>
-        <Text size="sm" c="dimmed" >
+        <Text size="sm" c="dimmed">
           {formatTime(days, hours, minutes)}
         </Text>
       </div>
@@ -84,14 +86,15 @@ export const EventList = () => {
     end: string
     bonuses: [{ text: string; template: string }]
     extraData: any
+    image: string
+    link: string
   }) => (
     <Accordion.Item key={event.name} value={event.name}>
       <Accordion.Control>
         <Group wrap="nowrap">
+          <Image src={event.image} alt="boss" fit="contain" w="20%"></Image>
           <div className="w-full">
-            <Text>
-            {event.name}
-            </Text>
+            <Text>{event.name}</Text>
             <Text size="sm" c="dimmed">
               End Date: {formatDate(event.end)}
             </Text>
@@ -101,7 +104,7 @@ export const EventList = () => {
       </Accordion.Control>
       <Accordion.Panel>
         <Card bg="none">
-          <Text>
+          <div>
             {event.bonuses?.length > 0 && `Bonuses:`}
             {event.bonuses?.map((bonus) => (
               <Text key={bonus.text} size="sm" c="dimmed">
@@ -139,7 +142,7 @@ export const EventList = () => {
               )
             )}
             {event.extraData?.spotlight && (
-              <>
+              <div key={event.extraData.spotlight.name}>
                 <Text size="sm" c="dimmed">
                   {event.extraData.spotlight.name}
                 </Text>
@@ -153,28 +156,42 @@ export const EventList = () => {
                   h={100}
                   w="auto"
                 />
-              </>
+              </div>
             )}
             {event.extraData?.communityday && (
               <>
                 {event.extraData.communityday.spawns?.map(
-                  (spawn: { name: string }) => (
-                    <Text key={spawn.name} size="sm" c="dimmed">
-                      {spawn.name}
-                    </Text>
+                  (spawn: { name: string; image: string }) => (
+                    <div key={spawn.image}>
+                      <Image
+                        src={spawn.image}
+                        alt="pokemon"
+                        fit="contain"
+                        h={100}
+                        w="auto"
+                      />
+                      <Text key={spawn.name} size="sm" c="dimmed">
+                        {spawn.name}
+                      </Text>
+                    </div>
                   )
                 )}
                 <Text size="sm" c="dimmed">
                   {event.extraData.communityday.bonusDisclaimers}
                 </Text>
               </>
             )}
-            {!event.bonuses && !event.extraData && (
-              <Text size="sm" c="dimmed">
-                N/A
-              </Text>
-            )}
-          </Text>
+
+            <Button
+              component="a"
+              href={event.link}
+              target="_blank"
+              variant="light"
+              rightSection={<IconArrowRight size={14} />}
+            >
+              More Info
+            </Button>
+          </div>
         </Card>
       </Accordion.Panel>
     </Accordion.Item>
@@ -183,10 +200,16 @@ export const EventList = () => {
   const renderActiveEvents = data?.active_events?.map(renderEvent)
   const renderUpcomingEvents = data?.upcoming_events?.map(renderEvent)
 
+  if (isLoading) {
+    return <Skeleton visible={isLoading} h={1000}></Skeleton>
+  }
   return (
     <>
+      <ScrollUp />
       <Title>Active Events</Title>
-      <Text size="sm" c="dimmed">Time Now: {formatDate(data?.time)}</Text>
+      <Text size="sm" c="dimmed">
+        Time Now: {formatDate(data?.time)}
+      </Text>
       <Accordion> {renderActiveEvents} </Accordion>
       <Title>Upcoming Events</Title>
       <Accordion>{renderUpcomingEvents}</Accordion>

components/NavBar.tsx

@@ -1,6 +1,12 @@
 "use client"
 import { NavLink, Box, Drawer, Burger, Container } from "@mantine/core"
-import { IconNotebook, IconSearch, IconPokeball, IconCalendarEvent } from "@tabler/icons-react"
+import {
+  IconNotebook,
+  IconSearch,
+  IconPokeball,
+  IconCalendarEvent,
+  IconSwords
+} from "@tabler/icons-react"
 import { useDisclosure } from "@mantine/hooks"
 import { ColorSchemeToggle } from "./ColorSchemeToggle"
 import { usePathname, useRouter } from "next/navigation"
@@ -27,6 +33,11 @@ const data = [
     leftSection: <IconCalendarEvent size="1rem" stroke={1.5} />,
     url: "/events",
   },
+  {
+    label: "Raids",
+    leftSection: <IconSwords size="1rem" stroke={1.5} />,
+    url: "/raids",
+  },
 ]
 
 export const NavBar = () => {