From c983726ef825c27d94ed60afba9f781b45288c35 Mon Sep 17 00:00:00 2001
From: BittuBarnwal7479 <bk8379903@gmail.com>
Date: Thu, 25 Jun 2026 05:25:28 +0530
Subject: [PATCH] feat(color): add copy button to basic example

---
 .../pg/color/__examples__/basic/basic.html    |  7 ++++-
 .../pg/color/__examples__/basic/basic.ts      | 29 ++++++++++++++++++-
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/src/components/pg/color/__examples__/basic/basic.html b/src/components/pg/color/__examples__/basic/basic.html
index 80bb9a7..c5100f7 100644
--- a/src/components/pg/color/__examples__/basic/basic.html
+++ b/src/components/pg/color/__examples__/basic/basic.html
@@ -1,4 +1,9 @@
 <div class="example">
   <pg-color part="color1" value="#000"></pg-color>
-  <code>Selected: <span part="colorSelected"></span></code>
+
+  <code>
+    Selected:
+    <span part="colorSelected">No color selected</span>
+    <button part="copyButton" disabled>Copy</button>
+  </code>
 </div>
\ No newline at end of file
diff --git a/src/components/pg/color/__examples__/basic/basic.ts b/src/components/pg/color/__examples__/basic/basic.ts
index 6711e61..c9aeefe 100644
--- a/src/components/pg/color/__examples__/basic/basic.ts
+++ b/src/components/pg/color/__examples__/basic/basic.ts
@@ -1,4 +1,4 @@
-import { Component, Part, Prop } from '@pictogrammers/element';
+import { Component, Part } from '@pictogrammers/element';
 import PgColor from '../../color';
 
 import template from './basic.html';
@@ -10,11 +10,38 @@ import template from './basic.html';
 export default class XPgColorBasic extends HTMLElement {
   @Part() $color1: PgColor;
   @Part() $colorSelected: HTMLSpanElement;
+  @Part() $copyButton: HTMLButtonElement;
+
+  private selectedHex = '';
 
   connectedCallback() {
     this.$color1.addEventListener('select', (e: CustomEvent) => {
       const { rgb, hex } = e.detail;
+
+      this.selectedHex = hex;
       this.$colorSelected.innerText = `${hex} or rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
+      this.$copyButton.disabled = false;
+    });
+
+    this.$copyButton.addEventListener('click', async () => {
+      try {
+        await navigator.clipboard.writeText(this.selectedHex);
+
+        const original = this.$copyButton.innerText;
+        this.$copyButton.innerText = 'Copied!';
+
+        setTimeout(() => {
+          this.$copyButton.innerText = original;
+        }, 1000);
+      } catch (error) {
+        console.error('Failed to copy color:', error);
+
+        this.$copyButton.innerText = 'Failed';
+
+        setTimeout(() => {
+          this.$copyButton.innerText = 'Copy';
+        }, 1000);
+      }
     });
   }
 }
\ No newline at end of file