feat: fetch and display template menu items

components/menu.tsx

@@ -6,10 +6,17 @@ import {
 } from "@/components/ui/menubar";
 import { ModeToggle } from "./mode-toggle";
 import Modal from "./modal";
+import { TemplatesMenu } from "./templates-menu";
 
 export function MenubarComponent() {
   return (
     <Menubar>
+      <MenubarMenu>
+        <MenubarTrigger>New</MenubarTrigger>
+        <MenubarContent>
+          <TemplatesMenu />
+        </MenubarContent>
+      </MenubarMenu>
       <MenubarMenu>
         <MenubarTrigger>Theme</MenubarTrigger>
         <MenubarContent>

components/templates-menu.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+
+import { MenubarRadioGroup, MenubarRadioItem } from "@/components/ui/menubar";
+
+async function getData() {
+  let url = `https://playground-next.test.aelf.dev/playground/templates`;
+  if (process.env.NODE_ENV === "production") {
+    url = `/playground/templates`;
+  }
+
+  const res = await fetch(url);
+  const data = await res.json();
+
+  return data as string[];
+}
+
+export async function TemplatesMenu() {
+  const data = await getData();
+
+  return (
+    <MenubarRadioGroup>
+      {data.map((i) => (
+        <MenubarRadioItem key={i} value={i}>
+          {i}
+        </MenubarRadioItem>
+      ))}
+    </MenubarRadioGroup>
+  );
+}