Tasti per modificare lo stato di una soluzione e dettagli estetici

client/components/Solution.tsx

@@ -1,16 +1,25 @@
+import { JSX } from 'preact/jsx-runtime'
 import { ProblemId, SolutionStatus, UserId } from '../../shared/model'
 import { Markdown } from './Markdown'
+import { Select } from './Select'
+
+const STATUS_SELECT_OPTIONS: Record<SolutionStatus, JSX.Element> = {
+    ['pending']: <div class="pending">Soluzione in attesa di correzione</div>,
+    ['correct']: <div class="correct">Soluzione corretta</div>,
+    ['wrong']: <div class="wrong">Soluzione sbagliata</div>,
+}
 
 type Props = {
     sentBy?: UserId
     forProblem: ProblemId
     content: string
     status?: SolutionStatus
+    adminControls: boolean
 }
 
-export const Solution = ({ sentBy, forProblem, content }: Props) => {
+export const Solution = ({ sentBy, forProblem, content, status, adminControls }: Props) => {
     return (
-        <div class="solution">
+        <div class={['solution', status].join(' ')}>
             <div class="solution-header">
                 <div>
                     Soluzione
@@ -31,6 +40,32 @@ export const Solution = ({ sentBy, forProblem, content }: Props) => {
             <div class="solution-content">
                 <Markdown source={content} />
             </div>
+            {status && (
+                <div class="solution-footer">
+                    {/* <div class="row">
+                        <div class="label">Stato</div>
+                        <Select value={status} options={STATUS_SELECT_OPTIONS} />
+                    </div> */}
+                    <div class="row">
+                        <div class="status-label">{STATUS_SELECT_OPTIONS[status]}</div>
+                        {adminControls && (
+                            <>
+                                <button disabled={status === 'pending'} class="icon">
+                                    <span class="material-symbols-outlined">hourglass_empty</span>
+                                </button>
+                                <button disabled={status === 'correct'} class="icon">
+                                    <span class="material-symbols-outlined correct">
+                                        check_circle
+                                    </span>
+                                </button>
+                                <button disabled={status === 'wrong'} class="icon">
+                                    <span class="material-symbols-outlined wrong">cancel</span>
+                                </button>
+                            </>
+                        )}
+                    </div>
+                </div>
+            )}
         </div>
     )
 }