feat: add live data to TagListSidebar

src/api/eolas-api.ts

@@ -1,8 +1,8 @@
 import axios from "axios"
 
 const api = axios.create({
-	baseURL: process.env.VITE_EOLAS_API_ENDPOINT,
-	timeout: 10000,
+   baseURL: import.meta.env.VITE_EOLAS_API_ENDPOINT,
+   timeout: 10000,
 })
 
 export default api

src/components/TagListSidebar.tsx

@@ -4,8 +4,17 @@ import { SidebarMenuButton, SidebarMenuItem, SidebarMenuSub } from "@/components
 import { Collapsible, CollapsibleTrigger } from "@radix-ui/react-collapsible"
 import { CollapsibleContent } from "../components/ui/collapsible"
 import { mockTags } from "@/mock-data/mock-tags"
+import { useQuery } from "@tanstack/react-query"
+import api from "../api/eolas-api"
 
 export default function TagListSidebar() {
+	const { data: tags, isLoading } = useQuery({
+		queryKey: ["tag_list"],
+		queryFn: () => api.get("/tags").then((res) => res.data),
+	})
+
+	console.log(tags)
+
 	return (
 		<Collapsible className="group/collapsible">
 			<SidebarMenuItem key="tags">
@@ -20,10 +29,10 @@ export default function TagListSidebar() {
 				</CollapsibleTrigger>
 				<CollapsibleContent>
 					<SidebarMenuSub>
-						{mockTags.map((item) => (
+						{tags?.tags.map((item) => (
 							<SidebarMenuItem>
-								<a href={item.url}>
-									<span className="text-xs">{item.title}</span>
+								<a>
+									<span className="text-xs">{item}</span>
 								</a>
 							</SidebarMenuItem>
 						))}