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

styling

Browse Source
This commit is contained in:
Jose B
2023-08-02 16:54:06 -05:00
parent 7f92756735
commit c0419f19ca
2 changed files with 27 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
www/app/components/dashboard.js
View File

@@ -15,7 +15,7 @@ export function Dashboard({
return ( return (
<> <>
<div className="flex-grow w-3/4 py-4"> <div className="h-[60svh] w-3/4 flex flex-col">
<div className="text-center py-6"> <div className="text-center py-6">
<h1 className="text-2xl font-bold text-blue-500">Meeting Notes</h1> <h1 className="text-2xl font-bold text-blue-500">Meeting Notes</h1>
</div> </div>
@@ -25,28 +25,32 @@ export function Dashboard({
<div className="w-1/4"></div> <div className="w-1/4"></div>
</div> </div>
{topics.map((item, index) => ( <div className="py-2 overflow-y-auto">
<div key={index} className="border-b-2 py-2"> {topics.map((item, index) => (
<div <div key={index} className="border-b-2 py-2">
className="flex justify-between items-center cursor-pointer" <div
onClick={() => setOpenIndex(openIndex === index ? null : index)} 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"> <div className="w-1/4">{item.timestamp}</div>
{item.title} <div className="w-1/4 flex justify-between items-center">
<FontAwesomeIcon {item.title}
className={`transform transition-transform duration-200`} <FontAwesomeIcon
icon={openIndex === index ? faChevronDown : faChevronRight} 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> </div>
<div className="w-1/4 flex flex-row space-x-0.5"></div> {openIndex === index && (
<div className="mt-2 p-2 bg-white rounded">{item.transcript}</div>
)}
</div> </div>
{openIndex === index && ( ))}
<div className="mt-2 p-2 bg-white rounded">{item.transcript}</div> {topics.length === 0 && (
)} <div className="text-center text-gray-500">No topics yet</div>
</div> )}
))} </div>
{finalSummary && ( {finalSummary && (
<div className="mt-2 p-2 bg-white temp-transcription rounded"> <div className="mt-2 p-2 bg-white temp-transcription rounded">
@@ -57,7 +61,7 @@ export function Dashboard({
)} )}
</div> </div>
<footer className="w-full bg-gray-800 text-white text-center py-4 text-2xl mt-8 h-32"> <footer className="h-[7svh] w-full bg-gray-800 text-white text-center py-4 text-2xl mt-8 h-32">
&nbsp;{transcriptionText}&nbsp; &nbsp;{transcriptionText}&nbsp;
</footer> </footer>
</> </>

2
www/app/page.js
View File

@@ -16,7 +16,7 @@ const App = () => {
return ( return (
<div className="flex flex-col items-center h-[100svh]"> <div className="flex flex-col items-center h-[100svh]">
<div className="text-center py-6 mt-10"> <div className="h-[13svh] flex flex-col justify-center items-center">
<h1 className="text-5xl font-bold text-blue-500">Reflector</h1> <h1 className="text-5xl font-bold text-blue-500">Reflector</h1>
<p className="text-gray-500">Capture The Signal, Not The Noise</p> <p className="text-gray-500">Capture The Signal, Not The Noise</p>
</div> </div>