From 7efcf7f300fff63f8f03e4820d3bbeead9bcded0 Mon Sep 17 00:00:00 2001
From: "Jeff." <jeffreysfu@gmail.com>
Date: Sun, 19 Jan 2025 21:08:51 -0400
Subject: [PATCH] Update .gitignore, refactor Header component for type safety,
 and adjust API URLs in context files

---
 .gitignore                                    |   3 +
 src/components/Header/Header.tsx              |   2 +-
 src/components/ItemList/ItemList.tsx          |   6 +-
 .../ProfilesDetails/ProfilesDetails.tsx       |  39 ++----
 src/components/Searcher/Searcher.tsx          |   8 +-
 src/context/AddonsContext.tsx                 |  63 +++++----
 src/context/ElvUIContext.tsx                  |  12 +-
 src/context/WeakAurasContext.tsx              |   9 +-
 src/hook/useFilterAddons.ts                   |  42 +++---
 src/pages/Addons/Addons.tsx                   |  24 ++--
 src/pages/Addons/AddonsDetails.tsx            | 120 ++++++++++++++----
 src/pages/ElvUI/ElvUI.tsx                     |   6 +-
 src/types/index.ts                            |  48 ++++---
 13 files changed, 219 insertions(+), 163 deletions(-)

diff --git a/.gitignore b/.gitignore
index 3fc984c..0354146 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,6 +9,9 @@ lerna-debug.log*
 MaddonsManager.github.io.code-workspace
 .react-router/
 
+.env
+.env.production
+.env.development
 node_modules
 dist
 dist-ssr
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index d9b705f..c86479b 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -9,7 +9,7 @@ interface HeaderProps {
 const Header = ({ data }: HeaderProps) => {
     const { pathname } = useLocation()
 
-    const getPageLabel = () => {
+    const getPageLabel = (): string | undefined => {
         const allNavItems = [...siteConfig.navItems, ...siteConfig.navItemsAccord]
         return allNavItems.find((item) => item.href.toLowerCase() === pathname.toLowerCase())?.label
     }
diff --git a/src/components/ItemList/ItemList.tsx b/src/components/ItemList/ItemList.tsx
index dccd483..d66609e 100644
--- a/src/components/ItemList/ItemList.tsx
+++ b/src/components/ItemList/ItemList.tsx
@@ -1,4 +1,4 @@
-import { Card, CardBody, Image, Button, Tooltip, Chip, Avatar, Divider } from "@heroui/react"
+import { Card, CardBody, Image, Button, Tooltip, Chip, Avatar, Divider } from '@heroui/react'
 import { AnimatePresence } from 'framer-motion'
 import { classIcon } from '@/utils/classIcon'
 import { FlameIcon, GroupIcon } from '@/assets/Icons'
@@ -16,7 +16,7 @@ const ItemList = ({ data, onOpenDetails, handleCopyToClipboard, itemToShow }: It
         <AnimatePresence>
             {data.slice(0, itemToShow).map((item: StringItems) => (
                 <div
-                    key={`${item.uuid}-${item.title}`}
+                    key={`${item.file_name}-${item.title}`}
                     className="transition-transform duration-300 ease-in-out hover:scale-105"
                 >
                     <Card
@@ -67,7 +67,7 @@ const ItemList = ({ data, onOpenDetails, handleCopyToClipboard, itemToShow }: It
                                             item.class.map((className: string, index: number) => (
                                                 <Chip
                                                     avatar={
-                                                        className === 'ALL' ? (
+                                                        className === 'All' ? (
                                                             <GroupIcon />
                                                         ) : (
                                                             <Avatar
diff --git a/src/components/ProfilesDetails/ProfilesDetails.tsx b/src/components/ProfilesDetails/ProfilesDetails.tsx
index 649aea4..8cb3a80 100644
--- a/src/components/ProfilesDetails/ProfilesDetails.tsx
+++ b/src/components/ProfilesDetails/ProfilesDetails.tsx
@@ -9,13 +9,14 @@ import {
     Chip,
     Image,
     Avatar
-} from "@heroui/react"
+} from '@heroui/react'
 import ReactMarkdown from 'react-markdown'
 import { classIcon, roleIcon } from '@/utils/classIcon'
 import remarkGfm from 'remark-gfm'
 import rehypeRaw from 'rehype-raw'
 import hljs from 'highlight.js'
 import { useEffect } from 'react'
+import { GroupIcon } from '@/assets/Icons'
 
 interface ProfilesDetailsProps {
     data: any
@@ -67,10 +68,14 @@ const ProfilesDetails = ({ data, isOpen, onOpenChange }: ProfilesDetailsProps) =
                                         {data.class.map((className: string, index: number) => (
                                             <Chip
                                                 avatar={
-                                                    <Avatar
-                                                        name={data.title}
-                                                        src={classIcon[className]}
-                                                    />
+                                                    className === 'All' ? (
+                                                        <GroupIcon />
+                                                    ) : (
+                                                        <Avatar
+                                                            name={data.title}
+                                                            src={classIcon[className]}
+                                                        />
+                                                    )
                                                 }
                                                 key={index}
                                                 color="warning"
@@ -107,10 +112,8 @@ const ProfilesDetails = ({ data, isOpen, onOpenChange }: ProfilesDetailsProps) =
                             <Divider className="my-2" />
                             <div className="flex items-center justify-between">
                                 <p className=" text-white/60">95.1k Downloads - 141.9k views</p>
-                                <p className="text-sm text-gray-500">
-                                    Last updated: {data.lastUpdate}
-                                </p>
-                                <p className="text-sm text-gray-500">version: {data.version}</p>
+                                <p className="text-sm text-gray-500">Last updated:</p>
+                                <p className="text-sm text-gray-500">version: </p>
                             </div>
                             <Divider className="my-2" />
                             <h2 className="text-lg font-extrabold">Description</h2>
@@ -118,27 +121,11 @@ const ProfilesDetails = ({ data, isOpen, onOpenChange }: ProfilesDetailsProps) =
                                 <ReactMarkdown
                                     remarkPlugins={[remarkGfm]}
                                     rehypePlugins={[rehypeRaw]}
+                                    className="text-default-900 gap-4 w-auto p-4 mx-auto flex-col lg:flex-row rounded-md"
                                 >
                                     {data.md}
                                 </ReactMarkdown>
                             </article>
-                            <div className="flex justify-center p-4 ">
-                                <Image
-                                    shadow="md"
-                                    alt={data.title}
-                                    radius="sm"
-                                    src={data.logo}
-                                    className="max-w-[500px] max-h-[500px]"
-                                />
-                            </div>
-                            <div className="flex flex-col items-start justify-center p-4">
-                                <h2 className="text-lg font-extrabold">Changelogs</h2>
-                                {data.changelog.map((changelog: string, index: number) => (
-                                    <p key={index} className="block my-2 text-justify">
-                                        {changelog}
-                                    </p>
-                                ))}
-                            </div>
                         </DrawerBody>
                         <DrawerFooter>
                             <Button color="primary" onPress={onClose}>
diff --git a/src/components/Searcher/Searcher.tsx b/src/components/Searcher/Searcher.tsx
index e3594aa..73ddabd 100644
--- a/src/components/Searcher/Searcher.tsx
+++ b/src/components/Searcher/Searcher.tsx
@@ -1,4 +1,4 @@
-import { Autocomplete, AutocompleteItem } from "@heroui/react"
+import { Autocomplete, AutocompleteItem } from '@heroui/react'
 import { SearchIcon } from '@/assets/Icons'
 
 interface SearcherProps {
@@ -14,7 +14,7 @@ const SearchAddon = ({ searchTerm, setSearchTerm, valueName }: SearcherProps) =>
             isVirtualized
             selectedKey={searchTerm}
             onSelectionChange={(key) => setSearchTerm(key as string)}
-            defaultItems={valueName.map((name) => ({ key: name, name: name }))}
+            defaultItems={valueName.map((title) => ({ key: title, title: title }))}
             startContent={<SearchIcon className="w-4 h-4" />}
             size="md"
             className="w-full font-bold text-default-900"
@@ -46,8 +46,8 @@ const SearchAddon = ({ searchTerm, setSearchTerm, valueName }: SearcherProps) =>
             }}
         >
             {(item) => (
-                <AutocompleteItem key={item.key} textValue={item.name}>
-                    {item.name}
+                <AutocompleteItem key={item.key} textValue={item.title}>
+                    {item.title}
                 </AutocompleteItem>
             )}
         </Autocomplete>
diff --git a/src/context/AddonsContext.tsx b/src/context/AddonsContext.tsx
index d1a1a21..d6063bf 100644
--- a/src/context/AddonsContext.tsx
+++ b/src/context/AddonsContext.tsx
@@ -2,14 +2,11 @@ import { createContext, FC, ReactNode, useContext } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { AddonsDataState } from '@/types'
 
-const urls: { [key: string]: string } = {
-    LichKing: 'https://raw.githubusercontent.com/PentSec/wowAddonsAPI/main/LK/lichking.json',
-    Cataclysm: 'https://raw.githubusercontent.com/PentSec/wowAddonsAPI/main/Cata/cataclysm.json',
-    Pandaria: 'https://raw.githubusercontent.com/PentSec/wowAddonsAPI/main/Panda/pandaria.json'
-}
+const jsonUrl =
+    'https://raw.githubusercontent.com/PentSec/MaddonsManager/refs/heads/main/API/Maddons.json'
 
 interface AddonsContextValue {
-    data: AddonsDataState
+    data: AddonsDataState[]
     isPending: boolean
     error: string | null
 }
@@ -24,41 +21,41 @@ export const useAddonsContext = (): AddonsContextValue => {
     return context
 }
 
-const fetchAddons = async (key: string) => {
-    const response = await fetch(urls[key]).then((res) => res.json())
-    return response
+const fetchAddons = async (url: string) => {
+    const response = await fetch(url)
+    const jsonData = await response.json()
+    return Promise.all(
+        jsonData.map(async (item: AddonsDataState) => {
+            const mdUrl = `https://raw.githubusercontent.com/PentSec/MaddonsManager/refs/heads/main/API/Addons/${item.file_name}/post.md`
+            const logoUrl = `https://raw.githubusercontent.com/PentSec/MaddonsManager/refs/heads/main/API/Addons/${item.file_name}/${item.file_name}.webp`
+            const zipUrl = `https://github.com/PentSec/MaddonsManager/raw/refs/heads/main/API/Addons/${item.file_name}/${item.file_name}.zip`
+
+            const [md] = await Promise.all([
+                fetch(mdUrl).then((res) => {
+                    if (!res.ok) throw new Error(`Failed to fetch md for ${item.file_name}`)
+                    return res.text()
+                })
+            ])
+
+            return { ...item, md, logo: logoUrl, zip: zipUrl }
+        })
+    )
 }
 
 export const AddonsProvider: FC<{ children: ReactNode }> = ({ children }) => {
-    const lichKingQuery = useQuery({
-        queryKey: ['lichKing'],
-        queryFn: () => fetchAddons('LichKing'),
-        refetchOnWindowFocus: false
-    })
-    const cataclysmQuery = useQuery({
-        queryKey: ['cataclysm'],
-        queryFn: () => fetchAddons('Cataclysm'),
-        refetchOnWindowFocus: false
-    })
-    const pandariaQuery = useQuery({
-        queryKey: ['pandaria'],
-        queryFn: () => fetchAddons('Pandaria'),
+    const { data, isPending, error } = useQuery({
+        queryKey: ['addons'],
+        queryFn: () => fetchAddons(jsonUrl),
         refetchOnWindowFocus: false
     })
 
-    const data: AddonsDataState = {
-        LichKing: lichKingQuery.data || [],
-        Cataclysm: cataclysmQuery.data || [],
-        Pandaria: pandariaQuery.data || []
-    }
-
-    const isPending = lichKingQuery.isPending || cataclysmQuery.isPending || pandariaQuery.isPending
-
-    const error = lichKingQuery.error || cataclysmQuery.error || pandariaQuery.error
-
     return (
         <AddonsContext.Provider
-            value={{ data, isPending, error: error ? (error as Error).message : null }}
+            value={{
+                data: data || [],
+                isPending,
+                error: error ? (error as Error).message : null
+            }}
         >
             {children}
         </AddonsContext.Provider>
diff --git a/src/context/ElvUIContext.tsx b/src/context/ElvUIContext.tsx
index 00c455e..198cdf1 100644
--- a/src/context/ElvUIContext.tsx
+++ b/src/context/ElvUIContext.tsx
@@ -2,7 +2,7 @@ import { createContext, useContext, FC, ReactNode } from 'react'
 import { StringItems } from '@/types'
 import { useQuery } from '@tanstack/react-query'
 
-const jsonUrl = 'https://raw.githubusercontent.com/PentSec/wowAddonsAPI/develop/ElvUI/ElvUI.json'
+const jsonUrl = 'https://raw.githubusercontent.com/PentSec/MaddonsManager/main/API/ElvUI.json'
 
 interface ElvUIContextValue {
     data: StringItems[]
@@ -25,17 +25,17 @@ const fetchElvUIWithContent = async (url: string): Promise<StringItems[]> => {
     const jsonData = await response.json()
     return Promise.all(
         jsonData.map(async (item: StringItems) => {
-            const txtUrl = `https://raw.githubusercontent.com/PentSec/wowAddonsAPI/develop/ElvUI/${item.uuid}/${item.uuid}.txt`
-            const logoUrl = `https://raw.githubusercontent.com/PentSec/wowAddonsAPI/develop/ElvUI/${item.uuid}/${item.logo}`
-            const mdUrl = `https://raw.githubusercontent.com/PentSec/wowAddonsAPI/develop/ElvUI/${item.uuid}/${item.uuid}.md`
+            const txtUrl = `https://raw.githubusercontent.com/PentSec/MaddonsManager/main/API/ElvUI/${item.file_name}/${item.file_name}.txt`
+            const logoUrl = `https://raw.githubusercontent.com/PentSec/MaddonsManager/main/API/ElvUI/${item.file_name}/${item.file_name}.webp`
+            const mdUrl = `https://raw.githubusercontent.com/PentSec/MaddonsManager/main/API/ElvUI/${item.file_name}/post.md`
 
             const [content, md] = await Promise.all([
                 fetch(txtUrl).then((res) => {
-                    if (!res.ok) throw new Error(`Failed to fetch txt for ${item.uuid}`)
+                    if (!res.ok) throw new Error(`Failed to fetch txt for ${item.file_name}`)
                     return res.text()
                 }),
                 fetch(mdUrl).then((res) => {
-                    if (!res.ok) throw new Error(`Failed to fetch md for ${item.uuid}`)
+                    if (!res.ok) throw new Error(`Failed to fetch md for ${item.file_name}`)
                     return res.text()
                 })
             ])
diff --git a/src/context/WeakAurasContext.tsx b/src/context/WeakAurasContext.tsx
index 696e574..4f742af 100644
--- a/src/context/WeakAurasContext.tsx
+++ b/src/context/WeakAurasContext.tsx
@@ -2,8 +2,7 @@ import { createContext, FC, ReactNode, useContext } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { StringItems } from '@/types'
 
-const jsonUrl =
-    'https://raw.githubusercontent.com/PentSec/wowAddonsAPI/develop/WeakAuras/WeakAuras.json'
+const jsonUrl = 'https://raw.githubusercontent.com/PentSec/MaddonsManager/main/API/WeakAuras.json'
 
 interface WeakAurasContextValue {
     data: StringItems[]
@@ -26,9 +25,9 @@ const fetchWeakAurasWithContent = async (url: string): Promise<StringItems[]> =>
     const jsonData = await response.json()
     return Promise.all(
         jsonData.map(async (item: any) => {
-            const txtUrl = `https://raw.githubusercontent.com/PentSec/wowAddonsAPI/develop/WeakAuras/${item.uuid}/${item.uuid}.txt`
-            const logoUrl = `https://raw.githubusercontent.com/PentSec/wowAddonsAPI/develop/WeakAuras/${item.uuid}/${item.logo}`
-            const mdUrl = `https://raw.githubusercontent.com/PentSec/wowAddonsAPI/develop/WeakAuras/${item.uuid}/${item.uuid}.md`
+            const txtUrl = `https://raw.githubusercontent.com/PentSec/MaddonsManager/main/API/WeakAuras/${item.file_name}/${item.file_name}.txt`
+            const logoUrl = `https://raw.githubusercontent.com/PentSec/MaddonsManager/main/API/WeakAuras/${item.file_name}/${item.file_name}.webp`
+            const mdUrl = `https://raw.githubusercontent.com/PentSec/MaddonsManager/main/API/WeakAuras/${item.file_name}/post.md`
 
             const [content, md] = await Promise.all([
                 fetch(txtUrl).then((res) => (res.ok ? res.text() : null)),
diff --git a/src/hook/useFilterAddons.ts b/src/hook/useFilterAddons.ts
index c1073ac..8da32ce 100644
--- a/src/hook/useFilterAddons.ts
+++ b/src/hook/useFilterAddons.ts
@@ -1,44 +1,35 @@
 import { useState, useMemo } from 'react'
 import { AddonsData, AddonsDataState } from '@/types'
 
-const useFilterAddons = (data: AddonsDataState | null, onOpen: (isOpen: boolean) => void) => {
+const useFilterAddons = (data: AddonsDataState[], onOpen: () => void) => {
     const [searchTerm, setSearchTerm] = useState<string | null>(null)
     const [version, setVersion] = useState<string | null>(null)
     const [selectedType, setSelectedType] = useState<string | null>(null)
     const [isSelectAddon, setIsSelectAddon] = useState<AddonsData | null>(null)
 
     const combinedData = useMemo(() => {
-        if (!data) return []
-        const allData = [...data.LichKing, ...data.Cataclysm, ...data.Pandaria]
-        return version === null ? allData : data[version] || []
-    }, [data, version])
+        if (!data || data.length === 0) return []
+        return Array.from(new Set(data.flatMap((item) => item.expansion)))
+    }, [data])
 
     const addonTypes = useMemo(() => {
-        return combinedData && combinedData.length > 0
-            ? Array.from(new Set(combinedData.map((addon) => addon.addonType)))
-            : []
-    }, [combinedData])
+        return Array.from(new Set(data.flatMap((item) => item.tags)))
+    }, [data])
 
     const filteredData = useMemo(() => {
-        return (
-            combinedData?.filter((addon) => {
-                const matchesSearch = searchTerm
-                    ? addon.name.toLowerCase().includes(searchTerm.toLowerCase())
-                    : true
-                const matchesType = selectedType ? addon.addonType === selectedType : true
-                return matchesSearch && matchesType
-            }) || []
-        )
-    }, [combinedData, searchTerm, selectedType])
-
-    const handleDownload = async (githubRepo: string) => {
-        const mainUrl = `${githubRepo}/archive/refs/heads/main.zip`
-        window.open(mainUrl)
-    }
+        return data.filter((item) => {
+            const matchesSearch = searchTerm
+                ? item.title.toLowerCase().includes(searchTerm.toLowerCase())
+                : true
+            const matchesType = selectedType ? item.tags.includes(selectedType) : true
+            const matchesExpansion = version ? item.expansion.includes(version) : true
+            return matchesSearch && matchesType && matchesExpansion
+        })
+    }, [data, searchTerm, selectedType, version])
 
     const handleOpenDetails = (addon: AddonsData) => {
         setIsSelectAddon(addon)
-        onOpen(true)
+        onOpen()
     }
 
     return {
@@ -51,7 +42,6 @@ const useFilterAddons = (data: AddonsDataState | null, onOpen: (isOpen: boolean)
         addonTypes,
         filteredData,
         combinedData,
-        handleDownload,
         handleOpenDetails,
         isSelectAddon
     }
diff --git a/src/pages/Addons/Addons.tsx b/src/pages/Addons/Addons.tsx
index a06e6b3..6e0724a 100644
--- a/src/pages/Addons/Addons.tsx
+++ b/src/pages/Addons/Addons.tsx
@@ -10,8 +10,8 @@ import {
     useDisclosure,
     Divider,
     Snippet
-} from "@heroui/react"
-import { ScrollShadow } from "@heroui/scroll-shadow"
+} from '@heroui/react'
+import { ScrollShadow } from '@heroui/scroll-shadow'
 import { AnimatePresence } from 'framer-motion'
 import { DownloadIcon } from '@/assets/Icons'
 import { Searcher, SelectType, SelectVersion, Header } from '@/components'
@@ -32,15 +32,15 @@ const Addon = () => {
         filteredData,
         combinedData,
         addonTypes,
-        handleDownload,
         handleOpenDetails,
         isSelectAddon
     } = useFilterAddons(data, onOpenChange)
     const { itemToShow, loadRef, scrollerRef, hasMore } = useInfiniteScrollLogic(filteredData)
+    console.log(combinedData)
 
     return (
         <div className="">
-            <Header data={combinedData} />
+            <Header data={data} />
             {isSelectAddon && (
                 <AddonsDetails addon={isSelectAddon} isOpen={isOpen} onOpenChange={onOpenChange} />
             )}
@@ -48,7 +48,7 @@ const Addon = () => {
                 <Searcher
                     searchTerm={searchTerm}
                     setSearchTerm={setSearchTerm}
-                    valueName={combinedData ? combinedData.map((addon) => addon.name) : []}
+                    valueName={data.map((item) => item.title)}
                 />
                 <Divider orientation="vertical" className="h-auto" />
                 <SelectVersion
@@ -85,7 +85,7 @@ const Addon = () => {
                             <AnimatePresence>
                                 {filteredData.slice(0, itemToShow).map((addon) => (
                                     <div
-                                        key={`${addon.name}-${addon.githubRepo}`}
+                                        key={`${addon.title}-${addon.file_name}`}
                                         className="transition-transform duration-300 ease-in-out hover:scale-105"
                                     >
                                         <Card
@@ -98,19 +98,19 @@ const Addon = () => {
                                             <CardBody className="p-0 overflow-visible">
                                                 <Image
                                                     removeWrapper
-                                                    alt={addon.name}
+                                                    alt={addon.title}
                                                     radius="sm"
-                                                    src={addon.imageUrl}
+                                                    src={addon.logo}
                                                     className="object-contain w-full h-full"
                                                 />
                                             </CardBody>
                                             <CardFooter className="absolute bottom-0 z-10 flex items-center justify-between bg-black/70 border-t-1 border-default-600 dark:border-default-100">
                                                 <div className="flex flex-col items-start flex-grow gap-1">
                                                     <p className="font-bold md:text-sm xl:text-md">
-                                                        {addon.name}
+                                                        {addon.title}
                                                     </p>
                                                     <p className="text-tiny text-white/60">
-                                                        {addon.addonType}
+                                                        {addon.expansion.join(', ')}
                                                     </p>
                                                 </div>
                                                 <div className="flex items-end justify-end flex-grow gap-2">
@@ -121,9 +121,7 @@ const Addon = () => {
                                                             radius="full"
                                                             size="sm"
                                                             variant="shadow"
-                                                            onPress={() =>
-                                                                handleDownload(addon.githubRepo)
-                                                            }
+                                                            onPress={() => window.open(addon.zip)}
                                                         >
                                                             <DownloadIcon
                                                                 size={20}
diff --git a/src/pages/Addons/AddonsDetails.tsx b/src/pages/Addons/AddonsDetails.tsx
index 670ce8a..c9457ab 100644
--- a/src/pages/Addons/AddonsDetails.tsx
+++ b/src/pages/Addons/AddonsDetails.tsx
@@ -8,8 +8,16 @@ import {
     Divider,
     Chip,
     Link,
-    Image
-} from "@heroui/react"
+    Image,
+    Avatar
+} from '@heroui/react'
+import ReactMarkdown from 'react-markdown'
+import { classIcon, roleIcon } from '@/utils/classIcon'
+import remarkGfm from 'remark-gfm'
+import rehypeRaw from 'rehype-raw'
+import hljs from 'highlight.js'
+import { useEffect } from 'react'
+import { GroupIcon } from '@/assets/Icons'
 interface AddonsDetailsProps {
     addon: any
     isOpen: boolean
@@ -17,52 +25,112 @@ interface AddonsDetailsProps {
 }
 
 const AddonsDetails = ({ addon, isOpen, onOpenChange }: AddonsDetailsProps) => {
+    useEffect(() => {
+        document.querySelectorAll('pre code').forEach((block) => {
+            hljs.highlightElement(block as HTMLElement)
+        })
+    }, [addon])
     return (
-        <Drawer isOpen={isOpen} onOpenChange={onOpenChange} size="4xl">
+        <Drawer isOpen={isOpen} onOpenChange={onOpenChange} size="5xl">
             <DrawerContent>
                 {(onClose) => (
                     <>
-                        <DrawerHeader className="flex flex-col gap-1">{addon.name}</DrawerHeader>
+                        <DrawerHeader className="flex flex-col gap-1">{addon.title}</DrawerHeader>
                         <DrawerBody>
                             <div className="flex gap-3">
                                 <Image
-                                    alt={addon.author}
+                                    alt={addon.pr_author}
                                     height={60}
                                     radius="sm"
-                                    src="/logo.svg"
+                                    src={addon.avatar_pr_author}
                                     width={60}
                                 />
                                 <div className="flex flex-col">
-                                    <p className="text-tiny text-white/90 ">
-                                        author: {addon.author}
-                                    </p>
-                                    <Chip color="warning" variant="dot" size="sm" className="my-2">
-                                        {addon.addonType}
-                                    </Chip>
+                                    <h3 className="text-tiny text-default-900 ">
+                                        pr author: {addon.pr_author}
+                                    </h3>
+                                    <h3 className="text-tiny text-default-900 ">
+                                        Addon author: {addon.author}
+                                    </h3>
+                                    <div className="flex items-center">
+                                        <p className="font-bold text-xs">Tags:</p>
+                                        {addon.tags.map((tag: string, index: number) => (
+                                            <Chip
+                                                key={index}
+                                                color="warning"
+                                                variant="dot"
+                                                size="sm"
+                                                className="my-1"
+                                            >
+                                                {tag}
+                                            </Chip>
+                                        ))}
+                                    </div>
+                                    <div className="flex flex-wrap items-center">
+                                        <p className="font-bold text-xs">Class:</p>
+                                        {addon.class.map((className: string, index: number) => (
+                                            <Chip
+                                                avatar={
+                                                    className === 'All' ? (
+                                                        <GroupIcon />
+                                                    ) : (
+                                                        <Avatar
+                                                            name={addon.title}
+                                                            src={classIcon[className]}
+                                                        />
+                                                    )
+                                                }
+                                                key={index}
+                                                color="warning"
+                                                variant="dot"
+                                                size="sm"
+                                                className="my-1"
+                                            >
+                                                {className}
+                                            </Chip>
+                                        ))}
+                                    </div>
+                                    <div className="flex items-center">
+                                        <p className="font-bold text-xs">Roles:</p>
+                                        {addon.roles.map((role: string, index: number) => (
+                                            <Chip
+                                                avatar={
+                                                    <Avatar
+                                                        name={addon.title}
+                                                        src={roleIcon[role]}
+                                                    />
+                                                }
+                                                key={index}
+                                                color="warning"
+                                                variant="dot"
+                                                size="sm"
+                                                className="my-1"
+                                            >
+                                                {role}
+                                            </Chip>
+                                        ))}
+                                    </div>
                                 </div>
                             </div>
                             <Divider className="my-2" />
                             <div className="flex items-center justify-between">
                                 <p className=" text-white/60">95.1k Downloads - 141.9k views</p>
-                                <p className="text-sm text-gray-500">
-                                    Last updated: {addon.lastCommitDate}
-                                </p>
+                                <p className="text-sm text-gray-500">Last updated:</p>
                             </div>
                             <Divider className="my-2" />
                             <h1 className="text-lg font-extrabold">Description</h1>
-                            <p className="block my-2 text-justify">{addon.description}</p>
-                            <div className="flex justify-center p-4 bg-gray-900">
-                                <Image
-                                    shadow="md"
-                                    alt={addon.name}
-                                    radius="sm"
-                                    src={addon.imageUrl}
-                                    className="max-w-[500px] max-h-[500px]"
-                                />
-                            </div>
+                            <article className="markdown-body  p-1 !bg-transparent">
+                                <ReactMarkdown
+                                    remarkPlugins={[remarkGfm]}
+                                    rehypePlugins={[rehypeRaw]}
+                                    className="text-default-900 gap-4 w-auto p-4 mx-auto flex-col lg:flex-row rounded-md"
+                                >
+                                    {addon.md}
+                                </ReactMarkdown>
+                            </article>
                         </DrawerBody>
                         <DrawerFooter>
-                            <Link size="sm" isExternal showAnchorIcon href={addon.githubRepo}>
+                            <Link size="sm" isExternal showAnchorIcon href="">
                                 GitHub Link
                             </Link>
                             <Button color="primary" onPress={onClose}>
diff --git a/src/pages/ElvUI/ElvUI.tsx b/src/pages/ElvUI/ElvUI.tsx
index 7181345..8e8aed8 100644
--- a/src/pages/ElvUI/ElvUI.tsx
+++ b/src/pages/ElvUI/ElvUI.tsx
@@ -9,8 +9,8 @@ import {
     Header
 } from '@/components'
 
-import { Divider, Snippet, Spinner, useDisclosure } from "@heroui/react"
-import { ScrollShadow } from "@heroui/scroll-shadow"
+import { Divider, Snippet, Spinner, useDisclosure } from '@heroui/react'
+import { ScrollShadow } from '@heroui/scroll-shadow'
 import useInfiniteScrollLogic from '@/hook/useInfiniteScrollLogic'
 
 const ElvUI = () => {
@@ -32,6 +32,8 @@ const ElvUI = () => {
     } = useFilteredData(data, onOpen)
     const { itemToShow, loadRef, scrollerRef, hasMore } = useInfiniteScrollLogic(filteredData)
 
+    console.log(data)
+
     return (
         <div className="layer">
             <Header data={data} />
diff --git a/src/types/index.ts b/src/types/index.ts
index 7102b8c..b2ffae5 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -14,20 +14,33 @@ export type ReleaseNotesTypes = {
 }
 
 export type AddonsData = {
-    name: string
-    folders: string[]
-    githubRepo: string
-    imageUrl: string
-    addonType: string
+    title: string
+    file_name: string
+    expansion: string[]
+    tags: string[]
     description: string
     author: string
-    lastCommitData: string
-    Hot: any | null
-    [key: string]: any
+    pr_author: string
+    avatar_pr_author: string
+    roles: string[]
+    class: string[]
 }
 
 export type AddonsDataState = {
-    [key: string]: AddonsData[]
+    item: string
+    md: string
+    logo: string
+    zip: string
+    title: string
+    file_name: string
+    description: string
+    author: string
+    pr_author: string
+    avatar_pr_author: string
+    expansion: string[]
+    tags: string[]
+    roles: string[]
+    class: string[]
 }
 
 export type Post = {
@@ -48,20 +61,19 @@ export type Post = {
 }
 
 export type StringItems = {
-    uuid: string
+    item: string
+    md: string
     logo: string
-    content: string | null
-    md: string | null
+    zip: string
     title: string
+    file_name: string
     description: string
     author: string
+    pr_author: string
+    avatar_pr_author: string
     expansion: string[]
-    changelog: string[]
     tags: string[]
-    class: string[]
     roles: string[]
-    preview: string | null
-    preview2: string | null
-    preview3: string | null
-    item: string
+    class: string[]
+    content: string
 }