Color Palette - Copy this React, Tailwind Component to your project
'use client'; import ButtonOutline from '@/app/components/common/button-outline'; import FormInput from '@/app/components/form/input'; import FormSelect from '@/app/components/form/select'; import React, { useState } from 'react'; const Colors = () => { const colors = [ { hex: '#E4C7B7', name: 'Desert Sand', rgb: '228, 199, 183', lrv: '9', code: '0001' }, { hex: '#D9A89C', name: 'Blush Pink', rgb: '217, 168, 156', lrv: '8', code: '0002' }, { hex: '#C78A87', name: 'Rosewood', rgb: '199, 138, 135', lrv: '7', code: '0003' }, { hex: '#A6667B', name: 'Vintage Mauve', rgb: '166, 102, 123', lrv: '6', code: '0004' }, { hex: '#834E6D', name: 'Plum Passion', rgb: '131, 78, 109', lrv: '5', code: '0005' }, { hex: '#6D3A5F', name: 'Purple Passion', rgb: '109, 58, 95', lrv: '4', code: '0006' }, { hex: '#4F2C4F', name: 'Royal Purple', rgb: '79, 44, 79', lrv: '3', code: '0007' }, { hex: '#3B2A4F', name: 'Deep Purple', rgb: '59, 42, 79', lrv: '2', code: '0008' }, { hex: '#2A2A4F', name: 'Midnight Purple', rgb: '42, 42, 79', lrv: '1', code: '0009' }, ]; const [hoveredColor, setHoveredColor] = useState(null); return ( <div> <div className="container"> <div className="flex justify-between"> <div className=""> <h1 className="text-heading5 mb-4">Vista Paint Color Palette</h1> <div className="flex gap-x-2 w-full"> <div> <FormInput name="search" placeholder="Search by Color Name" className="w-96" /> </div> <ButtonOutline className="h-fit items-center justify-center px-7 py-3 text-base font-semibold text-primary transition-all duration-200 border-2 rounded-lg lg:inline-flex" onClick={() => console.log('Find Color clicked')} > Find Color </ButtonOutline> </div> </div> <div className=""> <h1 className="text-heading5 mb-4">Collections</h1> <div className="w-full"> <FormSelect name="collection" placeholder="Select Collection" className="w-96" options={[ { value: 'collection1', label: 'Collection 1' }, { value: 'collection2', label: 'Collection 2' }, { value: 'collection3', label: 'Collection 3' }, ]} /> </div> </div> </div> <div className="mt-8"> <div className="flex gap-0"> {colors.map((color, index) => ( <div key={index} className="w-16 h-16 border border-gray-300 relative group cursor-pointer" onMouseEnter={() => setHoveredColor(color)} onMouseLeave={() => setHoveredColor(null)} > <div style={{ backgroundColor: color.hex }} className="w-full h-full hover:transform hover:scale-110 hover:h-24 hover:w-24 transition-transform duration-200" ></div> {hoveredColor === color && ( <div style={{ backgroundColor: color.hex }} className="absolute top-full left-0 shadow-lg rounded-md overflow-hidden w-48" > <div className="p-4 text-white"> <div className="flex items-center justify-between mb-2"> <span className="text-sm font-medium">{color.code}</span> <button className="opacity-80 hover:opacity-100"> <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 256 256" > <path d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z" /> </svg> </button> </div> <h3 className="text-lg font-semibold mb-2">{color.name}</h3> <div className="space-y-1 text-sm opacity-90"> <p>LRV: {color.lrv}</p> <p>RGB: {color.rgb}</p> <p>HEX: {color.hex}</p> </div> </div> </div> )} </div> ))} </div> </div> </div> </div> ); }; export default Colors; look i want when i hover any color it will be zoom it and hsowing the information
