create new product mapper page

components/product/sku-generator.tsx

@@ -1,16 +1,21 @@
 'use client'
 
 import clsx from "clsx";
+import { copyText } from "lib/helpers/actions";
 import { createProductSKUs } from "lib/helpers/skus";
 import { useState } from "react";
 
 
-export function ProductSKUs(productInfo: {productTitle: string}) {
-  const SKUs = createProductSKUs(productInfo.productTitle)
+export function ProductSKUs(
+  {
+    productTitle, 
+    noTitle = true
+  }: { productTitle: string, noTitle: boolean}) {
+  const SKUs = createProductSKUs(productTitle)
   const [copyMessageState, setCopyMessageState] = useState< number | null >(null);
   
-  const triggerCopyMessage = async (e: MouseEvent<HTMLButtonElement>, i: number) => {
-    copyText(e.target.value)
+  const triggerCopyMessage = async (i: number, SKU: string) => {
+    copyText(SKU)
     
     console.log("copyMessageState", copyMessageState);
     setCopyMessageState(i);
@@ -19,22 +24,18 @@ export function ProductSKUs(productInfo: {productTitle: string}) {
     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-12">
           <div className="lg:col-span-6 lg:col-start-4">
-            <h3 className="font-bold text-xl pb-4">{productInfo.productTitle}</h3>
+            { !noTitle && <h3 className="font-bold text-xl pb-4">{productTitle}</h3> }
             {/* {copyMessageState} */}
             {SKUs?.map((SKU, index) => {
               return (
                 <div className="my-4 w-full" key={`${SKU}-${index}`}>
                   <div 
-                  onClick={(e) => triggerCopyMessage(e, index)} 
+                  onClick={() => triggerCopyMessage(index, SKU)} 
                   className={clsx(
                     [
                       "cursor-pointer w-full border py-2 px-2 rounded",