73 lines
1.8 KiB
TypeScript
73 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import "./Selection.css";
|
|
|
|
function Selection({
|
|
plataformasInscritas = [],
|
|
onSelect,
|
|
}: {
|
|
plataformasInscritas: string[];
|
|
onSelect: (plataforma: string | null) => void;
|
|
}) {
|
|
const [selected, setSelected] = useState<string | null>(null);
|
|
|
|
const handleSelect = (optionName: string) => {
|
|
const value = selected === optionName ? null : optionName;
|
|
setSelected(value);
|
|
onSelect(value);
|
|
};
|
|
const options = [
|
|
{
|
|
name: "WINDOWS",
|
|
img: "https://images.icon-icons.com/2235/PNG/512/windows_os_logo_icon_134678.png",
|
|
},
|
|
{
|
|
name: "MACINTOSH",
|
|
img: "https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_logo_black.svg",
|
|
},
|
|
{
|
|
name: "PROFESORES",
|
|
img: "https://cdn-icons-png.flaticon.com/512/3135/3135715.png",
|
|
},
|
|
];
|
|
|
|
const opcionesDisponibles = options.filter(
|
|
(option) => !plataformasInscritas.includes(option.name),
|
|
);
|
|
|
|
return (
|
|
<section className="selection">
|
|
{opcionesDisponibles.map((option, index) => (
|
|
<div
|
|
key={index}
|
|
className="selectionItem"
|
|
onClick={() => handleSelect(option.name)}
|
|
>
|
|
<button
|
|
className={`buttonSelection ${
|
|
selected === option.name ? "active" : ""
|
|
}`}
|
|
>
|
|
<img
|
|
src={option.img}
|
|
alt={option.name.toLowerCase()}
|
|
height={30}
|
|
width={30}
|
|
/>
|
|
</button>
|
|
<span className="buttonLabel">{option.name}</span>
|
|
</div>
|
|
))}
|
|
|
|
{opcionesDisponibles.length === 0 && (
|
|
<p style={{ opacity: 0.6 }}>
|
|
El alumno ya está inscrito en todas las plataformas
|
|
</p>
|
|
)}
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export default Selection;
|