dair-ai_Prompt-Engineering-Guide

1
// components/ContentFileNames.tsx
2
import React, { useEffect, useState } from 'react';
3
import { Cards, Card } from 'nextra-theme-docs';
4
import { FilesIcon } from './icons';
5

6
const ContentFileNames = ({ section = 'research', lang = 'en' }) => {
7
  const [fileNames, setFileNames] = useState([]);
8

9
  useEffect(() => {
10
    fetch(`/api/contentFiles?section=${section}&lang=${lang}`)
11
      .then(response => response.json())
12
      .then(data => setFileNames(data.fileNames));
13
  }, [section, lang]);
14

15
  return (
16
    <Cards>
17
      {fileNames.map(({ slug, title }, index) => (
18
        <Card
19
          key={index}
20
          icon={<FilesIcon />}
21
          title={title}
22
          href={`/${section}/${slug}`}
23
        >
24
          {/* Add your desired content here, or an empty fragment if no content is needed */}
25
          <></>
26
        </Card>
27
      ))}
28
    </Cards>
29
  );
30
};
31

32
export default ContentFileNames;
33