Add click to copy note

Author: adamwathan

src/components/color-palette.tsx

@@ -55,6 +55,10 @@ export function ColorPalette() {
           </div>
         </React.Fragment>
       ))}
+
+      <div className="pt-2 text-center text-gray-500 italic max-sm:hidden sm:col-span-2 md:col-span-1 md:col-start-2 dark:text-gray-400">
+        Click to copy the OKLCH value or shift+click to copy the nearest hex value.
+      </div>
     </div>
   );
 }

src/docs/colors.mdx

@@ -2,14 +2,18 @@ import { Example } from "@/components/example";
 import { Figure } from "@/components/figure";
 import { ColorPalette } from "../components/color-palette.tsx";
 import { Stripes } from "@/components/stripes.tsx";
+import { TipGood, TipBad, TipCompat, TipInfo } from "@/components/tips";
 
 export const title = "Colors";
 export const description = "Using and customizing the color palette in Tailwind CSS projects.";
 
 Tailwind CSS includes a vast, beautiful color palette out of the box, carefully crafted by expert designers and suitable for a wide range of different design styles.
 
 <div className="my-10">
+  {/* <TipInfo>{<>Click to copy OKLCH, shift+click to copy nearest hex</>}</TipInfo> */}
+  {/* <div className="mt-6"> */}
   <ColorPalette />
+  {/* </div> */}
 </div>
 
 Every color in the default palette includes 11 steps, with 50 being the lightest, and 950 being the darkest: