Tech Stack Generator

TechStackGenerator.js

import "./styles.css";
import { useState } from "react";
import Link from "@mui/material/Link";
import { Input } from "./Input";
import { InteractiveStackName } from "./InteractiveStackName";
import { Description } from "./Description";
import {
  getRandomStackName,
  sanitizeInputValue,
  isStackNameValid,
  getStackNameSections
} from "./utils";

const App = () => {
  const [stackName, setStackName] = useState("");

  const handleChange = (event) => {
    const value = event.target.value;
    setStackName(sanitizeInputValue(value));
  };

  const handleRandomButtonCick = () => {
    setStackName(getRandomStackName());
  };

  return (
    <div className="App">
      <h1>Tech Stack Generator</h1>
      <Input stackName={stackName} onChange={handleChange} />
      <p>
        Or{" "}
        <Link href="#" onClick={handleRandomButtonCick}>
          get a random name!
        </Link>
      </p>
      {isStackNameValid(stackName) && (
        <>
          <h1>
            Your Tech Stack is: <InteractiveStackName stackName={stackName} />
          </h1>
          <div className="descriptions">
            {getStackNameSections(stackName).map((section) => (
              <Description key={section} section={section} />
            ))}
          </div>
        </>
      )}
      <footer>
        This website was made with{" "}
        <span role="img" aria-label="heart">
          ❤️
        </span>{" "}
        with the <InteractiveStackName stackName="krypton" /> stack.
      </footer>
    </div>
  );
};

export default App;