Add react questions

src/components/CommandMenu/CommandMenu.tsx

@@ -2,6 +2,7 @@ import { Fragment, useEffect, useRef, useState } from 'react';
 import { useKeydown } from '../../hooks/use-keydown';
 import { useOutsideClick } from '../../hooks/use-outside-click';
 import BestPracticesIcon from '../../icons/best-practices.svg';
+import ClipboardIcon from '../../icons/clipboard.svg';
 import GuideIcon from '../../icons/guide.svg';
 import HomeIcon from '../../icons/home.svg';
 import RoadmapIcon from '../../icons/roadmap.svg';
@@ -53,6 +54,13 @@ const defaultPages: PageType[] = [
     group: 'Pages',
     icon: BestPracticesIcon.src,
   },
+  {
+    id: 'questions',
+    url: '/questions',
+    title: 'Questions',
+    group: 'Pages',
+    icon: ClipboardIcon.src,
+  },
   {
     id: 'guides',
     url: '/guides',

src/components/Navigation/Navigation.astro

@@ -24,10 +24,10 @@ import AccountDropdown from './AccountDropdown.astro';
         >
       </li>
       <li class='hidden lg:inline'>
-        <a href='/guides' class='text-gray-400 hover:text-white'>Guides</a>
+        <a href='/questions' class='text-gray-400 hover:text-white'>Questions</a>
       </li>
       <li class='hidden lg:inline'>
-        <a href='/videos' class='text-gray-400 hover:text-white'>Videos</a>
+        <a href='/guides' class='text-gray-400 hover:text-white'>Guides</a>
       </li>
       <li>
         <kbd

src/icons/clipboard.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+     stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clipboard-list">
+    <rect width="8" height="4" x="8" y="2" rx="1" ry="1"/>
+    <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/>
+    <path d="M12 11h4"/>
+    <path d="M12 16h4"/>
+    <path d="M8 11h.01"/>
+    <path d="M8 16h.01"/>
+</svg>

src/pages/index.astro

@@ -60,15 +60,15 @@ const videos = await getAllVideos();
       }))}
     />
 
-    <!--<FeaturedItems-->
+    <FeaturedItems
-    <!--  heading='Questions'-->
+      heading='Questions'
-    <!--  allowBookmark={false}-->
+      allowBookmark={false}
-    <!--  featuredItems={questionGroups.map((questionGroup) => ({-->
+      featuredItems={questionGroups.map((questionGroup) => ({
-    <!--    text: questionGroup.frontmatter.briefTitle,-->
+        text: questionGroup.frontmatter.briefTitle,
-    <!--    url: `/questions/${questionGroup.id}`,-->
+        url: `/questions/${questionGroup.id}`,
-    <!--    isNew: questionGroup.frontmatter.isNew,-->
+        isNew: questionGroup.frontmatter.isNew,
-    <!--  }))}-->
+      }))}
-    <!--/>-->
+    />
 
     <div class='grid grid-cols-1 gap-7 bg-gray-50 py-7 sm:gap-16 sm:py-16'>
       <FeaturedGuides heading='Guides' guides={guides.slice(0, 7)} />

src/pages/pages.json.ts

@@ -2,10 +2,12 @@ import { getAllBestPractices } from '../lib/best-pratice';
 import { getAllGuides } from '../lib/guide';
 import { getRoadmapsByTag } from '../lib/roadmap';
 import { getAllVideos } from '../lib/video';
+import {getAllQuestionGroups} from "../lib/question-group";
 
 export async function GET() {
   const guides = await getAllGuides();
   const videos = await getAllVideos();
+  const questionGroups = await getAllQuestionGroups();
   const roadmaps = await getRoadmapsByTag('roadmap');
   const bestPractices = await getAllBestPractices();
 
@@ -26,6 +28,12 @@ export async function GET() {
         title: bestPractice.frontmatter.briefTitle,
         group: 'Best Practices',
       })),
+      ...questionGroups.map((questionGroup) => ({
+        id: questionGroup.id,
+        url: `/questions/${questionGroup.id}`,
+        title: questionGroup.frontmatter.briefTitle,
+        group: 'Questions',
+      })),
       ...guides.map((guide) => ({
         id: guide.id,
         url: `/guides/${guide.id}`,