reflector/www/app/components/dashboard.js

import { Mulberry32 } from "../utils.js";
import React, { useState, useEffect } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faChevronRight,
  faChevronDown,
} from "@fortawesome/free-solid-svg-icons";

export function Dashboard({
  isRecording,
  onRecord,
  transcriptionText,
  finalSummary,
  topics,
  stream,
}) {
  const [openIndex, setOpenIndex] = useState(null);

  return (
    <>
      <div className="flex-grow w-3/4 py-4">
        <div className="text-center py-6">
          <h1 className="text-2xl font-bold text-blue-500">Meeting Notes</h1>
        </div>
        <div className="flex justify-between border-b-2">
          <div className="w-1/4">Timestamp</div>
          <div className="w-1/4">Topic</div>
          <div className="w-1/4"></div>
        </div>

        {topics.map((item, index) => (
          <div key={index} className="border-b-2 py-2">
            <div
              className="flex justify-between items-center cursor-pointer"
              onClick={() => setOpenIndex(openIndex === index ? null : index)}
            >
              <div className="w-1/4">{item.timestamp}</div>
              <div className="w-1/4 flex justify-between items-center">
                {item.title}
                <FontAwesomeIcon
                  className={`transform transition-transform duration-200`}
                  icon={openIndex === index ? faChevronDown : faChevronRight}
                />
              </div>
              <div className="w-1/4 flex flex-row space-x-0.5"></div>
            </div>
            {openIndex === index && (
              <div className="mt-2 p-2 bg-white rounded">{item.transcript}</div>
            )}
          </div>
        ))}

        {finalSummary && (
          <div className="mt-2 p-2 bg-white temp-transcription rounded">
            <h2>Final Summary</h2>
            <p>Duration: {finalSummary.duration}</p>
            <p>{finalSummary.summary}</p>
          </div>
        )}
      </div>

      <footer className="w-full bg-gray-800 text-white text-center py-4 text-2xl mt-8 h-32">
        &nbsp;{transcriptionText}&nbsp;
      </footer>
    </>
  );
}