From 975a08b3610979d9118e272eba6f4a7a9690a228 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan-Niklas=20Vo=C3=9F?= <jan-niklas.voss@inovex.de>
Date: Wed, 6 Nov 2024 12:43:19 +0100
Subject: [PATCH] add copy react button

---
 .../_components/copy-button-react.tsx         | 68 +++++++++++++++++++
 .../patterns/_components/preview-box.tsx      |  2 +
 2 files changed, 70 insertions(+)
 create mode 100644 packages/landingpage/app/[lang]/library/patterns/_components/copy-button-react.tsx

diff --git a/packages/landingpage/app/[lang]/library/patterns/_components/copy-button-react.tsx b/packages/landingpage/app/[lang]/library/patterns/_components/copy-button-react.tsx
new file mode 100644
index 000000000..1c01001b1
--- /dev/null
+++ b/packages/landingpage/app/[lang]/library/patterns/_components/copy-button-react.tsx
@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+import { InoIcon, InoPopover } from '@inovex.de/elements-react';
+import styles from './preview-box.module.scss';
+
+interface CopyButtonProps {
+  rawCode: string;
+  copyIconId: string;
+}
+
+const ACCORDION_REACT_CODE = `
+<div className="max-w-6xl p-6 bg-white ">
+      <h3 className="text-3xl header-d3 mb-8 text-inovex-primary">FAQs</h3>
+
+      <InoMeetupAccordion accordionTitle="What are Web Components?">
+        Web Components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. They are based on existing web standards and work across modern browsers.
+      </InoMeetupAccordion>
+
+      <InoMeetupAccordion accordionTitle="How can I use Web Components in my project?">
+        You can use Web Components in any project by importing them into your HTML file or JavaScript framework. For example, with the inovex Elements library, you can install it using npm and then import the components you need in your React, Angular, or Vue.js project.
+      </InoMeetupAccordion>
+
+      <InoMeetupAccordion accordionTitle="What are the main advantages of using Web Components?">
+        The main advantages of Web Components include reusability across different frameworks, encapsulation of styles and functionality, and the ability to create custom elements that work seamlessly with existing HTML, CSS, and JavaScript.
+      </InoMeetupAccordion>
+
+      <InoMeetupAccordion accordionTitle="How do I style Web Components?">
+        With inovex Elements, you can use CSS variables like --ino-input-line-color to customize the appearance of components.
+      </InoMeetupAccordion>
+
+      <InoMeetupAccordion accordionTitle="Can I use Web Components with React?">
+        We provide a React wrapper, making it easy to use our web components in React projects with a familiar syntax.
+      </InoMeetupAccordion>
+
+      <InoMeetupAccordion accordionTitle="What are slots in Web Components?">
+        Slots are a feature of Web Components that allow you to define placeholders in your component that can be filled with custom content. This makes components more flexible and customizable.
+      </InoMeetupAccordion>
+    </div>
+`;
+
+export default function CopyButtonReact({ rawCode, copyIconId }: CopyButtonProps) {
+  const [wasCopied, setWasCopied] = useState(false);
+
+  const handleIconClick = () => {
+    setWasCopied(true);
+    setTimeout(() => {
+      setWasCopied(false);
+    }, 3000);
+
+    if (navigator.clipboard) {
+      navigator.clipboard.writeText(ACCORDION_REACT_CODE);
+    }
+  };
+
+  return (
+    <>
+      {wasCopied ? (
+        <InoIcon icon="checkmark" className={styles.copyIcon} onClick={handleIconClick} />
+      ) : (
+        <img src="/react.svg" style={{ width: 20 }} onClick={handleIconClick} />
+      )}
+      <InoPopover controlled={true} visible={wasCopied} for={copyIconId} trigger="click" placement="top">
+        <div className={styles.popover}>
+          <span className="body-s">Copied!</span>
+        </div>
+      </InoPopover>
+    </>
+  );
+}
diff --git a/packages/landingpage/app/[lang]/library/patterns/_components/preview-box.tsx b/packages/landingpage/app/[lang]/library/patterns/_components/preview-box.tsx
index 748db7823..5db76aff0 100644
--- a/packages/landingpage/app/[lang]/library/patterns/_components/preview-box.tsx
+++ b/packages/landingpage/app/[lang]/library/patterns/_components/preview-box.tsx
@@ -2,6 +2,7 @@ import React, { useMemo, useRef, useState } from 'react';
 import ViewModeSelection, { ViewMode } from './view-mode-selection';
 import CopyButton from './copy-button';
 import styles from './preview-box.module.scss';
+import CopyButtonReact from './copy-button-react';
 
 interface PreviewBoxProps {
   id: string;
@@ -38,6 +39,7 @@ export default function PreviewBox({
         <ViewModeSelection selectedValue={selectedValue} setSelectedValue={setSelectedValue} />
         <div className={styles.divider} />
         <CopyButton rawCode={rawCode} copyIconId={`copy-icon-${id}`} />
+        <CopyButtonReact rawCode={rawCode} copyIconId={`copy-icon-${id}`} />
       </div>
       <div className={`${styles.previewBox} ${selectedValue === 'PreviewMode' ? styles.previewMode : styles.codeMode}`}>
         <div