Commit 69a26550 authored by Lee SeoYeon's avatar Lee SeoYeon
Browse files

rating 선택한 버튼 색깔 다르게 하기

parent 71300da6
import React from "react";
import React, { useState } from "react";
import { RatingType } from "../types";
type Props = {
......@@ -6,14 +6,31 @@ type Props = {
};
export const ARatingForm = ({ element }: Props) => {
const [selectedchoice, setSelectedchoice] = useState("");
function buttonClick(event: React.MouseEvent<HTMLButtonElement>) {
event.preventDefault();
setSelectedchoice(event.currentTarget.name);
}
return (
<div className="flex w-full gap-4 justify-around my-3">
<div className="flex w-full justify-center space-x-12 my-3">
<label className="mt-3">{element.content.minRateDescription}</label>
{element.content.choices.map((choice) => (
<div>
<input className="mr-2"></input>
<label className="text-lg">{choice.text}</label>
<div className="flex gap-4">
<button
type="button"
className="border border-themeColor rounded-full w-12 h-12 text-center hover:bg-slate-300"
name={choice.text}
onClick={buttonClick}
style={{
backgroundColor:
selectedchoice === choice.text ? "#58ACFA" : "white",
}}
>
{choice.text}
</button>
</div>
))}
<label className="mt-3">{element.content.maxRateDescription}</label>
</div>
);
};
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment