first commit

2025-09-02 19:50:17 -04:00
parent fe4a89f81e
commit 685c92a82f
37 changed files with 1460 additions and 301 deletions
@@ -0,0 +1,41 @@
+.selection {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  align-items: center;
+  margin: 10px;
+  flex-wrap: wrap;
+}
+
+.selectionItem {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+}
+
+.buttonSelection {
+  width: 50px;
+  height: 50px;
+  border-radius: 100%;
+  border: 2px solid #5b8cc9;
+  background-color: #f0f0f0;
+  transition: all 0.3s ease;
+}
+
+.buttonSelection:hover {
+  transform: scale(1.1);
+  background-color: #d0e1ff;
+}
+
+.buttonSelection.active {
+  background-color: #5b8cc9;
+  box-shadow: 0 0 10px #5b8cc9;
+}
+
+.buttonLabel {
+  margin-top: 8px;
+  font-weight: bold;
+  color: #333;
+  text-align: center;
+}
@@ -0,0 +1,57 @@
+'use client';
+
+import { useState } from "react";
+import "./Selection.css";
+
+function Selection() {
+  const [selected, setSelected] = useState<string | null>(null);
+
+  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: "LINUX",
+      img: "https://upload.wikimedia.org/wikipedia/commons/3/35/Tux.svg",
+    },
+    {
+      name: "PROFESORES",
+      img: "https://cdn-icons-png.flaticon.com/512/3135/3135715.png",
+    },
+  ];
+
+  const handleSelect = (optionName: string) => {
+    setSelected(selected === optionName ? null : optionName);
+  };
+
+  return (
+    <section className="selection">
+      {options.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>
+      ))}
+    </section>
+  );
+}
+
+export default Selection;