wassname/Open-Assistant
1
0
Fork 0
mirror of https://github.com/wassname/Open-Assistant.git synced 2026-06-29 16:30:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

Componentize the rating button. Currently it's local to this file, can write a more general purpose common button component soon.

Browse Source
This commit is contained in:
Lennon Puldagrealy
2022-12-18 12:26:07 -08:00
parent 6c271e3cc1
commit 30c727e3dc
1 changed files with 19 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/pages/grading/grade-output.tsx
+19 -42
View File
@@ -28,48 +28,13 @@ export default function OutputDetail(): JSX.Element {
{/* Rating buttons */}
<div className="flex justify-center p-6">
<button
type="button"
className="inline-flex items-center mx-2 rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
>
1
</button>
<button
type="button"
className="inline-flex items-center mx-2 rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
>
2
</button>
<button
type="button"
className="inline-flex items-center mx-2 rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
>
3
</button>
<button
type="button"
className="inline-flex items-center mx-2 rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
>
4
</button>
<button
type="button"
className="inline-flex items-center mx-2 rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
>
5
</button>
<button
type="button"
className="inline-flex items-center mx-2 rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
>
6
</button>
<button
type="button"
className="nline-flex items-center mx-2 rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
>
7
</button>
<RatingButton rating={1} active={false}></RatingButton>
<RatingButton rating={2} active={false}></RatingButton>
<RatingButton rating={3} active={false}></RatingButton>
<RatingButton rating={4} active={false}></RatingButton>
<RatingButton rating={5} active={false}></RatingButton>
<RatingButton rating={6} active={false}></RatingButton>
<RatingButton rating={7} active={true}></RatingButton>
</div>
</div>
@@ -132,6 +97,18 @@ export default function OutputDetail(): JSX.Element {
);
}
function RatingButton(props: { rating: number; active: boolean }): JSX.Element {
const activeClasses =
"inline-flex items-center mx-2 rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2";
const inActiveClasses =
"inline-flex items-center mx-2 rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2";
return (
<button type="button" className={props.active ? activeClasses : inActiveClasses}>
{props.rating}
</button>
);
}
function AnnotationCheckboxLi(props: { option: annotationBool }): JSX.Element {
let AdditionalExplanation = null;
if (props.option.additionalExplanation) {