AI实现制作logo的网站添加可选颜色模板

1.效果图

LogoPalette.jsx

import React, {useState} from 'react'

import HeadingDescription from './HeadingDescription'

import Lookup from '@/app/_data/Lookup'

import Colors from '@/app/_data/Colors'

function LogoPalette({onHandleInputChange})

{

    const [selectOption, setSelectedOption]=useState();

    return (

 

        <div className='my-10'>

            <HeadingDescription

                title={Lookup.LogoColorPaletteTitle}

                description={Lookup.LogoColorPaletteDesc}

            />

            <div className='grid grid-cols-2 md:grid-cols-3 gap-5 mt-5'>

                {Colors.map((palette,index)=>(

                    <div className={`flex  p-1 cursor-pointer ${setSelectedOption==palette.name&& 'border-2 rounded-lg border-primary'}`} key={index}>

                        {palette?.colors.map((color,index)=>(

                            <div className='h-24 w-full'

                            key={index}

                            onClick={()=>{setSelectedOption(palette.name);

                                onHandleInputChange(palette)

                            }}

                            style={{

                                backgroundColor:color

                            }}>

                                </div>

                        ))}

 

                    </div>

 

                ))}

            </div>

 

        </div>

 

    )

 

}

export default LogoPalette

2./_data/Colors.jsx

export default[

    {

        "name": "Let Us Select",

        "colors":[

            "#ff5733",

            "#33ff57",

            "#3357ff",

            "#ff33a8",

            "#f4ff33"

 

        ]

 

    },

    {

        "name":"Ocean Blues",

        "colors":[

            "#003f5c",

            "#2f4b7c",

            "#665191",

            "#a05195",

            "#d45087"

 

        ]

 

    }

 

]