React Components - rs-hash/Senior GitHub Wiki

import React, { useState } from "react";
import data from "./data";

const Accordion = () => {
  const [selected, setSelected] = useState(null);

  const handleClick = (id) => {
    setSelected(selected === id ? null : id);
  };

  return (
    <div>
      <h2>Accordion</h2>
      <div className="wrapper">
        {data.map((item) => (
          <div key={item.id} className="bg-gray-500 text-white rounded m-4">
            <div
              className="flex justify-between items-center p-2 cursor-pointer"
              onClick={() => handleClick(item.id)}
            >
              <h2 className="text-3xl">{item.title}</h2>
              <span>+</span>
            </div>
            {item.id === selected && <p className="p-5">{item.content}</p>}
          </div>
        ))}
      </div>
    </div>
  );
};

export default Accordion;

import React, { useState } from "react";
import data from "./data";

const Accordion = () => {
  const [selected, setSelected] = useState(null);
  const [multiSelection, setMultiSelection] = useState(false);
  const [multi, setMulti] = useState([]);

  const handleSelectionClick = (id) => {
    if (multiSelection) {
      const index = multi.indexOf(id);
      if (index === -1) {
        const updatedMulti = [...multi, id];
        setMulti(updatedMulti);
      } else {
        const updatedMulti = [...multi];
        updatedMulti.splice(index, 1);
        setMulti(updatedMulti);
      }
    } else {
      setSelected(selected === id ? null : id);
    }
  };

  return (
    <div>
      <h2>Accordion</h2>
      <button onClick={() => setMultiSelection(!multiSelection)}>
        {multiSelection ? "Enable Single Selection" : "Enable Multi Selection"}
      </button>
      <div className="wrapper">
        {data.map((item) => (
          <div key={item.id} className="bg-gray-500 text-white rounded m-4">
            <div
              className="flex justify-between items-center p-2 cursor-pointer"
              onClick={() => handleSelectionClick(item.id)}
            >
              <h2 className="text-3xl">{item.title}</h2>
              <span>+</span>
            </div>
            {(multiSelection && multi.includes(item.id)) || item.id === selected ? (
              <p className="p-5">{item.content}</p>
            ) : null}
          </div>
        ))}
      </div>
    </div>
  );
};

export default Accordion;

import { useEffect, useState } from "react";

export default function RandomColor() {
  const [typeOfColor, setTypeOfColor] = useState("hex");
  const [color, setColor] = useState("#000000");

  function randomColorUtility(length) {
    return Math.floor(Math.random() * length);
  }

  function handleCreateRandomHexColor() {
    // #678765
    const hex = [1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F"];
    let hexColor = "#";

    for (let i = 0; i < 6; i++) {
      hexColor += hex[randomColorUtility(hex.length)];
    }
    setColor(hexColor);
  }

  function handleCreateRandomRgbColor() {
    const r = randomColorUtility(256);
    const g = randomColorUtility(256);
    const b = randomColorUtility(256);

    setColor(`rgb(${r},${g}, ${b})`);
  }

  useEffect(() => {
    if (typeOfColor === "rgb") handleCreateRandomRgbColor();
    else handleCreateRandomHexColor();
  }, [typeOfColor]);

  return (
    <div
      style={{
        width: "100vw",
        height: "100vh",
        background: color,
      }}
    >
      <button onClick={() => setTypeOfColor("hex")}>Create HEX Color</button>
      <button onClick={() => setTypeOfColor("rgb")}>Create RGB Color</button>
      <button
        onClick={
          typeOfColor === "hex"
            ? handleCreateRandomHexColor
            : handleCreateRandomRgbColor
        }
      >
        Generate Random Color
      </button>
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          color: "#fff",
          fontSize: "60px",
          marginTop: "50px",
          flexDirection  :'column',
          gap :'20px'
        }}
      >
        <h3>{typeOfColor === "rgb" ? "RGB Color" : "HEX Color"}</h3>
        <h1>{color}</h1>
      </div>
    </div>
  );
}

import { useState } from "react";

const Stars = ({ length = 5 }) => {
  const [rating, setRating] = useState(0);
  const [hover, setHover] = useState(0);
  
  return (
    <div>
      {[...Array(length)].map((_, index) => {
        index += 1;
        return (
          <label htmlFor="star" key={index}>
            <span
              style={{
                cursor: "pointer",
                fontSize: "40px",
                color: index <= (hover || rating) ? "goldenrod" : "black",
              }}
              id="star"
              onMouseMove={() => {
                setHover(index);
              }}
              onMouseLeave={() => {
                setHover(rating);
              }}
              onClick={() => {
                setRating(index);
              }}
            >
              &#9733;
            </span>
          </label>
        );
      })}
      <p>Selected Rating: {rating}</p>
    </div>
  );
};

export default Stars;