Merged reflector-ui (now "www") into single repo

www/app/components/dashboard.js

@@ -0,0 +1,65 @@
+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">
+        {transcriptionText}
+      </footer>
+    </>
+  );
+}