Rapt0r

components/drip/alert/alertCodeSnippets.js

@@ -0,0 +1,59 @@
+import { SoftColor, SolidAlert, RoundBorder, IconAlert } from "./alertData";
+
+const generateSnippets = (dataArray, arrayName, componentType) => {
+  const snippets = {};
+
+  dataArray.forEach(item => {
+    // Determine the HTML string
+    let html = '';
+    if (componentType === 'icon') {
+      html = `<div class="${item.style} flex flex-row items-center gap-2" role="alert">
+  <i class="${item.icon} text-sm font-bold"></i>
+  <span class="font-bold">${item.span}</span> ${item.text.replace('alert!', '')}
+</div>`;
+    } else {
+      html = `<div class="${item.style}" role="alert">
+  <span class="font-bold">${item.span}</span> ${item.text.replace('alert!', '')}
+</div>`;
+    }
+
+    // Determine the React string
+    let react = '';
+    if (componentType === 'icon') {
+       react = `import React from 'react';
+
+export default function ${item.span}${arrayName}() {
+  return (
+    <div className="${item.style} flex flex-row items-center gap-2" role="alert">
+      <i className="${item.icon} text-sm font-bold"></i>
+      <span className="font-bold">${item.span}</span> ${item.text.replace('alert!', '')}
+    </div>
+  );
+}`;
+    } else {
+       react = `import React from 'react';
+
+export default function ${item.span}${arrayName}() {
+  return (
+    <div className="${item.style}" role="alert">
+      <span className="font-bold">${item.span}</span> ${item.text.replace('alert!', '')}
+    </div>
+  );
+}`;
+    }
+
+    snippets[item.id] = {
+      name: item.name,
+      html,
+      react,
+      nextjs: react
+    };
+  });
+
+  return snippets;
+};
+
+export const SolidAlertSnippets = generateSnippets(SolidAlert, 'SolidAlert', 'standard');
+export const SoftColorSnippets = generateSnippets(SoftColor, 'SoftAlert', 'standard');
+export const RoundBorderSnippets = generateSnippets(RoundBorder, 'RoundAlert', 'standard');
+export const IconAlertSnippets = generateSnippets(IconAlert, 'IconAlert', 'icon');

components/drip/buttons/SingleButton.js

@@ -1,37 +1,35 @@
 import { useRef, useState } from "react";
 import copyToClipboard from "../../../utils/function/copyToClipBoard";
+import { CodeVariant } from "../../other/CodePanel";
 
 export default function SingleButton(btn) {
-    const [CopySuccess, setCopySuccess] = useState(false);
     const btnEL = useRef(null);
   return (
-      <div className='relative flex flex-col gap-1 '>
-          {/* button */}
-          <div>
-              {!btn.btns.icons
-                  ?
-                  <button
-                      ref={btnEL}
-                      onClick={() => copyToClipboard(btnEL, setCopySuccess)}
-                      className={`text-sm px-5 py-3  ${btn.style}`}
-                  >
-                      Get Started
+      <CodeVariant id={btn.id}>
+          <div className='relative flex flex-col gap-1 '>
+              {/* button */}
+              <div>
+                  {!btn.btns.icons
+                      ?
+                      <button
+                          ref={btnEL}
+                          className={`text-sm px-5 py-3  ${btn.style}`}
+                      >
+                          Get Started
 
-                  </button>
-                  :
-                  <button
-                      ref={btnEL}
-                      onClick={() => copyToClipboard(btnEL, setCopySuccess)}
-                      className={`text-sm px-4 py-3 group inline-flex items-center ${btn.style}`}
-                  >
-                      Get Started
-                      <svg className={`flex-shrink-0 w-4 h-4 ml-3 ${btn.icon} ${btn.iconHover} group-hover:translate-x-1 transition-transform duration-500 ease-in`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z" /><path d="M13.172 12l-4.95-4.95 1.414-1.414L16 12l-6.364 6.364-1.414-1.414z" /></svg>
-                  </button>
-              }
+                      </button>
+                      :
+                      <button
+                          ref={btnEL}
+                          className={`text-sm px-4 py-3 group inline-flex items-center ${btn.style}`}
+                      >
+                          Get Started
+                          <svg className={`flex-shrink-0 w-4 h-4 ml-3 ${btn.icon} ${btn.iconHover} group-hover:translate-x-1 transition-transform duration-500 ease-in`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z" /><path d="M13.172 12l-4.95-4.95 1.414-1.414L16 12l-6.364 6.364-1.414-1.414z" /></svg>
+                      </button>
+                  }
 
+              </div>
           </div>
-          {CopySuccess  ? <span className='absolute inline-flex gap-1 py-2 text-sm -bottom-8'>Copied! <i className="ri-chat-smile-2-line animate-bounce"></i> </span> : ""}
-      </div>
-
+      </CodeVariant>
   );
 }

components/drip/buttons/buttonsCodeSnippets.js

@@ -0,0 +1,67 @@
+import { BasicBtns } from "./basicBtsns";
+import { ColoredShadowBtns } from "./coloredShadowBtns";
+
+const generateSnippets = (btnGroup, isIcon) => {
+  const snippets = {};
+
+  btnGroup.category.forEach(c => {
+    // Generate HTML
+    let html = '';
+    if (!isIcon) {
+      html = `<button class="text-sm px-5 py-3 ${c.style}">
+  Get Started
+</button>`;
+    } else {
+      html = `<button class="text-sm px-4 py-3 group inline-flex items-center ${c.style}">
+  Get Started
+  <svg class="flex-shrink-0 w-4 h-4 ml-3 ${c.icon || ''} ${c.iconHover || ''} group-hover:translate-x-1 transition-transform duration-500 ease-in" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path d="M13.172 12l-4.95-4.95 1.414-1.414L16 12l-6.364 6.364-1.414-1.414z" />
+  </svg>
+</button>`;
+    }
+
+    // Generate React
+    let react = '';
+    const componentName = `${c.name.charAt(0).toUpperCase() + c.name.slice(1)}Button`;
+
+    if (!isIcon) {
+      react = `import React from 'react';
+
+export default function ${componentName}() {
+  return (
+    <button className="text-sm px-5 py-3 ${c.style}">
+      Get Started
+    </button>
+  );
+}`;
+    } else {
+      react = `import React from 'react';
+
+export default function ${componentName}Icon() {
+  return (
+    <button className="text-sm px-4 py-3 group inline-flex items-center ${c.style}">
+      Get Started
+      <svg className="flex-shrink-0 w-4 h-4 ml-3 ${c.icon || ''} ${c.iconHover || ''} group-hover:translate-x-1 transition-transform duration-500 ease-in" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+        <path fill="none" d="M0 0h24v24H0z" />
+        <path d="M13.172 12l-4.95-4.95 1.414-1.414L16 12l-6.364 6.364-1.414-1.414z" />
+      </svg>
+    </button>
+  );
+}`;
+    }
+
+    snippets[c.id] = {
+      name: c.name,
+      html,
+      react,
+      nextjs: react
+    };
+  });
+
+  return snippets;
+};
+
+export const BasicBtnsSnippets = generateSnippets(BasicBtns[0], false);
+export const BasicIconsBtnsSnippets = generateSnippets(BasicBtns[0], true);
+export const ColoredShadowBtnsSnippets = generateSnippets(ColoredShadowBtns[0], false);

components/drip/cards/cardsCodeSnippets.js

@@ -0,0 +1,171 @@
+export const Card1Snippets = {
+  "default": {
+    name: "Default",
+    html: `<div class="flex flex-col w-full max-w-sm gap-2 p-4 rounded-lg shadow shadow-drip-black/30 cursor-pointer hover:shadow-lg">
+  <h3 class="text-2xl font-semibold tracking-tight">
+    Centering a div made easy with Tailwind CSS
+  </h3>
+  <p>
+    I have been working with Tailwind CSS and I wanted to quickly show
+    you how to center a div using Tailwind.
+  </p>
+</div>`,
+    react: `import React from 'react';
+
+export default function Card1() {
+  return (
+    <div className="flex flex-col w-full max-w-sm gap-2 p-4 rounded-lg shadow shadow-drip-black/30 cursor-pointer hover:shadow-lg">
+      <h3 className="text-2xl font-semibold tracking-tight">
+        Centering a div made easy with Tailwind CSS
+      </h3>
+      <p>
+        I have been working with Tailwind CSS and I wanted to quickly show
+        you how to center a div using Tailwind.
+      </p>
+    </div>
+  );
+}`
+  }
+};
+
+export const Card2Snippets = {
+  "default": {
+    name: "Default",
+    html: `<div class="flex flex-col w-full max-w-sm gap-2 p-4 rounded-lg shadow shadow-drip-black/30 cursor-pointer hover:shadow-lg">
+  <h3 class="text-2xl font-semibold tracking-tight">
+    Centering a div made easy with Tailwind CSS
+  </h3>
+  <p>
+    I have been working with Tailwind CSS and I wanted to quickly show
+    you how to center a div using Tailwind.
+  </p>
+  <button class="px-5 py-3 mt-1 text-sm text-white bg-gray-700 rounded-lg hover:bg-gray-700/90">
+    Read More
+  </button>
+</div>`,
+    react: `import React from 'react';
+
+export default function Card2() {
+  return (
+    <div className="flex flex-col w-full max-w-sm gap-2 p-4 rounded-lg shadow shadow-drip-black/30 cursor-pointer hover:shadow-lg">
+      <h3 className="text-2xl font-semibold tracking-tight">
+        Centering a div made easy with Tailwind CSS
+      </h3>
+      <p>
+        I have been working with Tailwind CSS and I wanted to quickly show
+        you how to center a div using Tailwind.
+      </p>
+      <button className="px-5 py-3 mt-1 text-sm text-white bg-gray-700 rounded-lg hover:bg-gray-700/90">
+        Read More
+      </button>
+    </div>
+  );
+}`
+  }
+};
+
+export const Card3Snippets = {
+  "default": {
+    name: "Default",
+    html: `<div class="flex flex-col w-full max-w-sm gap-2 p-4 rounded-lg shadow shadow-drip-black/30 cursor-pointer hover:shadow-lg">
+  <h3 class="text-2xl font-semibold tracking-tight">
+    Centering a div made easy with Tailwind CSS
+  </h3>
+  <p>
+    I have been working with Tailwind CSS and I wanted to quickly show
+    you how to center a div using Tailwind.
+  </p>
+  <div>
+    <button class="inline-flex items-center px-5 py-3 mt-1 text-sm text-white bg-gray-700 rounded-lg hover:bg-gray-700/90 group">
+      Read More
+      <svg
+        class="flex-shrink-0 w-4 h-4 ml-3 fill-white group-hover:translate-x-1"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        width="24"
+        height="24"
+      >
+        <path fill="none" d="M0 0h24v24H0z" />
+        <path d="M13.172 12l-4.95-4.95 1.414-1.414L16 12l-6.364 6.364-1.414-1.414z" />
+      </svg>
+    </button>
+  </div>
+</div>`,
+    react: `import React from 'react';
+
+export default function Card3() {
+  return (
+    <div className="flex flex-col w-full max-w-sm gap-2 p-4 rounded-lg shadow shadow-drip-black/30 cursor-pointer hover:shadow-lg">
+      <h3 className="text-2xl font-semibold tracking-tight">
+        Centering a div made easy with Tailwind CSS
+      </h3>
+      <p>
+        I have been working with Tailwind CSS and I wanted to quickly show
+        you how to center a div using Tailwind.
+      </p>
+      <div>
+        <button className="inline-flex items-center px-5 py-3 mt-1 text-sm text-white bg-gray-700 rounded-lg hover:bg-gray-700/90 group">
+          Read More
+          <svg
+            className="flex-shrink-0 w-4 h-4 ml-3 fill-white group-hover:translate-x-1"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            width="24"
+            height="24"
+          >
+            <path fill="none" d="M0 0h24v24H0z" />
+            <path d="M13.172 12l-4.95-4.95 1.414-1.414L16 12l-6.364 6.364-1.414-1.414z" />
+          </svg>
+        </button>
+      </div>
+    </div>
+  );
+}`
+  }
+};
+
+export const Card4Snippets = {
+  "default": {
+    name: "Default",
+    html: `<div class="flex flex-col w-full max-w-sm gap-2 rounded-lg shadow shadow-drip-black/30 cursor-pointer hover:shadow-lg">
+  <img
+    class="object-cover object-center rounded-t-lg h-72"
+    src="https://images.pexels.com/photos/1858175/pexels-photo-1858175.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
+    alt="default card"
+  />
+
+  <div class="p-4">
+    <h3 class="mb-2 text-2xl font-semibold tracking-tight">
+      Centering a div made easy with Tailwind CSS
+    </h3>
+    <p>
+      I have been working with Tailwind CSS and I wanted to quickly
+      show you how to center a div using Tailwind.
+    </p>
+  </div>
+</div>`,
+    react: `import React from 'react';
+
+export default function Card4() {
+  return (
+    <div className="flex flex-col w-full max-w-sm gap-2 rounded-lg shadow shadow-drip-black/30 cursor-pointer hover:shadow-lg">
+      <img
+        className="object-cover object-center rounded-t-lg h-72"
+        src="https://images.pexels.com/photos/1858175/pexels-photo-1858175.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
+        alt="default card"
+      />
+
+      <div className="p-4">
+        <h3 className="mb-2 text-2xl font-semibold tracking-tight">
+          Centering a div made easy with Tailwind CSS
+        </h3>
+        <p>
+          I have been working with Tailwind CSS and I wanted to quickly
+          show you how to center a div using Tailwind.
+        </p>
+      </div>
+    </div>
+  );
+}`
+  }
+};