From 0fa1943e5070474ba2217176c8e9c89329038b12 Mon Sep 17 00:00:00 2001 From: KamrAnDarmAn Date: Sun, 3 Aug 2025 14:38:26 +0430 Subject: [PATCH 1/2] feat(modals): add BasicModal and ConfirmationModal components --- components/drip/modal/BasicModal.js | 78 +++++ components/drip/modal/ConfirmationModal.js | 86 ++++++ components/drip/navbar/basicNavbars.js | 342 ++++++++++++--------- components/other/ComponentListing.js | 8 +- package-lock.json | 15 +- pages/docs/alerts.js | 8 +- pages/docs/footers.js | 45 +-- pages/docs/modals.js | 148 +++++++++ pages/index.js | 34 +- 9 files changed, 564 insertions(+), 200 deletions(-) create mode 100644 components/drip/modal/BasicModal.js create mode 100644 components/drip/modal/ConfirmationModal.js create mode 100644 pages/docs/modals.js diff --git a/components/drip/modal/BasicModal.js b/components/drip/modal/BasicModal.js new file mode 100644 index 0000000..47af8ef --- /dev/null +++ b/components/drip/modal/BasicModal.js @@ -0,0 +1,78 @@ +import { useState } from "react"; + +const BasicModal = ({ children, basicModalRef, onClose, open }) => { + const closeModal = () => { + onClose(false); + }; + return ( +
+
e.stopPropagation()} + className="flex flex-col w-full max-w-[90vw] sm:max-w-lg md:max-w-xl lg:max-w-2xl max-h-[90vh] bg-white rounded-lg overflow-hidden" + > +
+

+ Welcome to the modal +

+ +
+
+

+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Molestiae + eligendi quo possimus corporis. Aliquam adipisci ipsum earum, nam et + in voluptatum nesciunt eveniet, repudiandae corporis reiciendis. + Voluptas libero enim officiis, at obcaecati, dolores quidem + accusantium autem officia nisi itaque nostrum vel repellendus hic + cupiditate saepe perferendis nobis illo impedit sit ad deserunt + repellat cum inventore? Ut quo quisquam dolorem consequuntur in, eum + aspernatur voluptas sapiente, illo sunt optio ipsum, eos aut est + eius temporibus eveniet harum. Neque error quo deserunt id + laudantium +

+
+
+ + + +
+
+
+ ); +}; + +export default BasicModal; diff --git a/components/drip/modal/ConfirmationModal.js b/components/drip/modal/ConfirmationModal.js new file mode 100644 index 0000000..e08f416 --- /dev/null +++ b/components/drip/modal/ConfirmationModal.js @@ -0,0 +1,86 @@ +const ConfirmationModal = ({ + open, + onClose, + ConfirmationModalRef, + title, + onConfirm, + onCancel, +}) => { + return ( + <> +
+
e.stopPropagation()} + className="relative backdrop-blur-md p-4 w-full max-w-md max-h-full" + > +
+ +
+ + + + +

+ {title || " Are you sure you want to delete this product?"} +

+
+ + +
+
+
+
+
+ + ); +}; + +export default ConfirmationModal; diff --git a/components/drip/navbar/basicNavbars.js b/components/drip/navbar/basicNavbars.js index c2324cc..7a321b5 100644 --- a/components/drip/navbar/basicNavbars.js +++ b/components/drip/navbar/basicNavbars.js @@ -1,150 +1,194 @@ export const basicNavbars = [ - { - type: "Navbar with animated three line Hamburger menu, with a translate animation on mobile devices", - category: [ - { - id: "Navbar-1", - style: "flex justify-between items-center relative bg-black py-3 lg:px-12 px-6 text-white w-11/12 mx-auto", - mobileStyle: "flex justify-between transition-all duration-500 ease-in items-center relative bg-black py-3 px-6 text-white w-11/12 mx-auto", - labelStyle: "lg:hidden w-10 h-1 relative rounded-full bg-white after:w-10 after:h-1 after:rounded-full after:bg-white before:w-10 before:h-1 before:rounded-full before:bg-white after:absolute after:top-2 before:-top-2 before:absolute cursor-pointer peer-checked:before:top-0 peer-checked:after:top-0 peer-checked:after:rotate-45 peer-checked:before:-rotate-45 after:transition-transform after:duration-500 before:transition-transform before:duration-500 ease-in peer-checked:bg-transparent", - mobileLabelStyle: "w-10 h-1 relative transition-all duration-500 ease-in rounded-full bg-white after:w-10 after:h-1 after:rounded-full after:bg-white before:w-10 before:h-1 before:rounded-full before:bg-white after:absolute after:top-2 before:-top-2 before:absolute cursor-pointer peer-checked:before:top-0 peer-checked:after:top-0 peer-checked:after:rotate-45 peer-checked:before:-rotate-45 after:transition-transform after:duration-500 before:transition-transform before:duration-500 ease-in peer-checked:bg-transparent", - listContainerStyle: "lg:flex lg:translate-x-0 lg:peer-checked:static absolute lg:static -translate-x-[100vh] lg:basis-3/5 justify-evenly font-extrabold peer-checked:translate-x-0 top-[88px] transition-transform duration-500 left-0 right-0 bg-black lg:bg-transparent", - mobileListContainerStyle: " absolute -translate-x-[200vh] justify-evenly font-extrabold peer-checked:translate-x-0 top-[88px] transition-all duration-700 left-0 right-0 bg-black", - logoStyle: "w-16 h-16 basis-16 rounded-full bg-white text-black font-bold flex items-center justify-center", - childrenStyle: "p-6 cursor-pointer flex lg:p-0 lg:hover:bg-inherit hover:bg-gray-500 transition-colors duration-700 ease-in", - mobileChildrenStyle: "p-6 cursor-pointer flex hover:bg-gray-500 transition-colors duration-300 ease-in", - children: [ - { - id: "About-1", - text: "About", - href: "/docs/headers" - }, - { - id: "Career-1", - text: "Career", - href: "/docs/headers" - },{ - id: "Events-1", - text: "Events", - href: "/docs/headers" - },{ - id: "Product-1", - text: "Product", - href: "/docs/headers" - }, - ] - } - ] - }, - { - type: "Navbar with an animated two line Hamburger menu, with a translate animation on mobile devices", - category: [ - { - id: "Navbar-2", - style: "flex justify-between items-center relative bg-black py-3 lg:px-12 px-6 text-white w-11/12 mx-auto", - mobileStyle: "flex justify-between transition-all duration-500 ease-in items-center relative bg-black py-3 px-6 text-white w-11/12 mx-auto", - labelStyle: "lg:hidden w-10 h-1 relative rounded-full bg-transparent after:w-8 after:h-1 after:rounded-full after:bg-white before:w-8 before:h-1 before:rounded-full before:bg-white after:absolute after:top-1.5 before:-top-1.5 before:absolute cursor-pointer peer-checked:before:top-0 peer-checked:after:top-0 peer-checked:after:rotate-45 peer-checked:before:-rotate-45 after:transition-transform after:duration-500 before:transition-transform before:duration-500 ease-in peer-checked:bg-transparent", - mobileLabelStyle: "w-10 h-1 relative transition-all duration-500 ease-in rounded-full bg-white after:w-10 after:h-1 after:rounded-full after:bg-white before:w-10 before:h-1 before:rounded-full before:bg-white after:absolute after:top-2 before:-top-2 before:absolute cursor-pointer hover:cursor-pointer peer-checked:before:top-0 peer-checked:after:top-0 peer-checked:after:rotate-45 peer-checked:before:-rotate-45 after:transition-transform after:duration-500 before:transition-transform before:duration-500 ease-in peer-checked:bg-transparent", - listContainerStyle: "lg:flex lg:translate-x-0 lg:peer-checked:static absolute lg:static -translate-x-[100vh] lg:basis-3/5 justify-evenly font-extrabold peer-checked:translate-x-0 top-[88px] transition-transform duration-500 left-0 right-0 bg-black lg:bg-transparent", - mobileListContainerStyle: " absolute -translate-x-[200vh] justify-evenly font-extrabold peer-checked:translate-x-0 top-[88px] transition-all duration-700 left-0 right-0 bg-black", - logoStyle: "w-16 h-16 basis-16 rounded-full bg-white text-black font-bold flex items-center justify-center", - childrenStyle: "p-6 cursor-pointer flex lg:p-0 lg:hover:bg-inherit hover:bg-gray-500 transition-colors duration-700 ease-in", - mobileChildrenStyle: "p-6 cursor-pointer flex hover:bg-gray-500 transition-colors duration-300 ease-in", - children: [ - { - id: "About-1", - text: "About", - href: "/docs/headers" - }, - { - id: "Career-1", - text: "Career", - href: "/docs/headers" - }, { - id: "Events-1", - text: "Events", - href: "/docs/headers" - }, { - id: "Product-1", - text: "Product", - href: "/docs/headers" - }, - ] - } - ] - }, - { - type: "Bordered Navbar with animated three line Hamburger menu, with a translate animation on mobile devices", - category: [ - { - id: "Navbar-3", - style: "flex justify-between items-center relative border-black border-2 py-3 lg:px-12 px-6 lg:text-black text-white bg-white w-11/12 mx-auto", - mobileStyle: "flex justify-between transition-all duration-500 border-black border-2 ease-in items-center relative bg-white py-3 px-6 text-white w-11/12 mx-auto", - labelStyle: "lg:hidden w-10 h-1 relative rounded-full bg-black after:w-10 after:h-1 after:rounded-full after:bg-black before:w-10 before:h-1 before:rounded-full before:bg-black after:absolute after:top-2 before:-top-2 before:absolute cursor-pointer peer-checked:before:top-0 peer-checked:after:top-0 peer-checked:after:rotate-45 peer-checked:before:-rotate-45 after:transition-transform after:duration-500 before:transition-transform before:duration-500 ease-in peer-checked:bg-transparent", - mobileLabelStyle: "w-10 h-1 relative transition-all duration-500 ease-in rounded-full bg-black after:w-10 after:h-1 after:rounded-full after:bg-black before:w-10 before:h-1 before:rounded-full before:bg-black after:absolute after:top-2 before:-top-2 before:absolute cursor-pointer peer-checked:before:top-0 peer-checked:after:top-0 peer-checked:after:rotate-45 peer-checked:before:-rotate-45 after:transition-transform after:duration-500 before:transition-transform before:duration-500 ease-in peer-checked:bg-transparent", - listContainerStyle: "lg:flex lg:translate-x-0 lg:peer-checked:static absolute lg:static -translate-x-[100vh] lg:basis-3/5 justify-evenly font-extrabold peer-checked:translate-x-0 top-[88px] transition-transform duration-500 left-0 right-0 bg-black lg:bg-transparent", - mobileListContainerStyle: " absolute -translate-x-[200vh] justify-evenly font-extrabold peer-checked:translate-x-0 top-[88px] transition-all duration-700 left-0 right-0 bg-black", - logoStyle: "w-16 h-16 basis-16 rounded-full bg-black text-white font-bold flex items-center justify-center", - childrenStyle: "p-6 cursor-pointer flex lg:p-0 lg:hover:bg-inherit hover:bg-gray-500 transition-colors duration-700 ease-in", - mobileChildrenStyle: "p-6 cursor-pointer flex hover:bg-gray-500 transition-colors text-white duration-300 ease-in", - children: [ - { - id: "About-1", - text: "About", - href: "/docs/headers" - }, - { - id: "Career-1", - text: "Career", - href: "/docs/headers" - },{ - id: "Events-1", - text: "Events", - href: "/docs/headers" - },{ - id: "Product-1", - text: "Product", - href: "/docs/headers" - }, - ] - } - ] - }, - { - type: "Bordered Navbar with an animated two line Hamburger menu, with a translate animation on mobile devices", - category: [ - { - id: "Navbar-4", - style: "flex justify-between items-center relative border-black border-2 py-3 lg:px-12 px-6 lg:text-black text-white w-11/12 bg-white mx-auto", - mobileStyle: "flex justify-between transition-all duration-500 ease-in items-center relative border-black border-2 bg-white py-3 px-6 text-white w-11/12 mx-auto", - labelStyle: "lg:hidden w-10 h-1 relative rounded-full bg-transparent after:w-8 after:h-1 after:rounded-full after:bg-black before:w-8 before:h-1 before:rounded-full before:bg-black after:absolute after:top-1.5 before:-top-1.5 before:absolute cursor-pointer peer-checked:before:top-0 peer-checked:after:top-0 peer-checked:after:rotate-45 peer-checked:before:-rotate-45 after:transition-transform after:duration-500 before:transition-transform before:duration-500 ease-in peer-checked:bg-transparent", - mobileLabelStyle: "w-10 h-1 relative transition-all duration-500 ease-in rounded-full bg-transparent after:w-10 after:h-1 after:rounded-full after:bg-black before:w-10 before:h-1 before:rounded-full before:bg-black after:absolute after:top-2 before:-top-2 before:absolute cursor-pointer peer-checked:before:top-0 peer-checked:after:top-0 peer-checked:after:rotate-45 peer-checked:before:-rotate-45 after:transition-transform after:duration-500 before:transition-transform before:duration-500 ease-in peer-checked:bg-transparent", - listContainerStyle: "lg:flex lg:translate-x-0 lg:peer-checked:static absolute lg:static -translate-x-[100vh] lg:basis-3/5 justify-evenly font-extrabold peer-checked:translate-x-0 top-[88px] transition-transform duration-500 left-0 right-0 bg-black lg:bg-transparent", - mobileListContainerStyle: " absolute -translate-x-[200vh] justify-evenly font-extrabold peer-checked:translate-x-0 top-[88px] transition-all duration-700 left-0 right-0 bg-black", - logoStyle: "w-16 h-16 basis-16 rounded-full bg-black text-white font-bold flex items-center justify-center", - childrenStyle: "p-6 cursor-pointer flex lg:p-0 lg:hover:bg-inherit hover:bg-gray-500 transition-colors duration-700 ease-in", - mobileChildrenStyle: "p-6 cursor-pointer flex hover:bg-gray-500 text-white transition-colors duration-300 ease-in", - children: [ - { - id: "About-1", - text: "About", - href: "/docs/headers" - }, - { - id: "Career-1", - text: "Career", - href: "/docs/headers" - }, { - id: "Events-1", - text: "Events", - href: "/docs/headers" - }, { - id: "Product-1", - text: "Product", - href: "/docs/headers" - }, - ] - } - ] - } -] \ No newline at end of file + { + type: "Navbar with animated three line Hamburger menu, with a translate animation on mobile devices", + category: [ + { + id: "Navbar-1", + style: + "flex justify-between items-center relative bg-black py-3 lg:px-12 px-6 text-white w-11/12 mx-auto", + mobileStyle: + "flex justify-between transition-all duration-500 ease-in items-center relative bg-black py-3 px-6 text-white w-11/12 mx-auto", + labelStyle: + "lg:hidden w-10 h-1 relative rounded-full bg-white after:w-10 after:h-1 after:rounded-full after:bg-white before:w-10 before:h-1 before:rounded-full before:bg-white after:absolute after:top-2 before:-top-2 before:absolute cursor-pointer peer-checked:before:top-0 peer-checked:after:top-0 peer-checked:after:rotate-45 peer-checked:before:-rotate-45 after:transition-transform after:duration-500 before:transition-transform before:duration-500 ease-in peer-checked:bg-transparent", + mobileLabelStyle: + "w-10 h-1 relative transition-all duration-500 ease-in rounded-full bg-white after:w-10 after:h-1 after:rounded-full after:bg-white before:w-10 before:h-1 before:rounded-full before:bg-white after:absolute after:top-2 before:-top-2 before:absolute cursor-pointer peer-checked:before:top-0 peer-checked:after:top-0 peer-checked:after:rotate-45 peer-checked:before:-rotate-45 after:transition-transform after:duration-500 before:transition-transform before:duration-500 ease-in peer-checked:bg-transparent", + listContainerStyle: + "lg:flex lg:translate-x-0 lg:peer-checked:static absolute lg:static -translate-x-[100vh] lg:basis-3/5 justify-evenly font-extrabold peer-checked:translate-x-0 top-[88px] transition-transform duration-500 left-0 right-0 bg-black lg:bg-transparent", + mobileListContainerStyle: + " absolute -translate-x-[200vh] justify-evenly font-extrabold peer-checked:translate-x-0 top-[88px] transition-all duration-700 left-0 right-0 bg-black", + logoStyle: + "w-16 h-16 basis-16 rounded-full bg-white text-black font-bold flex items-center justify-center", + childrenStyle: + "p-6 cursor-pointer flex lg:p-0 lg:hover:bg-inherit hover:bg-gray-500 transition-colors duration-700 ease-in", + mobileChildrenStyle: + "p-6 cursor-pointer flex hover:bg-gray-500 transition-colors duration-300 ease-in", + children: [ + { + id: "About-1", + text: "About", + href: "/docs/headers", + }, + { + id: "Career-1", + text: "Career", + href: "/docs/headers", + }, + { + id: "Events-1", + text: "Events", + href: "/docs/headers", + }, + { + id: "Product-1", + text: "Product", + href: "/docs/headers", + }, + ], + }, + ], + }, + { + type: "Navbar with an animated two line Hamburger menu, with a translate animation on mobile devices", + category: [ + { + id: "Navbar-2", + style: + "flex justify-between items-center relative bg-black py-3 lg:px-12 px-6 text-white w-11/12 mx-auto", + mobileStyle: + "flex justify-between transition-all duration-500 ease-in items-center relative bg-black py-3 px-6 text-white w-11/12 mx-auto", + labelStyle: + "lg:hidden w-10 h-1 relative rounded-full bg-transparent after:w-8 after:h-1 after:rounded-full after:bg-white before:w-8 before:h-1 before:rounded-full before:bg-white after:absolute after:top-1.5 before:-top-1.5 before:absolute cursor-pointer peer-checked:before:top-0 peer-checked:after:top-0 peer-checked:after:rotate-45 peer-checked:before:-rotate-45 after:transition-transform after:duration-500 before:transition-transform before:duration-500 ease-in peer-checked:bg-transparent", + mobileLabelStyle: + "w-10 h-1 relative transition-all duration-500 ease-in rounded-full bg-white after:w-10 after:h-1 after:rounded-full after:bg-white before:w-10 before:h-1 before:rounded-full before:bg-white after:absolute after:top-2 before:-top-2 before:absolute cursor-pointer hover:cursor-pointer peer-checked:before:top-0 peer-checked:after:top-0 peer-checked:after:rotate-45 peer-checked:before:-rotate-45 after:transition-transform after:duration-500 before:transition-transform before:duration-500 ease-in peer-checked:bg-transparent", + listContainerStyle: + "lg:flex lg:translate-x-0 lg:peer-checked:static absolute lg:static -translate-x-[100vh] lg:basis-3/5 justify-evenly font-extrabold peer-checked:translate-x-0 top-[88px] transition-transform duration-500 left-0 right-0 bg-black lg:bg-transparent", + mobileListContainerStyle: + " absolute -translate-x-[200vh] justify-evenly font-extrabold peer-checked:translate-x-0 top-[88px] transition-all duration-700 left-0 right-0 bg-black", + logoStyle: + "w-16 h-16 basis-16 rounded-full bg-white text-black font-bold flex items-center justify-center", + childrenStyle: + "p-6 cursor-pointer flex lg:p-0 lg:hover:bg-inherit hover:bg-gray-500 transition-colors duration-700 ease-in", + mobileChildrenStyle: + "p-6 cursor-pointer flex hover:bg-gray-500 transition-colors duration-300 ease-in", + children: [ + { + id: "About-1", + text: "About", + href: "/docs/headers", + }, + { + id: "Career-1", + text: "Career", + href: "/docs/headers", + }, + { + id: "Events-1", + text: "Events", + href: "/docs/headers", + }, + { + id: "Product-1", + text: "Product", + href: "/docs/headers", + }, + ], + }, + ], + }, + { + type: "Bordered Navbar with animated three line Hamburger menu, with a translate animation on mobile devices", + category: [ + { + id: "Navbar-3", + style: + "flex justify-between items-center relative border-black border-2 py-3 lg:px-12 px-6 lg:text-black text-white bg-white w-11/12 mx-auto", + mobileStyle: + "flex justify-between transition-all duration-500 bbtnorder-black border-2 ease-in items-center relative bg-white py-3 px-6 text-white w-11/12 mx-auto", + labelStyle: + "lg:hidden w-10 h-1 relative rounded-full bg-black after:w-10 after:h-1 after:rounded-full after:bg-black before:w-10 before:h-1 before:rounded-full before:bg-black after:absolute after:top-2 before:-top-2 before:absolute cursor-pointer peer-checked:before:top-0 peer-checked:after:top-0 peer-checked:after:rotate-45 peer-checked:before:-rotate-45 after:transition-transform after:duration-500 before:transition-transform before:duration-500 ease-in peer-checked:bg-transparent", + mobileLabelStyle: + "w-10 h-1 relative transition-all duration-500 ease-in rounded-full bg-black after:w-10 after:h-1 after:rounded-full after:bg-black before:w-10 before:h-1 before:rounded-full before:bg-black after:absolute after:top-2 before:-top-2 before:absolute cursor-pointer peer-checked:before:top-0 peer-checked:after:top-0 peer-checked:after:rotate-45 peer-checked:before:-rotate-45 after:transition-transform after:duration-500 before:transition-transform before:duration-500 ease-in peer-checked:bg-transparent", + listContainerStyle: + "lg:flex lg:translate-x-0 lg:peer-checked:static absolute lg:static -translate-x-[100vh] lg:basis-3/5 justify-evenly font-extrabold peer-checked:translate-x-0 top-[88px] transition-transform duration-500 left-0 right-0 bg-black lg:bg-transparent", + mobileListContainerStyle: + " absolute -translate-x-[200vh] justify-evenly font-extrabold peer-checked:translate-x-0 top-[88px] transition-all duration-700 left-0 right-0 bg-black", + logoStyle: + "w-16 h-16 basis-16 rounded-full bg-black text-white font-bold flex items-center justify-center", + childrenStyle: + "p-6 cursor-pointer flex lg:p-0 lg:hover:bg-inherit hover:bg-gray-500 transition-colors duration-700 ease-in", + mobileChildrenStyle: + "p-6 cursor-pointer flex hover:bg-gray-500 transition-colors text-white duration-300 ease-in", + children: [ + { + id: "About-1", + text: "About", + href: "/docs/headers", + }, + { + id: "Career-1", + text: "Career", + href: "/docs/headers", + }, + { + id: "Events-1", + text: "Events", + href: "/docs/headers", + }, + { + id: "Product-1", + text: "Product", + href: "/docs/headers", + }, + ], + }, + ], + }, + { + type: "Bordered Navbar with an animated two line Hamburger menu, with a translate animation on mobile devices", + category: [ + { + id: "Navbar-4", + style: + "flex justify-between items-center relative border-black border-2 py-3 lg:px-12 px-6 lg:text-black text-white w-11/12 bg-white mx-auto", + mobileStyle: + "flex justify-between transition-all duration-500 ease-in items-center relative border-black border-2 bg-white py-3 px-6 text-white w-11/12 mx-auto", + labelStyle: + "lg:hidden w-10 h-1 relative rounded-full bg-transparent after:w-8 after:h-1 after:rounded-full after:bg-black before:w-8 before:h-1 before:rounded-full before:bg-black after:absolute after:top-1.5 before:-top-1.5 before:absolute cursor-pointer peer-checked:before:top-0 peer-checked:after:top-0 peer-checked:after:rotate-45 peer-checked:before:-rotate-45 after:transition-transform after:duration-500 before:transition-transform before:duration-500 ease-in peer-checked:bg-transparent", + mobileLabelStyle: + "w-10 h-1 relative transition-all duration-500 ease-in rounded-full bg-transparent after:w-10 after:h-1 after:rounded-full after:bg-black before:w-10 before:h-1 before:rounded-full before:bg-black after:absolute after:top-2 before:-top-2 before:absolute cursor-pointer peer-checked:before:top-0 peer-checked:after:top-0 peer-checked:after:rotate-45 peer-checked:before:-rotate-45 after:transition-transform after:duration-500 before:transition-transform before:duration-500 ease-in peer-checked:bg-transparent", + listContainerStyle: + "lg:flex lg:translate-x-0 lg:peer-checked:static absolute lg:static -translate-x-[100vh] lg:basis-3/5 justify-evenly font-extrabold peer-checked:translate-x-0 top-[88px] transition-transform duration-500 left-0 right-0 bg-black lg:bg-transparent", + mobileListContainerStyle: + " absolute -translate-x-[200vh] justify-evenly font-extrabold peer-checked:translate-x-0 top-[88px] transition-all duration-700 left-0 right-0 bg-black", + logoStyle: + "w-16 h-16 basis-16 rounded-full bg-black text-white font-bold flex items-center justify-center", + childrenStyle: + "p-6 cursor-pointer flex lg:p-0 lg:hover:bg-inherit hover:bg-gray-500 transition-colors duration-700 ease-in", + mobileChildrenStyle: + "p-6 cursor-pointer flex hover:bg-gray-500 text-white transition-colors duration-300 ease-in", + children: [ + { + id: "About-1", + text: "About", + href: "/docs/headers", + }, + { + id: "Career-1", + text: "Career", + href: "/docs/headers", + }, + { + id: "Events-1", + text: "Events", + href: "/docs/headers", + }, + { + id: "Product-1", + text: "Product", + href: "/docs/headers", + }, + ], + }, + ], + }, +]; diff --git a/components/other/ComponentListing.js b/components/other/ComponentListing.js index 1dbb7b5..242454d 100644 --- a/components/other/ComponentListing.js +++ b/components/other/ComponentListing.js @@ -46,7 +46,13 @@ const ComponentListing = ({ featured = 0 }) => { count: 1, icon: "ri-layout-2-line", featured: true, - } + }, + { + name: "modals", + count: 2, + icon: "ri-window-line", + featured: true, + }, ]; useEffect(() => { diff --git a/package-lock.json b/package-lock.json index 025fd42..45c98bb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -798,9 +798,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001480", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001480.tgz", - "integrity": "sha512-q7cpoPPvZYgtyC4VaBSN0Bt+PJ4c4EYRf0DrduInOz2SkFpHD5p3LnvEpqBp7UnJn+8x1Ogl1s38saUxe+ihQQ==", + "version": "1.0.30001731", + "resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001731.tgz", + "integrity": "sha512-lDdp2/wrOmTRWuoB5DpfNkC0rJDU8DqRa6nYL6HK6sytw70QMopt/NIc/9SM7ylItlBWfACXk0tEn37UWM/+mg==", "funding": [ { "type": "opencollective", @@ -814,7 +814,8 @@ "type": "github", "url": "https://github.com/sponsors/ai" } - ] + ], + "license": "CC-BY-4.0" }, "node_modules/chalk": { "version": "4.1.2", @@ -4029,9 +4030,9 @@ "dev": true }, "caniuse-lite": { - "version": "1.0.30001480", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001480.tgz", - "integrity": "sha512-q7cpoPPvZYgtyC4VaBSN0Bt+PJ4c4EYRf0DrduInOz2SkFpHD5p3LnvEpqBp7UnJn+8x1Ogl1s38saUxe+ihQQ==" + "version": "1.0.30001731", + "resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001731.tgz", + "integrity": "sha512-lDdp2/wrOmTRWuoB5DpfNkC0rJDU8DqRa6nYL6HK6sytw70QMopt/NIc/9SM7ylItlBWfACXk0tEn37UWM/+mg==" }, "chalk": { "version": "4.1.2", diff --git a/pages/docs/alerts.js b/pages/docs/alerts.js index 733e76b..90b3e58 100644 --- a/pages/docs/alerts.js +++ b/pages/docs/alerts.js @@ -63,7 +63,6 @@ export default function Alerts() { "" )}

-
{SolidAlert.map((btn) => (
copyToClipboard("Solid", btn.id)} ref={(ref) => (alertDataRef.current[btn.id] = ref)} - > - {btn.span} {btn.text} -
+ >
))} - + {" "} + {btn.span} {btn.text} {/* Soft Color Alerts */} diff --git a/pages/docs/footers.js b/pages/docs/footers.js index d17ef61..45f2183 100644 --- a/pages/docs/footers.js +++ b/pages/docs/footers.js @@ -1,16 +1,14 @@ -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 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"; -export default function Footers(){ - return( +export default function Footers() { + return (
@@ -24,18 +22,23 @@ export default function Footers(){

Basic Footers

- {/* Foorter #1 */} -
-

Basic strip footer with links and Copyright

-
-
- -
-

Footer with a logo section and important links

- -
+ {/* Foorter #1 */} +
+

+ {" "} + Basic strip footer with links and Copyright{" "} +

+
+
+
+

+ {" "} + Footer with a logo section and important links{" "} +

+ +
- ) -} \ No newline at end of file + ); +} diff --git a/pages/docs/modals.js b/pages/docs/modals.js new file mode 100644 index 0000000..a00e7f3 --- /dev/null +++ b/pages/docs/modals.js @@ -0,0 +1,148 @@ +import { useState, useRef } from "react"; +import Meta from "../../components/layout/meta"; +import PageHeading from "../../components/other/PageHeadings"; +import BasicModal from "../../components/drip/modal/BasicModal"; +import ConfirmationModal from "../../components/drip/modal/ConfirmationModal"; + +const modals = () => { + const [CopySuccess, setCopySuccess] = useState(false); + const [openBasic, setOpenBasic] = useState(false); + const [openConfirmation, setOpenConfirmation] = useState(false); + const basicModalRef = useRef(); + const ConfirmationModalRef = useRef(); + const [modalId, setModalId] = useState(""); + + const openBasicModal = () => { + setOpenBasic(true); + }; + const openConfirmationModal = () => { + setOpenConfirmation(true); + }; + const closeBasic = () => { + setOpenBasic(false); + }; + const closeConfirm = () => { + setOpenConfirmation(false); + }; + const onConfirm = () => { + setOpenConfirmation(false); + }; + const onCancel = () => { + setOpenConfirmation(false); + }; + + const copyToClipboard = async (El, modalId) => { + setCopySuccess(false); + try { + await navigator.clipboard.writeText(El.current.outerHTML); + setCopySuccess(true); + setModalId(modalId); + } catch (error) { + setCopySuccess(false); + } + setTimeout(() => { + setCopySuccess(false); + setModalId(""); + }, 4000); + }; + + return ( + <> + + +
+ {/* Basic Modal */} +
+

+ Basic Modal  {" "} + {CopySuccess && modalId == "basic-modal" ? ( + + Copied! {" "} + + ) : ( + "" + )} +

+ +
+ +
+
+ +
+
+ {/* --------------------- */} + + {/* Confirmation Modal */} +
+

+ Confirmation modal.  {" "} + {CopySuccess && modalId == "confirmation-modal" ? ( + + Copied! {" "} + + ) : ( + "" + )} +

+ +
+ +
+
+ +
+
+ + {/* component */} + +
+ + ); +}; + +export default modals; diff --git a/pages/index.js b/pages/index.js index 400d1bf..3a3296a 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,25 +1,25 @@ -import Head from 'next/head' -import Link from 'next/link' -import Meta from '../components/layout/meta' -import ComponentListing from '../components/other/ComponentListing' -import HeroSection from '../components/other/HeroSection' - +import Head from "next/head"; +import Link from "next/link"; +import Meta from "../components/layout/meta"; +import ComponentListing from "../components/other/ComponentListing"; +import HeroSection from "../components/other/HeroSection"; export default function Home() { - return ( <> - - + + -
-

Components

-

UI Tailwind CSS components, that will help you save your time

- +
+

Components

+

+ UI Tailwind CSS components, that will help you save your time +

+
- ) + ); } From 4c565db98a77bbf8e30e1a7b2d2ad67f04dde2a4 Mon Sep 17 00:00:00 2001 From: KamrAnDarmAn Date: Sun, 3 Aug 2025 14:44:22 +0430 Subject: [PATCH 2/2] feat(modals): add BasicModal and ConfirmationModal components --- components/drip/modal/{BasicModal.js => basicModal.js} | 0 .../drip/modal/{ConfirmationModal.js => confirmationModal.js} | 0 pages/docs/modals.js | 4 ++-- 3 files changed, 2 insertions(+), 2 deletions(-) rename components/drip/modal/{BasicModal.js => basicModal.js} (100%) rename components/drip/modal/{ConfirmationModal.js => confirmationModal.js} (100%) diff --git a/components/drip/modal/BasicModal.js b/components/drip/modal/basicModal.js similarity index 100% rename from components/drip/modal/BasicModal.js rename to components/drip/modal/basicModal.js diff --git a/components/drip/modal/ConfirmationModal.js b/components/drip/modal/confirmationModal.js similarity index 100% rename from components/drip/modal/ConfirmationModal.js rename to components/drip/modal/confirmationModal.js diff --git a/pages/docs/modals.js b/pages/docs/modals.js index a00e7f3..be941b8 100644 --- a/pages/docs/modals.js +++ b/pages/docs/modals.js @@ -1,8 +1,8 @@ import { useState, useRef } from "react"; import Meta from "../../components/layout/meta"; import PageHeading from "../../components/other/PageHeadings"; -import BasicModal from "../../components/drip/modal/BasicModal"; -import ConfirmationModal from "../../components/drip/modal/ConfirmationModal"; +import BasicModal from "../../components/drip/modal/basicModal"; +import ConfirmationModal from "../../components/drip/modal/confirmationModal"; const modals = () => { const [CopySuccess, setCopySuccess] = useState(false);