73 lines
1.7 KiB
TypeScript
73 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import "./Selection.css";
|
|
import Image from "next/image";
|
|
|
|
export default function SelectionCo({
|
|
plataformasInscritas = [],
|
|
onSelect,
|
|
}: {
|
|
plataformasInscritas: string[];
|
|
onSelect: (plataforma: string | null) => void;
|
|
}) {
|
|
const [selected, setSelected] = useState<string | null>(null);
|
|
|
|
const options = [
|
|
{
|
|
name: "WINDOWS",
|
|
img: "/windows.png",
|
|
},
|
|
{
|
|
name: "MACINTOSH",
|
|
img: "/apple.png",
|
|
},
|
|
{
|
|
name: "PROFESORES",
|
|
img: "/teacher.png",
|
|
},
|
|
];
|
|
|
|
const opcionesInscritas = options.filter((option) =>
|
|
plataformasInscritas.includes(option.name),
|
|
);
|
|
|
|
const handleSelect = (optionName: string) => {
|
|
const value = selected === optionName ? null : optionName;
|
|
setSelected(value);
|
|
onSelect(value);
|
|
};
|
|
|
|
return (
|
|
<section className="selection">
|
|
{opcionesInscritas.map((option, index) => (
|
|
<div
|
|
key={index}
|
|
className="selectionItem"
|
|
onClick={() => handleSelect(option.name)}
|
|
>
|
|
<button
|
|
className={`buttonSelection ${selected === option.name ? "active" : ""
|
|
}`}
|
|
>
|
|
<div className="imageSelection">
|
|
<Image
|
|
src={option.img}
|
|
alt={option.name.toLowerCase()}
|
|
fill
|
|
/>
|
|
</div>
|
|
</button>
|
|
<span className="buttonLabel">{option.name}</span>
|
|
</div>
|
|
))}
|
|
|
|
{opcionesInscritas.length === 0 && (
|
|
<p style={{ opacity: 0.6 }}>
|
|
El alumno no está inscrito en ninguna plataforma
|
|
</p>
|
|
)}
|
|
</section>
|
|
);
|
|
}
|
|
//IO
|