I am working on my Next.js website. Using Tailwind CSS I have managed to change the color dynamically before returning a component with static names & colors.

Now I am fetching data from the API and the title + color needs to be dynamically created with the values from the API.

the title prop equals the hardcoded project (1,2,3) name. The color should be color prop.

Is there an intelligent way to create an object literal with the dynamic data?

Hardcoded values work just perfectly fine.

import { motion } from 'framer-motion';

import Image from 'next/image';

import Link from 'next/link';

import { projectsArrayProps } from '@typings/propTypes';

const Projects = ({ allProjects }) => {
  console.log(allProjects);

  return (
    <div className="card--grid grid grid-cols-3 lg:grid-cols-4 gap-4 auto-rows-[100px] sm:auto-rows-[120px] md:auto-rows-[200px]">
      {allProjects.map(
        ({ id, logo, title, color }: projectsArrayProps, index) => {
          // const projectColor: { [key: string]: string } = {
          //   project1: 'bg-[#fbc340]/[0.07]',
          //   project2: 'bg-[#70d1db]/[0.07]',
          //   project3: 'bg-[#ea5b52]/[0.07]',
          //   project4: 'bg-[#ff1e00]/[0.07]',
          //   project5: 'bg-[#ff99f3]/[0.07]',
          // };

          const projectColor: { [key: string]: string } = {};

          return (
            <motion.div
              key={id}
              className={`rounded-md bg-[${projectColor['title']}]`}
              initial="hidden"
              whileInView="visible"
              viewport={{ once: true }}
              transition={{
                duration: 0.1,
                stiffness: 200,
                delay: index * 0.085,
                type: 'spring'
              }}
              variants={{
                hidden: { opacity: 0, scale: 0.6 },
                visible: { opacity: 1, scale: 1 }
              }}
            >
              <Link href="">
                <a
                  target="_blank"
                  className="flex flex-col items-center justify-center w-full h-full"
                >
                  <div className="flex flex-col items-center justify-center relative w-full h-full max-w-[64px] md:max-w-[100px] lg:max-w-[120px]">
                    <img
                      className="object-contain"
                      src={logo.url}
                      alt={logo.alt}
                    />
                  </div>
                </a>
              </Link>
            </motion.div>
          );
        }
      )}
    </div>
  );
};

export default Projects;