elevate-rehab-v3

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README | LICENSE

color.tsx (1333B)

      1 import * as React from "react";
      2 import { wrapFieldsWithMeta } from "tinacms";
      3 
      4 export const colorOptions = [
      5   "blue",
      6   "teal",
      7   "green",
      8   "yellow",
      9   "orange",
     10   "red",
     11   "pink",
     12   "purple",
     13   "white",
     14 ];
     15 
     16 export const ColorPickerInput = wrapFieldsWithMeta(({ input }) => {
     17   const inputClasses = {
     18     blue: "bg-blue-500 border-blue-600",
     19     teal: "bg-teal-500 border-teal-600",
     20     green: "bg-green-500 border-green-600",
     21     yellow: "bg-yellow-500 border-yellow-600",
     22     orange: "bg-orange-500 border-orange-600",
     23     red: "bg-red-500 border-red-600",
     24     pink: "bg-pink-500 border-pink-600",
     25     purple: "bg-purple-500 border-purple-600",
     26     white: "bg-white border-gray-150",
     27   };
     28 
     29   return (
     30     <>
     31       <input type="text" id={input.name} className="hidden" {...input} />
     32       <div className="flex gap-2 flex-wrap">
     33         {colorOptions.map((color) => {
     34           return (
     35             <button
     36               className={`w-9 h-9 rounded-full shadow border ${
     37                 inputClasses[color]
     38               } ${
     39                 input.value === color
     40                   ? "ring-[3px] ring-offset-2 ring-blue-400"
     41                   : ""
     42               }`}
     43               onClick={() => {
     44                 input.onChange(color);
     45               }}
     46             ></button>
     47           );
     48         })}
     49       </div>
     50     </>
     51   );
     52 });