Merge pull request #41 from Mahmoud-Barry/copy-code

Copy code
GalsenDev221 · Oct 26, 2024 · 2c8873a · 2c8873a
2 parents be592e8 + 719bb97
commit 2c8873a
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 16 deletions.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -4,7 +4,21 @@ Merci de votre intérêt pour contribuer à **GalsenUI** !
 
 Voici les étapes à suivre pour ajouter des composants :
 
-## Étape 1 : Créer un fichier `.mdx`
+## Étape 1: Comment faire pour contribuer
+
+1. **[Fork le projet](https://github.com/GalsenDev221/galsen.ui.git)**.
+
+2. **Clonez votre fork**.
+
+3. **Créez une branche pour votre fonctionnalité**.
+
+4. **Commitez vos changements et poussez vos modifications**.
+
+5. **Créez une pull request vers la branche dev**.
+
+6. **Attendez que la pull request soit mergé**.
+
+## Étape 2: Créer un fichier `.mdx`
 
 1. Accédez au dossier `src/components`.
 2. Créez un fichier nommé `galsen-ui-nom-du-fichier.mdx` en respectant le format suivant :
@@ -30,7 +44,7 @@ Voici les étapes à suivre pour ajouter des composants :
    - **emoji** : Un emoji représentatif du composant.
    - **components** : Une liste des variantes du composant avec leur titre respectif.
 
-## Étape 2 : Créer un dossier pour les variantes
+## Étape 3 : Créer un dossier pour les variantes
 
 1. Accédez au dossier `public/components`.
 2. Créez un dossier avec le même nom que le fichier `.mdx` créé précédemment dans `src/components`.

diff --git a/components/galsenUiComponents/ComponentDetails.tsx b/components/galsenUiComponents/ComponentDetails.tsx
@@ -15,30 +15,33 @@ const ComponentDetails = ({ code, title }: { title: string; code: string }) => {
 
   return (
     <article className="w-full grid grid-cols-1 md:grid-cols-[1fr_auto] gap-y-6 items-center">
-      <h2 className="text-neutral-700 w-[500px] truncate">
-        {title}
-      </h2>
+      <h2 className="text-neutral-700 w-[500px] truncate">{title}</h2>
 
       <div className="p-1.5 bg-blue-50 text-blue-900 font-medium rounded w-fit">
         <button
           onClick={() => setTab("preview")}
           type="button"
-          className={`py-2 px-3 rounded ${tab === "preview" ? "bg-blue-500 text-white" : ""}`}
+          className={`py-2 px-3 rounded ${
+            tab === "preview" ? "bg-blue-500 text-white" : ""
+          }`}
         >
           Aperçu
         </button>
         <button
           onClick={() => setTab("code")}
           type="button"
-          className={`py-2 px-3 rounded ${tab === "code" ? "bg-blue-500 text-white" : ""}`}
+          className={`py-2 px-3 rounded ${
+            tab === "code" ? "bg-blue-500 text-white" : ""
+          }`}
         >
           Code
         </button>
       </div>
 
       <div
-        className={`col-span-full h-[600px] ${tab === "preview" ? "overflow-x-hidden" : ""
-          }`}
+        className={`col-span-full h-[600px] ${
+          tab === "preview" ? "overflow-x-hidden" : ""
+        }`}
       >
         {tab === "preview" ? (
           <article className="w-full h-full">
@@ -64,8 +67,8 @@ const TabPreview = ({ code }: { code: string }) => {
         <div className="pr-3 pl-5 py-10 w-full h-full flex items-center justify-center bg-gray-100 rounded-lg">
           <iframe
             className="w-full h-full flex items-center justify-center"
-            srcDoc={componentPreviewHtml(code)}>
-          </iframe>
+            srcDoc={componentPreviewHtml(code)}
+          ></iframe>
         </div>
       </Panel>
       <PanelResizeHandle className="w-2 h-16 rounded-full bg-gray-300 translate-x-4 translate-y-[230px] hidden md:block" />
@@ -75,13 +78,27 @@ const TabPreview = ({ code }: { code: string }) => {
 };
 
 const TabCode = ({ code }: { code: string }) => {
-  // TODO: Do we need to change the language?
-  // const [prismClass, setPrismClass] = useState("language-html");
+  const [copied, setCopied] = useState(false);
+
+  const copyToClipboard = () => {
+    navigator.clipboard.writeText(code).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    });
+  };
 
   return (
-    <pre className="w-full h-full !m-0 overflow-auto">
-      <code className="language-html">{code}</code>
-    </pre>
+    <div className="relative w-full h-full">
+      <button
+        onClick={copyToClipboard}
+        className="absolute top-2 right-2 bg-blue-500 hover:bg-blue-600 text-white py-1 px-3 rounded"
+      >
+        {copied ? "Copié !" : "Copier "}
+      </button>
+      <pre className="w-full h-full !m-0 overflow-auto">
+        <code className="language-html">{code}</code>
+      </pre>
+    </div>
   );
 };