selfhostyourtech/reflector
2
0
Fork 0
mirror of https://github.com/Monadical-SAS/reflector.git synced 2025-12-21 04:39:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Prettifying topics

Browse Source
This commit is contained in:
Koper
2023-07-21 18:35:19 +07:00
parent c889de58be
commit 9a1a49241d
4 changed files with 136 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
app/components/dashboard.js
View File

@@ -1,5 +1,7 @@
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,
@@ -12,6 +14,8 @@ export function Dashboard({
const [openIndex, setOpenIndex] = useState(null);
const [liveTranscript, setLiveTranscript] = useState("");
topics = [{timestamp: '[00:00]', transcript: 'Abcdef', title: 'This is the title'}];
return (
<>
<div className="w-3/4 py-4">
@@ -27,35 +31,33 @@ export function Dashboard({
{topics.map((item, index) => (
<div key={index} className="border-b-2 py-2">
<div
className="flex justify-between cursor-pointer"
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">
{item.title}{" "}
<span
className={`inline-block transform transition-transform duration-200 ${
openIndex === index ? "rotate-90" : ""
}`}
>
{">"}
</span>
<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">{item.transcript}</div>
<div className="mt-2 p-2 bg-white rounded">{item.transcript}</div>
)}
</div>
))}
<div className="border-b-2 py-2">
<div className="flex justify-between">
<div className="w-1/4">Live</div>
<div className="w-1/4">Transcript</div>
<div className="w-1/4 flex flex-row space-x-0.5"></div>
</div>
<div className="mt-2 p-2 bg-white temp-transcription">
<div className="mt-2 p-2 bg-white temp-transcription rounded">
{transcriptionText}
</div>
</div>