vafront/src/Pages/TranscribePage.jsx

import React from "react";
import { useAtom } from "jotai";
import { TranscribeAtom } from "../Variables";

function TranscribePage() {
    const [transcribe, setTranscribe] = useAtom(TranscribeAtom);
    return (
        <div className="p-5 pl-10 flex flex-col h-full">

            <p className="text-xl font-semibold text-primary-950 mb-5">Transcript of speech</p>

            <div className="h-full overflow-y-scroll noScrollBars">

                {transcribe.map((item, index) => {

                    if (item?.isCommand) {

                        return (

                            <p key={index} className="bg-primary-100 rounded-lg p-2 my-1">

                                {`>>`} {item?.msg}

                            </p>

                        );

                    } else {

                        return (

                            <p key={index} className="">

                                {item?.msg}

                            </p>

                        );

                    }

                })}

            </div>

        </div>
    );
}

export default TranscribePage;