feat: add Entry page template and set up /entries/:entry routing

src/App.tsx

@@ -4,6 +4,7 @@ import { ReactQueryDevtools } from "@tanstack/react-query-devtools"
 import Home from "@/pages/home"
 import "./App.css"
 import Tag from "./templates/Tag"
+import Entry from "./templates/Entry"
 
 const queryClient = new QueryClient({
    defaultOptions: {
@@ -21,6 +22,7 @@ export default function App() {
          <QueryClientProvider client={queryClient}>
             <Routes>
                <Route index element={<Home />} />
+               <Route path="/entries/:entry" element={<Entry />} />
                <Route path="/tags/:tag" element={<Tag />} />
             </Routes>
             <ReactQueryDevtools initialIsOpen={false} />

src/components/EntriesListSidebar.tsx

@@ -5,6 +5,7 @@ import { CollapsibleContent } from "../components/ui/collapsible"
 import { Badge } from "./ui/badge"
 import { useQuery } from "@tanstack/react-query"
 import api from "../api/eolas-api"
+import { Link } from "react-router"
 
 export default function EntriesListSidebar() {
    const { data: entries, isLoading } = useQuery({
@@ -12,6 +13,7 @@ export default function EntriesListSidebar() {
       queryFn: () => api.get("/entries").then((res) => res.data),
    })
 
+   console.log(entries)
    return (
       <Collapsible className="group/collapsible">
          <SidebarMenuItem key="entries">
@@ -31,10 +33,12 @@ export default function EntriesListSidebar() {
                <div className="max-h-100 overflow-y-auto">
                   <SidebarMenuSub>
                      {entries?.data.map((item, i) => (
-                        <SidebarMenuItem key={i}>
-                           <a>
-                              <span className="text-xs">{item.title.replace(/_/g, " ")}</span>
-                           </a>
+                        <SidebarMenuItem key={i} asChild>
+                           <Link to={`/entries/${item.title}`}>
+                              <span className="text-xs text-black hover:text-gray-600 active:text-gray-700 focus:text-gray-900">
+                                 {item.title.replace(/_/g, " ")}
+                              </span>
+                           </Link>
                         </SidebarMenuItem>
                      ))}
                   </SidebarMenuSub>

src/templates/Entry.tsx

@@ -0,0 +1,25 @@
+import Main from "@/templates/Main"
+import { useParams } from "react-router"
+
+export default function Entry() {
+	const { entry } = useParams()
+	return (
+		<Main>
+			<div className="flex-1 flex flex-col overflow-auto">
+				<div className="@container/main flex flex-col">
+					<div className="p-4 lg:p-6 flex flex-1">
+						<div className="border w-full">
+							<div className="border-b py-2 px-4 lg:px-6 bg-sidebar">
+								<h2 className="scroll-m-20 font-semibold">
+									<span>{entry?.replace(/_/g, " ")}</span>
+								</h2>
+							</div>
+
+							<div className="p-4 lg:p-6"></div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</Main>
+	)
+}