[TIL/React] 2023/10/09

import React, { useState } from "react";
import styled from "styled-components";

const CounterContainer = styled.div`
  display: flex;
  align-items: center;
`;

const Button = styled.button`
  padding: 10px 20px;
  font-size: 1.5em;
`;

const Display = styled.div`
  padding: 10px;
  font-size: 1.5em;
  margin: 0 20px;
`;

const Counter = () => {
  const [count, setCount] = useState(0);

  const handleIncrement = () => {
    setCount((prevCount) => prevCount + 1);
  };

  const handleDecrement = () => {
    if (count > 0) {
      setCount((prevCount) => prevCount - 1);
    }
  };

  return (
    <CounterContainer>
      <Button onClick={handleDecrement}>-</Button>
      <Display>{count}</Display>
      <Button onClick={handleIncrement}>+</Button>
    </CounterContainer>
  );
};

export default Counter;

import React, { useState } from "react";
import styled from "styled-components";

const DropdownButton = styled.div`
  padding: 10px;
  width: 100%;
  border: 2px solid black;
  cursor: pointer;
  background-color: #f0f0f0;
  color: black;
`;

const DropdownList = styled.div`
  display: ${({ isOpen }) => (isOpen ? "block" : "none")};
`;

const DropdownItem = styled.div`
  padding: 10px;
  width: 200px;
  border: 2px solid black;
  cursor: pointer;
  &:hover {
    background-color: #f0f0f0;
  }
`;

const Dropdown = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [selectedOption, setSelectedOption] = useState(null);

  const options = ["Option 1", "Option 2", "Option 3"];

  const handleOptionClick = (option) => {
    setSelectedOption(option);
    setIsOpen(false);
  };

  return (
    <>
      <DropdownButton onClick={() => setIsOpen(!isOpen)}>
        {selectedOption || "Select an option"}
      </DropdownButton>
      <DropdownList isOpen={isOpen}>
        {options.map((option) => (
          <DropdownItem key={option} onClick={() => handleOptionClick(option)}>
            {option}
          </DropdownItem>
        ))}
      </DropdownList>
    </>
  );
};

export default Dropdown;