Estoy trabajando en mi sitio web Next.js. Usando Tailwind CSS, logré cambiar el color dinámicamente antes de devolver un componente con nombres y colores estáticos.

Ahora estoy obteniendo datos de la API y el título + color debe crearse dinámicamente con los valores de la API.

el accesorio de title es igual al nombre del proyecto codificado (1,2,3). El color debe ser color prop.

¿Existe una forma inteligente de crear un objeto literal con los datos dinámicos?

Los valores codificados funcionan perfectamente bien.

 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;