当前位置: 首页 > news >正文

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"


 

        ]




 

    }



 

]

http://www.dtcms.com/a/169193.html

相关文章:

  • 【OFDM过程中正交子载波特性的应用及全面解析】
  • FPGA:介绍几款高速ADC及其接口形式
  • 抽奖算法场景
  • Linux C++ JNI封装、打包成jar包供Java调用详细介绍
  • 第十六届蓝桥杯单片机组省赛(第一套)
  • 【HarmonyOS Next】地图使用详解(三)标点定位问题
  • 输入输出(python)
  • 【JavaScript-Day 1】从零开始:全面了解 JavaScript 是什么、为什么学以及它与 Java 的区别
  • 6.9.单源最短路径问题-BFS算法
  • (六——下)RestAPI 毛子(Http resilience/Refit/游标分页/异步大文件上传)
  • [英语单词] from under
  • 6.10.单源最短路径问题-Dijkstra算法
  • Linux系统常用命令、标准C库函数和系统调用
  • 27.电源和地的单点串并联接线隐患及对EMC的影响分析
  • 模型上下文协议(MCP)
  • HDLBIT-程序(Procedures)
  • Python爬虫实战:获取易车网最新特定车型销量数据并分析,为消费者购车做参考
  • Java零基础入门Day4:数组与二维数组详解
  • 主机Windows和虚拟机ubuntu和开发板三者互ping学习记录
  • Python高级爬虫之JS逆向+安卓逆向1.7节: 面向对象
  • 裁剪+渲染队列+透明与混合
  • CPU:AMD的线程撕裂者(Threadripper)和霄龙(EPYC)的区别
  • 构建更快,部署更智能:立即优化您的 Docker 设置
  • 每天学一个 Linux 命令(34):wc
  • 组件通信-provide、inject
  • whl文件名后缀
  • 传奇各职业/战士/法师/道士/戒指爆率及出处产出地/圣战/法神/天尊/虹魔/魔血/麻痹/超负载/求婚/隐身/传送/复活/护身/祈祷/火焰
  • PyQt 或 PySide6 进行 GUI 开发文档与教程
  • 电商平台的订单状态设计流程
  • NHANES指标推荐:TyG指数