copy prompt to clipboard

src/lib/components/community/Card.svelte

@@ -7,6 +7,7 @@
   import { galleryStore } from "$lib/stores/use-gallery";
 	import Loading from "$lib/components/Loading.svelte";
 	import Reactions from "./reactions/Reactions.svelte";
+	import { success } from "$lib/utils/toaster";
 
   export let card: CommunityCard;
   export let form: Record<string, string> | undefined = undefined;
@@ -54,9 +55,20 @@
       <div class="bg-gradient-to-b from-transparent via-black/50 to-black/70 absolute h-[100px] bottom-0 left-0 w-full"></div>
     </div>
     <div class="group-hover:opacity-100 opacity-0 translate-y-full group-hover:translate-y-0 transition-all duration-200 flex flex-col gap-4 w-full">
-      <div class="bg-black/40 backdrop-blur-sm border border-white/30 rounded-lg px-6 py-3 text-white transition-all duration-200 w-full">
+      <div class="bg-black/40 backdrop-blur-sm border border-white/30 rounded-lg px-6 py-3 text-white transition-all duration-200 w-full relative">
         <p class="text-white font-semibold text-lg">{card.prompt}</p>
         <p class="text-white/75 font-regular text-base">{card.model.id}</p>
+        <button
+          class="absolute bottom-3 right-3"
+          on:click={(e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            navigator.clipboard.writeText(card.prompt);
+            success("Prompt copied to clipboard");
+          }}
+        >
+          <Icon icon="solar:copy-bold-duotone" class="w-5 h-5 text-white/75 hover:text-white" />
+        </button>
       </div>
     </div>
     {#if displayReactions}