completing SKU page design

components/product/sku-generator.tsx

@@ -1,24 +1,49 @@
 'use client'
 
+import clsx from "clsx";
 import { createProductSKUs } from "lib/helpers/skus";
+import { useState } from "react";
 
 
 export function ProductSKUs(productInfo: {productTitle: string}) {
   const SKUs = createProductSKUs(productInfo.productTitle)
+  const [copyMessageState, setCopyMessageState] = useState< number | null >(null);
   
-  function copyText(e) {
+  const triggerCopyMessage = async (e: MouseEvent<HTMLButtonElement>, i: number) => {
-    navigator.clipboard.writeText(e.target.value);
+    copyText(e.target.value)
+    
+    console.log("copyMessageState", copyMessageState);
+    setCopyMessageState(i);
+    console.log("copyMessageState", copyMessageState);
+    
+    setTimeout(() => setCopyMessageState(null), 2500)
+  }
+
+  function copyText(text: string) {
+    navigator.clipboard.writeText(text);
   }
 
   return (
     <>
       <div className="mx-auto max-w-screen-2xl px-4">
-        <div className="rounded-lg border border-neutral-200 bg-white p-8 px-4 dark:border-neutral-800 dark:bg-black md:p-12 lg:grid lg:grid-cols-6">
+        <div className="rounded-lg border border-neutral-200 bg-white p-8 px-4 dark:border-neutral-800 dark:bg-black md:p-12 lg:grid lg:grid-cols-12">
-          <div className="lg:col-span-3">
+          <div className="lg:col-span-6 lg:col-start-4">
-            {SKUs?.map(SKU => {
+            <h3 className="font-bold text-xl pb-4">{productInfo.productTitle}</h3>
+            {/* {copyMessageState} */}
+            {SKUs?.map((SKU, index) => {
               return (
-                <div className="my-4 w-full">
+                <div className="my-4 w-full" key={`${SKU}-${index}`}>
-                  <input type="text" value={SKU} onClick={copyText} className="cursor-pointer w-full border py-2 px-2" />
+                  <div 
+                  onClick={(e) => triggerCopyMessage(e, index)} 
+                  className={clsx(
+                    [
+                      "cursor-pointer w-full border py-2 px-2 rounded",
+                      { 'border-green-500': (copyMessageState === index) },
+                    ]
+                  )}
+                  >
+                    {SKU}
+                  </div>
                 </div>
               )
             })}

constants/sku.tsx

@@ -58,6 +58,7 @@ export const customisationSKUs = {
 };
 
 export const sizeSKUs = {
+  xxs: 'XXS',
   xs: 'XS',
   s: 'S',
   m: 'M',