Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 | 1x 1x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 1x | import {HelpCircle, Languages, Mail, Mic, Volume2} from "lucide-react";
import {useDialog} from "../hooks/use-dialog.ts";
function Help() {
const {dialogRef, openDialog} = useDialog();
return (
<>
<button
className="btn btn-ghost btn-circle"
aria-label="Help button"
onClick={openDialog}
>
<HelpCircle className="w-5 h-5 text-blue-500"/>
</button>
<dialog ref={dialogRef} className="modal">
<div className="modal-box max-w-xl max-h-150 p-5">
<form method="dialog">
<button className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">
✕
</button>
</form>
<div className="flex w-full flex-col">
<h3 className="font-bold text-2xl">
Help
</h3>
<h5 className="text-lg">
This is where you can find all information regarding this
application.
</h5>
<div className="divider"/>
<ul className="list bg-base-100 rounded-box shadow-md">
<li className="p-4 pb-2 text-xs opacity-60 tracking-wide">
Our features:
</li>
<li className="list-row">
<div className="text-4xl font-thin opacity-30 tabular-nums">
01
</div>
<div>
<Mic className="size-10 rounded-box"/>
</div>
<div>
<div>
Speech to Text
</div>
<div className="text-xs uppercase font-semibold opacity-60">
Transcribes your text
</div>
</div>
<p className="list-col-wrap text-xs">
Using AWS tools we are able to use your devices microphone and turn that into a
transcription for you to read.
</p>
</li>
<li className="list-row">
<div className="text-4xl font-thin opacity-30 tabular-nums">
02
</div>
<div>
<Languages className="size-10 rounded-box"/>
</div>
<div>
<div>
Translation
</div>
<div className="text-xs uppercase font-semibold opacity-60">
Allows for you to communicate
</div>
</div>
<p className="list-col-wrap text-xs">
During your conversation the transcription will start to be translated into the
preferred language of the non speaking participant.
</p>
</li>
<li className="list-row">
<div className="text-4xl font-thin opacity-30 tabular-nums">
03
</div>
<div>
<Volume2 className="size-10 rounded-box"/>
</div>
<div>
<div>
Text to Speech
</div>
<div className="text-xs uppercase font-semibold opacity-60">
Plays audio through your speakers or connected audio devices
</div>
</div>
<p className="list-col-wrap text-xs">
Each time, you the council member has finished speaking, your translated words will
to be turned into speech and played on your speakers so the constituent can hear
what was just said.
</p>
</li>
<li className="list-row">
<div className="text-4xl font-thin opacity-30 tabular-nums">
04
</div>
<div>
<Mail className="size-10 rounded-box"/>
</div>
<div>
<div>
Email
</div>
<div className="text-xs uppercase font-semibold opacity-60">
Transcripts sent to you
</div>
</div>
<p className="list-col-wrap text-xs">
Once you have finished the conversational and happy to stop the transcription
process you are to read through a copy of the transcription. Comments can then be
added to it here. Then you are able to send a pdf copy of the transcript straight to
you.
</p>
</li>
</ul>
</div>
</div>
</dialog>
</>
);
}
export default Help;
|