mq-serve 0.1.16

Browser-based Markdown viewer with mq query support
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

import { useState } from 'react'
import { ChevronDown, ChevronRight } from 'lucide-react'

interface Props {
  data: Record<string, unknown>
}

export default function Frontmatter({ data }: Props) {
  const [collapsed, setCollapsed] = useState(false)

  const entries = Object.entries(data)
  if (entries.length === 0) return null

  return (
    <div className="frontmatter">
      <button
        className="frontmatter-toggle"
        onClick={() => setCollapsed((v) => !v)}
      >
        {collapsed ? <ChevronRight size={12} /> : <ChevronDown size={12} />}
        Frontmatter
      </button>
      {!collapsed && (
        <table className="frontmatter-table">
          <tbody>
            {entries.map(([k, v]) => (
              <tr key={k}>
                <th>{k}</th>
                <td>{String(v)}</td>
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </div>
  )
}