diff --git a/components/drip/alert/alertCodeSnippets.js b/components/drip/alert/alertCodeSnippets.js new file mode 100644 index 0000000..9a96807 --- /dev/null +++ b/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 = ``; + } else { + html = ``; + } + + // Determine the React string + let react = ''; + if (componentType === 'icon') { + react = `import React from 'react'; + +export default function ${item.span}${arrayName}() { + return ( +
+ + ${item.span} ${item.text.replace('alert!', '')} +
+ ); +}`; + } else { + react = `import React from 'react'; + +export default function ${item.span}${arrayName}() { + return ( +
+ ${item.span} ${item.text.replace('alert!', '')} +
+ ); +}`; + } + + 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'); diff --git a/components/drip/buttons/SingleButton.js b/components/drip/buttons/SingleButton.js index 76212b0..6b1d1f3 100644 --- a/components/drip/buttons/SingleButton.js +++ b/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 ( -
- {/* button */} -
- {!btn.btns.icons - ? - - : - - } + + : + + } +
- {CopySuccess ? Copied! : ""} - - + ); } \ No newline at end of file diff --git a/components/drip/buttons/buttonsCodeSnippets.js b/components/drip/buttons/buttonsCodeSnippets.js new file mode 100644 index 0000000..6e419a3 --- /dev/null +++ b/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 = ``; + } else { + html = ``; + } + + // 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 ( + + ); +}`; + } else { + react = `import React from 'react'; + +export default function ${componentName}Icon() { + return ( + + ); +}`; + } + + 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); diff --git a/components/drip/cards/cardsCodeSnippets.js b/components/drip/cards/cardsCodeSnippets.js new file mode 100644 index 0000000..1cfffa2 --- /dev/null +++ b/components/drip/cards/cardsCodeSnippets.js @@ -0,0 +1,171 @@ +export const Card1Snippets = { + "default": { + name: "Default", + html: `
+

+ Centering a div made easy with Tailwind CSS +

+

+ I have been working with Tailwind CSS and I wanted to quickly show + you how to center a div using Tailwind. +

+
`, + react: `import React from 'react'; + +export default function Card1() { + return ( +
+

+ Centering a div made easy with Tailwind CSS +

+

+ I have been working with Tailwind CSS and I wanted to quickly show + you how to center a div using Tailwind. +

+
+ ); +}` + } +}; + +export const Card2Snippets = { + "default": { + name: "Default", + html: `
+

+ Centering a div made easy with Tailwind CSS +

+

+ I have been working with Tailwind CSS and I wanted to quickly show + you how to center a div using Tailwind. +

+ +
`, + react: `import React from 'react'; + +export default function Card2() { + return ( +
+

+ Centering a div made easy with Tailwind CSS +

+

+ I have been working with Tailwind CSS and I wanted to quickly show + you how to center a div using Tailwind. +

+ +
+ ); +}` + } +}; + +export const Card3Snippets = { + "default": { + name: "Default", + html: `
+

+ Centering a div made easy with Tailwind CSS +

+

+ I have been working with Tailwind CSS and I wanted to quickly show + you how to center a div using Tailwind. +

+
+ +
+
`, + react: `import React from 'react'; + +export default function Card3() { + return ( +
+

+ Centering a div made easy with Tailwind CSS +

+

+ I have been working with Tailwind CSS and I wanted to quickly show + you how to center a div using Tailwind. +

+
+ +
+
+ ); +}` + } +}; + +export const Card4Snippets = { + "default": { + name: "Default", + html: `
+ default card + +
+

+ Centering a div made easy with Tailwind CSS +

+

+ I have been working with Tailwind CSS and I wanted to quickly + show you how to center a div using Tailwind. +

+
+
`, + react: `import React from 'react'; + +export default function Card4() { + return ( +
+ default card + +
+

+ Centering a div made easy with Tailwind CSS +

+

+ I have been working with Tailwind CSS and I wanted to quickly + show you how to center a div using Tailwind. +

+
+
+ ); +}` + } +}; diff --git a/components/drip/footer/Footer.js b/components/drip/footer/Footer.js index 54900b2..17af39a 100644 --- a/components/drip/footer/Footer.js +++ b/components/drip/footer/Footer.js @@ -1,59 +1,29 @@ -import copyToClipboard from "../../../utils/function/copyToClipBoard"; -import { useRef, useState } from "react"; -function Footer() { - - const footerRef = useRef(null); - const [copySuccess, setCopySuccess] = useState(false); - console.log(copySuccess) +export default function Footer() { return ( -
-
-
-
- - - DripUI - - -
-
- © 2022 DripUI™. All Rights Reserved. - -
+
+
+ + + DripUI + +
- - - - { - copySuccess && - - Copied! {" "} - - } +
+ © 2022 DripUI™. All Rights Reserved. +
- ) } - -export default Footer diff --git a/components/drip/footer/LogoFooter.js b/components/drip/footer/LogoFooter.js index f210f81..c09f9de 100644 --- a/components/drip/footer/LogoFooter.js +++ b/components/drip/footer/LogoFooter.js @@ -1,66 +1,38 @@ -import copyToClipboard from "../../../utils/function/copyToClipBoard"; -import { useRef, useState } from "react"; -function LogoFooter() { - - const footerRef = useRef(null); - const [copySuccess, setCopySuccess] = useState(false); - console.log(copySuccess) +export default function LogoFooter() { return ( -
-
-
- - -
- - - -
+
+
+
+ DripUI +

DripUI - Tailwind css components

+

A collection of free UI components to help you develop your components

- © 2022 DripUI™. All Rights Reserved. - +
+ + + +
- - - - { - copySuccess && - - Copied! {" "} - - } + © 2022 DripUI™. All Rights Reserved. +
- ) } - -export default LogoFooter; diff --git a/components/drip/footer/footersCodeSnippets.js b/components/drip/footer/footersCodeSnippets.js new file mode 100644 index 0000000..1e31689 --- /dev/null +++ b/components/drip/footer/footersCodeSnippets.js @@ -0,0 +1,139 @@ +export const BasicFooterSnippets = { + "default": { + name: "Default", + html: `
+
+ + DripUI + + +
+
+ © 2022 DripUI™. All Rights Reserved. + +
`, + react: `import React from 'react'; + +export default function Footer() { + return ( +
+
+ + DripUI + + +
+
+ © 2022 DripUI™. All Rights Reserved. + +
+ ); +}` + } +}; + +export const LogoFooterSnippets = { + "default": { + name: "Default", + html: `
+
+ + +
+ + + +
+
+ © 2022 DripUI™. All Rights Reserved. + +
`, + react: `import React from 'react'; + +export default function LogoFooter() { + return ( +
+
+
+ DripUI +

DripUI - Tailwind css components

+

A collection of free UI components to help you develop your components

+
+ +
+ + + +
+
+ © 2022 DripUI™. All Rights Reserved. + +
+ ); +}` + } +}; diff --git a/components/drip/grid/animatedGrid.js b/components/drip/grid/animatedGrid.js index 515846a..e403c5a 100644 --- a/components/drip/grid/animatedGrid.js +++ b/components/drip/grid/animatedGrid.js @@ -1,177 +1,120 @@ -import copyToClipboard from "../../../utils/function/copyToClipBoard"; -import { useRef, useState } from "react"; - - export default function AnimatedGrid() { + return ( +
+
+ +
+
+
+ +
+

+ Feature one +

+

+ A brief introduction to our core features and services, helping you understand how to integrate and utilize the platform effectively. +

+
+
+ - const gridRef = useRef(null); - const [copySuccess, setCopySuccess] = useState(false); + +
+
+
+ +
+

+ Feature two +

+

+ Step-by-step instructions to seamlessly integrate us into your systems, coveborder API usage, configuration, and testing. +

+
+
+ + +
+
+
+ +
+

+ Feature three +

+

+ Detailed information on how to implement and process direct payments using us, including supported payment methods. +

+
+
+ - return ( - <> + +
+
+
+ +
+

+ Feature four +

+

+ A log of all recent updates, bug fixes, and improvements to our platform and API. +

+
+
+ + + +
+
+
+ +
+

+ Feature five +

+

+ Guide to setting up and managing our webhooks, enabling real-time notifications for payment events and other system updates. +

+
+
+ - + +
+
+
+ +
+

+ Feature six +

+

+ Frequently asked questions to help troubleshoot common issues and provide quick answers about our services. +

+
+
+ - { - copySuccess && - - Copied! {" "} - - } + +
+
+
+ +
-
-
- -
-
-
- -
-

- Feature one -

-

- A brief introduction to our core features and services, - helping you understand how to integrate and utilize the platform - effectively. -

-
-
- - - -
-
-
- -
-

- Feature two -

-

- Step-by-step instructions to seamlessly integrate us into your - systems, coveborder API usage, configuration, and testing. -

-
-
- - - -
-
-
- -
-

- Feature three -

-

- Detailed information on how to implement and process direct - payments using us, including supported payment methods. -

-
-
- - - -
-
-
- -
-

- Feature four -

-

- A log of all recent updates, bug fixes, and improvements to - our platform and API. -

-
-
- - - -
-
-
- -
-

- Feature five -

-

- Guide to setting up and managing our webhooks, enabling - real-time notifications for payment events and other system - updates. -

-
-
- - - -
-
-
- -
-

- Feature six -

-

- Frequently asked questions to help troubleshoot common issues - and provide quick answers about our services. -

-
-
- - - -
-
-
- -
- -

- feature seven -

-

- Key security considerations and best practices to protect your - transactions and customer data when using our. -

-
-
- -
+

+ feature seven +

+

+ Key security considerations and best practices to protect your transactions and customer data when using our. +

- - ); - } - \ No newline at end of file +
+ +
+
+ ); +} \ No newline at end of file diff --git a/components/drip/grid/gridCodeSnippets.js b/components/drip/grid/gridCodeSnippets.js new file mode 100644 index 0000000..9bde334 --- /dev/null +++ b/components/drip/grid/gridCodeSnippets.js @@ -0,0 +1,241 @@ +export const AnimatedGridSnippets = { + "default": { + name: "Default", + html: `
+
+ +
+
+
+ +
+

+ Feature one +

+

+ A brief introduction to our core features and services, helping you understand how to integrate and utilize the platform effectively. +

+
+
+ + + +
+
+
+ +
+

+ Feature two +

+

+ Step-by-step instructions to seamlessly integrate us into your systems, coveborder API usage, configuration, and testing. +

+
+
+ + + +
+
+
+ +
+

+ Feature three +

+

+ Detailed information on how to implement and process direct payments using us, including supported payment methods. +

+
+
+ + + +
+
+
+ +
+

+ Feature four +

+

+ A log of all recent updates, bug fixes, and improvements to our platform and API. +

+
+
+ + + +
+
+
+ +
+

+ Feature five +

+

+ Guide to setting up and managing our webhooks, enabling real-time notifications for payment events and other system updates. +

+
+
+ + + +
+
+
+ +
+

+ Feature six +

+

+ Frequently asked questions to help troubleshoot common issues and provide quick answers about our services. +

+
+
+ + + +
+
+
+ +
+

+ feature seven +

+

+ Key security considerations and best practices to protect your transactions and customer data when using our. +

+
+
+ +
+
`, + react: `import React from 'react'; + +export default function AnimatedGrid() { + return ( +
+
+ +
+
+
+ +
+

+ Feature one +

+

+ A brief introduction to our core features and services, helping you understand how to integrate and utilize the platform effectively. +

+
+
+ + + +
+
+
+ +
+

+ Feature two +

+

+ Step-by-step instructions to seamlessly integrate us into your systems, coveborder API usage, configuration, and testing. +

+
+
+ + + +
+
+
+ +
+

+ Feature three +

+

+ Detailed information on how to implement and process direct payments using us, including supported payment methods. +

+
+
+ + + +
+
+
+ +
+

+ Feature four +

+

+ A log of all recent updates, bug fixes, and improvements to our platform and API. +

+
+
+ + + +
+
+
+ +
+

+ Feature five +

+

+ Guide to setting up and managing our webhooks, enabling real-time notifications for payment events and other system updates. +

+
+
+ + + +
+
+
+ +
+

+ Feature six +

+

+ Frequently asked questions to help troubleshoot common issues and provide quick answers about our services. +

+
+
+ + + +
+
+
+ +
+

+ feature seven +

+

+ Key security considerations and best practices to protect your transactions and customer data when using our. +

+
+
+ +
+
+ ); +}` + } +}; diff --git a/components/drip/navbar/Navbar.js b/components/drip/navbar/Navbar.js index 9db615b..b757b65 100644 --- a/components/drip/navbar/Navbar.js +++ b/components/drip/navbar/Navbar.js @@ -1,60 +1,49 @@ import Link from "next/link"; -import { useRef, useState } from "react"; -import copyToClipboard from "../../../utils/function/copyToClipBoard"; +import { useState } from "react"; import { Desktop } from "./icons"; import Mobile from "./icons/Mobile"; +import { CodeVariant } from "../../other/CodePanel"; export default function Navbar({ navbar }) { - const navEL = useRef(null); - const [CopySuccess, setCopySuccess] = useState(false); - const [btnId, setBtnId] = useState(); const [desktopPreview, setDesktopPreview] = useState(true); return (
-

{navbar.type}

-
-
- - setDesktopPreview(true) } /> - setDesktopPreview(false) } /> +

{navbar.type}

+ + {navbar.category.map((nav) => ( + +
+
+ + setDesktopPreview(true) } /> + setDesktopPreview(false) } /> +
+
- {navbar.category.map((nav) => ( - - ))} - - {CopySuccess && ( - - Copied! {" "} - - )} -
+ + ))}
); } diff --git a/components/drip/navbar/navbarsCodeSnippets.js b/components/drip/navbar/navbarsCodeSnippets.js new file mode 100644 index 0000000..8a243af --- /dev/null +++ b/components/drip/navbar/navbarsCodeSnippets.js @@ -0,0 +1,50 @@ +import { basicNavbars } from "./basicNavbars"; + +const generateSnippets = (navData) => { + const snippets = {}; + + navData.forEach((navbarObj, index) => { + navbarObj.category.forEach(nav => { + // HTML snippet logic for the specific navbar + const html = ``; + + // React Snippet logic + const react = `import React from 'react'; + +export default function Navbar() { + return ( + + ); +}`; + + snippets[nav.id] = { + name: \`Variant \${index + 1}\`, + html, + react, + nextjs: react + }; + }); + }); + + return snippets; +}; + +export const NavbarsSnippets = generateSnippets(basicNavbars); diff --git a/components/drip/signin/signinCodeSnippets.js b/components/drip/signin/signinCodeSnippets.js new file mode 100644 index 0000000..0733394 --- /dev/null +++ b/components/drip/signin/signinCodeSnippets.js @@ -0,0 +1,128 @@ +export const SigninSnippets = { + "default": { + name: "Default", + html: `
+
+ + + +
+ Logo +

Welcome back

+

Please enter your details to sign in.

+
+
+ + + +
+
+
+ OR +
+
+
+
+ + +
+
+ + + +
+
+ + Forgot password? +
+ +
+
+

Don't have an account yet? Sign Up

+
+
+
`, + react: `import React, { useState } from "react"; +import { FaApple, FaEye, FaEyeSlash, FaTwitter } from "react-icons/fa"; +import { IoMdCloseCircle } from "react-icons/io"; +import { FcGoogle } from "react-icons/fc"; + +export default function Signin({ handleClose }) { + const [showPassword, setShowPassword] = useState(false); + + return ( +
+
+ + + +
+ Logo +

Welcome back

+

Please enter your details to sign in.

+
+
+ + + +
+
+
+ OR +
+
+
+
+ + +
+
+ + + +
+
+ + Forgot password? +
+ +
+
+

Don't have an account yet?{" "} + Sign Up +

+
+
+
+ ); +}` + } +}; diff --git a/components/other/CodePanel.js b/components/other/CodePanel.js new file mode 100644 index 0000000..81b7b9b --- /dev/null +++ b/components/other/CodePanel.js @@ -0,0 +1,120 @@ +import React, { useState, useEffect, useContext } from 'react'; +import Editor from '@monaco-editor/react'; + +export const ActiveVariantContext = React.createContext(); + +export function CodeVariant({ id, children }) { + const { activeVariant, setActiveVariant, copyVariant } = useContext(ActiveVariantContext); + + const isSelected = activeVariant === id; + + return ( +
{ e.stopPropagation(); setActiveVariant(id); }} + onDoubleClick={(e) => { e.stopPropagation(); copyVariant(id); }} + className={`transition-all duration-200 cursor-pointer rounded-md p-1 border-2 ${isSelected ? 'border-blue-400 bg-blue-50/20 ring-4 ring-blue-400/20' : 'border-transparent hover:border-gray-300 hover:bg-gray-50'}`} + > + {children} +
+ ); +} + +export default function CodePanel({ children, snippets, title }) { + const [activeTab, setActiveTab] = useState('html'); + const [copied, setCopied] = useState(false); + + // Use the first snippet key as the default active variant if snippets exist + const variantKeys = Object.keys(snippets); + const defaultVariant = variantKeys.length > 0 ? variantKeys[0] : null; + const [activeVariant, setActiveVariant] = useState(defaultVariant); + + const currentSnippetGroup = snippets[activeVariant] || snippets[defaultVariant] || {}; + const currentCode = currentSnippetGroup[activeTab] || ''; + + const handleCopy = async (overrideCode = null) => { + try { + await navigator.clipboard.writeText(overrideCode || currentCode); + setCopied(true); + setTimeout(() => setCopied(false), 2000); + } catch (err) { + console.error('Failed to copy', err); + } + }; + + const copyVariant = (id) => { + setActiveVariant(id); + const codeToCopy = snippets[id] && snippets[id][activeTab]; + if (codeToCopy) { + handleCopy(codeToCopy); + } + }; + + const activeName = currentSnippetGroup.name || activeVariant; + + return ( + +
+
+

Click to select a variant. Double click to quickly copy.

+
+
+ {children} +
+ +
+
+
+
+ {['html', 'react', 'nextjs'].map((tab) => ( + currentSnippetGroup[tab] && ( + + ) + ))} +
+ {activeName && ( + + {activeName} + + )} +
+
+ +
+
+
+ +
+
+
+ + ); +} diff --git a/package-lock.json b/package-lock.json index 025fd42..bbda111 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,8 @@ "name": "drip-ui", "version": "0.1.0", "dependencies": { + "@monaco-editor/react": "^4.7.0", + "@stackblitz/sdk": "^1.11.0", "next": "12.2.3", "react": "18.2.0", "react-dom": "18.2.0", @@ -87,6 +89,29 @@ "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==", "dev": true }, + "node_modules/@monaco-editor/loader": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.7.0.tgz", + "integrity": "sha512-gIwR1HrJrrx+vfyOhYmCZ0/JcWqG5kbfG7+d3f/C1LXk2EvzAbHSg3MQ5lO2sMlo9izoAZ04shohfKLVT6crVA==", + "license": "MIT", + "dependencies": { + "state-local": "^1.0.6" + } + }, + "node_modules/@monaco-editor/react": { + "version": "4.7.0", + "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.7.0.tgz", + "integrity": "sha512-cyzXQCtO47ydzxpQtCGSQGOC8Gk3ZUeBXFAxD+CWXYFo5OqZyZUonFl0DwUlTyAfRHntBfw2p3w4s9R6oe1eCA==", + "license": "MIT", + "dependencies": { + "@monaco-editor/loader": "^1.5.0" + }, + "peerDependencies": { + "monaco-editor": ">= 0.25.0 < 1", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/@next/env": { "version": "12.2.3", "resolved": "https://registry.npmjs.org/@next/env/-/env-12.2.3.tgz", @@ -337,6 +362,12 @@ "integrity": "sha512-LwzQKA4vzIct1zNZzBmRKI9QuNpLgTQMEjsQLf3BXuGYb3QPTP4Yjf6mkdX+X1mYttZ808QpOwAzZjv28kq7DA==", "dev": true }, + "node_modules/@stackblitz/sdk": { + "version": "1.11.0", + "resolved": "https://registry.npmjs.org/@stackblitz/sdk/-/sdk-1.11.0.tgz", + "integrity": "sha512-DFQGANNkEZRzFk1/rDP6TcFdM82ycHE+zfl9C/M/jXlH68jiqHWHFMQURLELoD8koxvu/eW5uhg94NSAZlYrUQ==", + "license": "MIT" + }, "node_modules/@swc/helpers": { "version": "0.4.3", "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.3.tgz", @@ -351,6 +382,14 @@ "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==", "dev": true }, + "node_modules/@types/trusted-types": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz", + "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==", + "license": "MIT", + "optional": true, + "peer": true + }, "node_modules/@typescript-eslint/parser": { "version": "5.31.0", "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.31.0.tgz", @@ -1036,6 +1075,16 @@ "node": ">=6.0.0" } }, + "node_modules/dompurify": { + "version": "3.2.7", + "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.7.tgz", + "integrity": "sha512-WhL/YuveyGXJaerVlMYGWhvQswa7myDG17P7Vu65EWC05o8vfeNbvNf4d/BOvH99+ZW+LlQsc1GDKMa1vNK6dw==", + "license": "(MPL-2.0 OR Apache-2.0)", + "peer": true, + "optionalDependencies": { + "@types/trusted-types": "^2.0.7" + } + }, "node_modules/electron-to-chromium": { "version": "1.4.206", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.206.tgz", @@ -2321,6 +2370,19 @@ "node": ">=10" } }, + "node_modules/marked": { + "version": "14.0.0", + "resolved": "https://registry.npmjs.org/marked/-/marked-14.0.0.tgz", + "integrity": "sha512-uIj4+faQ+MgHgwUW1l2PsPglZLOLOT1uErt06dAPtx2kjteLAkbsd/0FiYg/MGS+i7ZKLb7w2WClxHkzOOuryQ==", + "license": "MIT", + "peer": true, + "bin": { + "marked": "bin/marked.js" + }, + "engines": { + "node": ">= 18" + } + }, "node_modules/merge2": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", @@ -2361,6 +2423,17 @@ "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==", "dev": true }, + "node_modules/monaco-editor": { + "version": "0.55.1", + "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.55.1.tgz", + "integrity": "sha512-jz4x+TJNFHwHtwuV9vA9rMujcZRb0CEilTEwG2rRSpe/A7Jdkuj8xPKttCgOh+v/lkHy7HsZ64oj+q3xoAFl9A==", + "license": "MIT", + "peer": true, + "dependencies": { + "dompurify": "3.2.7", + "marked": "14.0.0" + } + }, "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", @@ -3148,6 +3221,12 @@ "node": ">=0.10.0" } }, + "node_modules/state-local": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz", + "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==", + "license": "MIT" + }, "node_modules/string.prototype.matchall": { "version": "4.0.7", "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.7.tgz", @@ -3600,6 +3679,22 @@ "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==", "dev": true }, + "@monaco-editor/loader": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.7.0.tgz", + "integrity": "sha512-gIwR1HrJrrx+vfyOhYmCZ0/JcWqG5kbfG7+d3f/C1LXk2EvzAbHSg3MQ5lO2sMlo9izoAZ04shohfKLVT6crVA==", + "requires": { + "state-local": "^1.0.6" + } + }, + "@monaco-editor/react": { + "version": "4.7.0", + "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.7.0.tgz", + "integrity": "sha512-cyzXQCtO47ydzxpQtCGSQGOC8Gk3ZUeBXFAxD+CWXYFo5OqZyZUonFl0DwUlTyAfRHntBfw2p3w4s9R6oe1eCA==", + "requires": { + "@monaco-editor/loader": "^1.5.0" + } + }, "@next/env": { "version": "12.2.3", "resolved": "https://registry.npmjs.org/@next/env/-/env-12.2.3.tgz", @@ -3724,6 +3819,11 @@ "integrity": "sha512-LwzQKA4vzIct1zNZzBmRKI9QuNpLgTQMEjsQLf3BXuGYb3QPTP4Yjf6mkdX+X1mYttZ808QpOwAzZjv28kq7DA==", "dev": true }, + "@stackblitz/sdk": { + "version": "1.11.0", + "resolved": "https://registry.npmjs.org/@stackblitz/sdk/-/sdk-1.11.0.tgz", + "integrity": "sha512-DFQGANNkEZRzFk1/rDP6TcFdM82ycHE+zfl9C/M/jXlH68jiqHWHFMQURLELoD8koxvu/eW5uhg94NSAZlYrUQ==" + }, "@swc/helpers": { "version": "0.4.3", "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.3.tgz", @@ -3738,6 +3838,13 @@ "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==", "dev": true }, + "@types/trusted-types": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz", + "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==", + "optional": true, + "peer": true + }, "@typescript-eslint/parser": { "version": "5.31.0", "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.31.0.tgz", @@ -4192,6 +4299,15 @@ "esutils": "^2.0.2" } }, + "dompurify": { + "version": "3.2.7", + "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.7.tgz", + "integrity": "sha512-WhL/YuveyGXJaerVlMYGWhvQswa7myDG17P7Vu65EWC05o8vfeNbvNf4d/BOvH99+ZW+LlQsc1GDKMa1vNK6dw==", + "peer": true, + "requires": { + "@types/trusted-types": "^2.0.7" + } + }, "electron-to-chromium": { "version": "1.4.206", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.206.tgz", @@ -5158,6 +5274,12 @@ "yallist": "^4.0.0" } }, + "marked": { + "version": "14.0.0", + "resolved": "https://registry.npmjs.org/marked/-/marked-14.0.0.tgz", + "integrity": "sha512-uIj4+faQ+MgHgwUW1l2PsPglZLOLOT1uErt06dAPtx2kjteLAkbsd/0FiYg/MGS+i7ZKLb7w2WClxHkzOOuryQ==", + "peer": true + }, "merge2": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", @@ -5189,6 +5311,16 @@ "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==", "dev": true }, + "monaco-editor": { + "version": "0.55.1", + "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.55.1.tgz", + "integrity": "sha512-jz4x+TJNFHwHtwuV9vA9rMujcZRb0CEilTEwG2rRSpe/A7Jdkuj8xPKttCgOh+v/lkHy7HsZ64oj+q3xoAFl9A==", + "peer": true, + "requires": { + "dompurify": "3.2.7", + "marked": "14.0.0" + } + }, "ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", @@ -5702,6 +5834,11 @@ "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==" }, + "state-local": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz", + "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==" + }, "string.prototype.matchall": { "version": "4.0.7", "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.7.tgz", diff --git a/package.json b/package.json index d8b2751..c83cd30 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,8 @@ "lint": "next lint" }, "dependencies": { + "@monaco-editor/react": "^4.7.0", + "@stackblitz/sdk": "^1.11.0", "next": "12.2.3", "react": "18.2.0", "react-dom": "18.2.0", diff --git a/pages/docs/alerts.js b/pages/docs/alerts.js index 733e76b..f614b6e 100644 --- a/pages/docs/alerts.js +++ b/pages/docs/alerts.js @@ -9,28 +9,10 @@ import { IconAlert, } from "../../components/drip/alert/alertData"; -export default function Alerts() { - const [CopySuccess, setCopySuccess] = useState(false); - const [alertId, setAlertId] = useState(""); - const alertDataRef = useRef({}); +import CodePanel, { CodeVariant } from "../../components/other/CodePanel"; +import { SolidAlertSnippets, SoftColorSnippets, RoundBorderSnippets, IconAlertSnippets } from "../../components/drip/alert/alertCodeSnippets"; - const copyToClipboard = async (el, btnId) => { - try { - const selectedDiv = alertDataRef.current[btnId]; - if (selectedDiv) { - await navigator.clipboard.writeText(selectedDiv.outerHTML); - setCopySuccess(true); - setAlertId(el); - } - } catch (error) { - setCopySuccess(false); - setAlertId(""); - } - setTimeout(() => { - setCopySuccess(false); - setAlertId(""); - }, 4000); - }; +export default function Alerts() { return ( <> @@ -50,119 +32,59 @@ export default function Alerts() { } /> -
+
{/* Solid Color Alerts */} -
-

- Solid color alerts  {" "} - {CopySuccess && alertId === "Solid" ? ( - - Copied! {" "} - - ) : ( - "" - )} -

- -
+ +
{SolidAlert.map((btn) => ( - + +
+ {btn.span} {btn.text} +
+ ))}
-
+ {/* Soft Color Alerts */} -
-

- Soft color alerts.  {" "} - {CopySuccess && alertId === "Soft" ? ( - - Copied! {" "} - - ) : ( - "" - )} -

- -
+ +
{SoftColor.map((btn) => ( - + +
+ {btn.span} {btn.text} +
+ ))}
-
+ {/* Alerts with Round Border */} -
-

- Round Border Alerts.  {" "} - {CopySuccess && alertId === "Round" ? ( - - Copied! {" "} - - ) : ( - "" - )} -

- -
+ +
{RoundBorder.map((btn) => ( - + +
+ {btn.span} {btn.text} +
+ ))}
-
+ {/* Alerts with Icon */} -
-

- Round Border with Icons Alerts.  {" "} - {CopySuccess && alertId === "Icons" ? ( - - Copied! {" "} - - ) : ( - "" - )} -

- -
+ +
{IconAlert.map((btn) => ( - + +
+ + {btn.span} {btn.text} +
+ ))}
-
+
); diff --git a/pages/docs/buttons.js b/pages/docs/buttons.js index 9cf6335..587a287 100644 --- a/pages/docs/buttons.js +++ b/pages/docs/buttons.js @@ -5,6 +5,8 @@ import Button from "../../components/drip/buttons/Button"; import { ColoredShadowBtns } from "../../components/drip/buttons/coloredShadowBtns"; import Meta from "../../components/layout/meta"; import PageHeading from "../../components/other/PageHeadings"; +import CodePanel from "../../components/other/CodePanel"; +import { BasicBtnsSnippets, BasicIconsBtnsSnippets, ColoredShadowBtnsSnippets } from "../../components/drip/buttons/buttonsCodeSnippets"; export default function Buttons() { return ( @@ -24,20 +26,26 @@ export default function Buttons() { } /> -
-
+
+
{BasicBtns.map((btn) => ( -
-
+
{ColoredShadowBtns.map((btn) => ( -
diff --git a/pages/docs/cards.js b/pages/docs/cards.js index 19b1cb2..cd164c6 100644 --- a/pages/docs/cards.js +++ b/pages/docs/cards.js @@ -3,28 +3,10 @@ import { useRef, useState } from "react"; import Meta from "../../components/layout/meta"; import PageHeading from "../../components/other/PageHeadings"; -export default function Cards() { - const cardAreaRef1 = useRef(null); - const cardAreaRef2 = useRef(null); - const cardAreaRef3 = useRef(null); - const cardAreaRef4 = useRef(null); - const [CopySuccess, setCopySuccess] = useState(false); - const [cardId, setCardId] = useState(); +import CodePanel, { CodeVariant } from "../../components/other/CodePanel"; +import { Card1Snippets, Card2Snippets, Card3Snippets, Card4Snippets } from "../../components/drip/cards/cardsCodeSnippets"; - const copyToClipboard = async (El, cardId) => { - setCopySuccess(false); - try { - await navigator.clipboard.writeText(El.current.outerHTML); - setCopySuccess(true); - setCardId(cardId); - } catch (error) { - setCopySuccess(false); - } - setTimeout(() => { - setCopySuccess(false); - setCardId(); - }, 4000); - }; +export default function Cards() { return ( <> @@ -42,131 +24,90 @@ export default function Cards() { "The Card component is used to show data and various information to users; such as blog post, user profiles, image galleries and many more." } /> -
- {/* */} -
copyToClipboard(cardAreaRef1, "card1")} - className="relative flex flex-col gap-2 " - > - {/*

Default Card

*/} -
-

- Centering a div made easy with Tailwind CSS -

-

- I have been working with Tailwind CSS and I wanted to quickly show - you how to center a div using Tailwind. -

-
- {CopySuccess && cardId == "card1" ? ( - - Copied! {" "} - - ) : ( - "" - )} -
- -
copyToClipboard(cardAreaRef2, "card2")} - className="relative flex flex-col gap-2 " - > - {/*

Default Card + btn

*/} -
-

- Centering a div made easy with Tailwind CSS -

-

- I have been working with Tailwind CSS and I wanted to quickly show - you how to center a div using Tailwind. -

- -
- {CopySuccess && cardId == "card2" ? ( - - Copied! {" "} - - ) : ( - "" - )} -
+
+ + +
+

+ Centering a div made easy with Tailwind CSS +

+

+ I have been working with Tailwind CSS and I wanted to quickly show + you how to center a div using Tailwind. +

+
+ + -
copyToClipboard(cardAreaRef3, "card3")} - className="relative flex flex-col gap-2 " - > - {/*

Default Card + btn

*/} -
-

- Centering a div made easy with Tailwind CSS -

-

- I have been working with Tailwind CSS and I wanted to quickly show - you how to center a div using Tailwind. -

-
-
-
- {CopySuccess && cardId == "card3" ? ( - - Copied! {" "} - - ) : ( - "" - )} -
+ + -
copyToClipboard(cardAreaRef4, "card4")} - className="relative flex flex-col gap-2 " - > - {/*

Default Card

*/} -
- default card - -
-

+ + +
+

Centering a div made easy with Tailwind CSS

- I have been working with Tailwind CSS and I wanted to quickly - show you how to center a div using Tailwind. + I have been working with Tailwind CSS and I wanted to quickly show + you how to center a div using Tailwind.

+
+ +
+
+ + + + + +
+ default card + +
+

+ Centering a div made easy with Tailwind CSS +

+

+ I have been working with Tailwind CSS and I wanted to quickly + show you how to center a div using Tailwind. +

+
-

- {CopySuccess && cardId == "card4" ? ( - - Copied! {" "} - - ) : ( - "" - )} -
+ +
); diff --git a/pages/docs/footers.js b/pages/docs/footers.js index d17ef61..b0a47c7 100644 --- a/pages/docs/footers.js +++ b/pages/docs/footers.js @@ -2,6 +2,8 @@ import Meta from "../../components/layout/meta" import PageHeading from "../../components/other/PageHeadings" import Footer from "../../components/drip/footer/Footer" import LogoFooter from "../../components/drip/footer/LogoFooter" +import CodePanel, { CodeVariant } from "../../components/other/CodePanel" +import { BasicFooterSnippets, LogoFooterSnippets } from "../../components/drip/footer/footersCodeSnippets" export default function Footers(){ return( @@ -27,12 +29,20 @@ export default function Footers(){ {/* Foorter #1 */}

Basic strip footer with links and Copyright

-
+ + +
+ +

Footer with a logo section and important links

- + + + + +
diff --git a/pages/docs/grids.js b/pages/docs/grids.js index 3b08a84..1502091 100644 --- a/pages/docs/grids.js +++ b/pages/docs/grids.js @@ -1,7 +1,8 @@ import Meta from "../../components/layout/meta" import PageHeading from "../../components/other/PageHeadings" -import LogoFooter from "../../components/drip/footer/LogoFooter" import AnimatedGrid from "../../components/drip/grid/animatedGrid" +import CodePanel, { CodeVariant } from "../../components/other/CodePanel" +import { AnimatedGridSnippets } from "../../components/drip/grid/gridCodeSnippets" export default function Grids(){ return( @@ -25,10 +26,13 @@ export default function Grids(){

Animated Grid

- {/* Grid #1 */}

A dynamic and visually engaging way to highlight key features or services on your website.

- + + + + +
diff --git a/pages/docs/headers.js b/pages/docs/headers.js index b558353..7a4e14c 100644 --- a/pages/docs/headers.js +++ b/pages/docs/headers.js @@ -2,13 +2,15 @@ import { basicNavbars } from "../../components/drip/navbar/basicNavbars"; import Navbar from "../../components/drip/navbar/Navbar"; import Meta from "../../components/layout/meta"; import PageHeading from "../../components/other/PageHeadings"; +import CodePanel from "../../components/other/CodePanel"; +import { NavbarsSnippets } from "../../components/drip/navbar/navbarsCodeSnippets"; -export default function Buttons() { +export default function Headers() { return (
-

Basic Navbar's

-
- {basicNavbars.map((navbar, index) => ())} -
+

Basic Navbars

+ +
+ {basicNavbars.map((navbar, index) => ())} +
+
); diff --git a/pages/docs/signin.js b/pages/docs/signin.js index 4726338..664305c 100644 --- a/pages/docs/signin.js +++ b/pages/docs/signin.js @@ -1,97 +1,11 @@ import Head from "next/head"; -import { useState } from "react"; import Meta from "../../components/layout/meta"; import PageHeading from "../../components/other/PageHeadings"; import Signin from "../../components/drip/signin/Signin"; +import CodePanel, { CodeVariant } from "../../components/other/CodePanel"; +import { SigninSnippets } from "../../components/drip/signin/signinCodeSnippets"; -export default function Alerts() { - const [CopySuccess, setCopySuccess] = useState(false); - - const signinComponentCode = ` - 'use-client'; - import React, { useState } from "react"; - import { FaApple, FaEye, FaEyeSlash, FaTwitter } from "react-icons/fa"; - import { IoMdCloseCircle } from "react-icons/io"; - import { FcGoogle } from "react-icons/fc"; - const Signin = ({ handleClose }) => { - const [showPassword, setShowPassword] = useState(false); - - return ( -
-
- - - -
- Logo -

Welcome back

-

Please enter your details to sign in.

-
-
- - - -
-
-
- OR -
-
-
-
- - -
-
- - - -
-
- - Forgot password? -
- -
-
-

Don't have an account yet?{" "} - Sign Up -

-
-
-
- ); - }; - - export default Signin; - `; - - const copyToClipboard = async () => { - try { - await navigator.clipboard.writeText(signinComponentCode); - setCopySuccess(true); - } catch (error) { - setCopySuccess(false); - } - setTimeout(() => { - setCopySuccess(false); - }, 4000); - }; - +export default function SigninDocs() { return ( <> - -
-
-

- {CopySuccess && ( - - Copied! - - )} -

- -
+
+ + + + +
);