Function AddTrackCard

apps/web/components/admin/AddTrackCard.tsx:8–158

({ categories }: { categories: Categories[] })

import { Track } from "@prisma/client";

const AddTrackCard = ({ categories }: { categories: Categories[] }) => {
  const [newTracks, setNewProblems] = useState<Omit<Track, "inSearch">[]>([]);
  const [id, setId] = useState("");
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");
  const [image, setImage] = useState("");
  const [hidden, setHidden] = useState(false);
  const [selectedCategory, setSelectedCategory] = useState<string[]>([]);
  const [cohort, setCohort] = useState(3);
  const [canvaLink, setCanvaLink] = useState("");
  const { toast } = useToast();

  function handleFilterButton(category: string) {
    if (selectedCategory.includes(category)) {
      setSelectedCategory(selectedCategory.filter((item) => item !== category));
    } else {
      setSelectedCategory([...selectedCategory, category]);
    }
  }

  return (
    <div>
      <Card className="cols-span-4 m-2 w-full p-4">
        <Input
          type="text"
          placeholder="Track Id"
          className="my-2"
          onChange={(event) => {
            setId(event.target.value);
          }}
        />
        <Input
          type="text"
          placeholder="Track title"
          className="my-2"
          onChange={(event) => {
            setTitle(event.target.value);
          }}
        />
        <Input
          type="text"
          placeholder="Track Description"
          className="my-2"
          onChange={(event) => {
            setDescription(event.target.value);
          }}
        />
        <Input
          type="text"
          placeholder="Image"
          className="my-2"
          onChange={(event) => {
            setImage(event.target.value);
          }}
        />
        <Input
          type="number"
          placeholder="Cohort"