@solidstarters/solid-core-ui 0.1.26

package/package.json

@@ -0,0 +1,114 @@
+{
+  "name": "@solidstarters/solid-core-ui",
+  "version": "0.1.26",
+  "scripts": {
+    "build": "rollup -c",
+    "clean": "rm -rf dist",
+    "prepare": "npm run build"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+   },
+  "dependencies": {
+    "@hello-pangea/dnd": "^17.0.0",
+    "axios": "^1.7.2",
+    "bcryptjs": "^2.4.3",
+    "bootstrap": "^5.3.3",
+    "change-case": "^5.4.4",
+    "chart.js": "^4.4.3",
+    "cloudinary": "^1.40.0",
+    "html2canvas": "^1.4.1",
+    "jspdf": "^2.5.1",
+    "jwt-decode": "^4.0.0",
+    "lodash": "^4.17.21",
+    "mapbox-gl": "^2.15.0",
+    "mdbreact": "^4.6.1",
+    "moment": "^2.29.4",
+    "moment-range": "^4.0.2",
+    "mongoose": "^7.5.0",
+    "nodemailer": "^6.9.5",
+    "pluralize": "^8.0.0",
+    "primeflex": "^3.3.1",
+    "primeicons": "^7.0.0",
+    "primereact": "^10.8.5",
+    "qs": "^6.13.0",
+    "quill": "^2.0.3",
+    "stripe": "^13.5.0",
+    "uuid": "^10.0.0",
+    "xlsx": "^0.18.5",
+    "yup": "^1.4.0"
+  },
+  "peerDependencies": {
+    "@codemirror/lang-javascript": "^6.2.2",
+    "@codemirror/theme-one-dark": "^6.1.2",
+    "@reduxjs/toolkit": "^1.9.5",
+    "@uiw/react-codemirror": "^4.23.3",
+    "codemirror": "^6.0.1",
+    "formik": "^2.4.6",
+    "next": "^14.2.13",
+    "next-auth": "^4.23.1",
+    "next-connect": "^1.0.0",
+    "node-geocoder": "^4.2.0",
+    "react": "18.2.0",
+    "react-chartjs-2": "^5.2.0",
+    "react-datepicker": "^4.17.0",
+    "react-dom": "18.2.0",
+    "react-dropzone": "^14.2.3",
+    "react-hot-toast": "^2.4.1",
+    "react-js-pagination": "^3.0.2",
+    "react-markdown": "^9.0.1",
+    "react-quill": "^0.0.2",
+    "react-redux": "^8.1.2",
+    "react-star-ratings": "^2.3.0",
+    "react-transition-group": "^4.4.5"
+  },
+  "devDependencies": {
+    "@codemirror/lang-javascript": "^6.2.2",
+    "@codemirror/theme-one-dark": "^6.1.2",
+    "@reduxjs/toolkit": "^1.9.5",
+    "@rollup/plugin-commonjs": "^28.0.2",
+    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@types/lodash": "^4.17.9",
+    "@types/node": "20.5.9",
+    "@types/pluralize": "^0.0.33",
+    "@types/qs": "^6.9.15",
+    "@types/react": "18.2.21",
+    "@types/react-dom": "18.2.7",
+    "@types/uuid": "^10.0.0",
+    "@uiw/react-codemirror": "^4.23.3",
+    "codemirror": "^6.0.1",
+    "formik": "^2.4.6",
+    "next": "^14.2.13",
+    "next-auth": "^4.23.1",
+    "next-connect": "^1.0.0",
+    "node-geocoder": "^4.2.0",
+    "react": "18.2.0",
+    "react-chartjs-2": "^5.2.0",
+    "react-datepicker": "^4.17.0",
+    "react-dom": "18.2.0",
+    "react-dropzone": "^14.2.3",
+    "react-hot-toast": "^2.4.1",
+    "react-js-pagination": "^3.0.2",
+    "react-markdown": "^9.0.1",
+    "react-quill": "^0.0.2",
+    "react-redux": "^8.1.2",
+    "react-star-ratings": "^2.3.0",
+    "react-transition-group": "^4.4.5",
+    "rollup": "^4.31.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "@rollup/plugin-json": "^5.0.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-terser": "^7.0.2",
+    "tsc-alias": "^1.8.10",
+    "typescript": "5.2.2"
+  }
+}

package/rollup.config.mjs

@@ -0,0 +1,45 @@
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import typescript from 'rollup-plugin-typescript2';
+import pkg from './package.json' assert { type: 'json' };;
+import postcss from 'rollup-plugin-postcss';
+import { terser } from 'rollup-plugin-terser';
+import json from '@rollup/plugin-json';
+
+export default {
+  input: 'src/index.ts', // The entry point of your package
+  output: [
+    {
+      dir: 'dist', // Specify the output directory
+      format: 'cjs',
+      sourcemap: true,
+      exports: 'named', // Ensure named exports are supported
+      inlineDynamicImports: true, // Ensures dynamic imports are inlined
+    },
+    {
+      dir: 'dist', // Specify the output directory
+      format: 'esm',
+      sourcemap: true,
+      exports: 'named', // Ensure named exports are supported
+      inlineDynamicImports: true, // Ensures dynamic imports are inlined
+    },
+  ],
+  plugins: [
+    peerDepsExternal(), // Exclude peer dependencies from the bundle
+    resolve(), // Resolve third-party modules
+    commonjs(), // Convert CommonJS modules to ESModules
+    typescript({ 
+      tsconfig: './tsconfig.json',
+      // useTsconfigDeclarationDir: true, // This is key to respect the declaration dir
+      clean: true,                         // Clean cache
+     }), // Use TypeScript
+    postcss(),  // Handle CSS imports
+    json(),     // Support for JSON files
+    // terser(),   // Minify the output
+  ],
+  external: [
+    ...Object.keys(pkg.dependencies || {}),
+    ...Object.keys(pkg.peerDependencies || {}),
+  ], // Mark peerDependencies and dependencies as external
+};

package/src/components/CustomFooter/CustomFooter.tsx

@@ -0,0 +1,263 @@
+import Link from 'next/link'
+import { FooterForm } from './FooterForm'
+
+export const CustomFooter = () => {
+    const footerLinks = [
+        {
+            title: "Properties Categories",
+            links: [
+                {
+                    title: 'Temperature',
+                    link: "https://uat-fe.radix.logicloop.io/",
+                },
+                {
+                    title: 'Pressure',
+                    link: "https://uat-fe.radix.logicloop.io/",
+                },
+                {
+                    title: 'Level',
+                    link: "https://uat-fe.radix.logicloop.io/",
+                },
+                {
+                    title: 'Flow',
+                    link: "https://uat-fe.radix.logicloop.io/",
+                },
+                {
+                    title: 'Air Quality',
+                    link: "https://uat-fe.radix.logicloop.io/",
+                },
+                {
+                    title: 'Humidity & Temperature',
+                    link: "https://uat-fe.radix.logicloop.io/",
+                },
+                {
+                    title: 'BAS & HVAC',
+                    link: "https://uat-fe.radix.logicloop.io/",
+                },
+            ]
+        },
+        {
+            title: "Properties Categories",
+            links: [
+                {
+                    title: 'PID Temperature ',
+                    link: "https://uat-fe.radix.logicloop.io/",
+                },
+                {
+                    title: 'ControllersRTDsIT ',
+                    link: "https://uat-fe.radix.logicloop.io/",
+                },
+                {
+                    title: 'ServiceBAS & ',
+                    link: "https://uat-fe.radix.logicloop.io/",
+                },
+                {
+                    title: 'HVACLevel GaugesIT ',
+                    link: "https://uat-fe.radix.logicloop.io/",
+                },
+                {
+                    title: 'ServiceApplications by ',
+                    link: "https://uat-fe.radix.logicloop.io/",
+                },
+                {
+                    title: 'IndustryFlow ',
+                    link: "https://uat-fe.radix.logicloop.io/",
+                },
+            ]
+        },
+        {
+            title: "Automation",
+            links: [
+                {
+                    title: 'EMS',
+                    link: "https://uat-fe.radix.logicloop.io/",
+                },
+                {
+                    title: 'RIOT',
+                    link: "https://uat-fe.radix.logicloop.io/",
+                },
+                {
+                    title: 'RIOT',
+                    link: "https://uat-fe.radix.logicloop.io/",
+                },
+                {
+                    title: 'Door Interlock System',
+                    link: "https://uat-fe.radix.logicloop.io/",
+                },
+                {
+                    title: 'Datalogging System',
+                    link: "https://uat-fe.radix.logicloop.io/",
+                },
+                {
+                    title: 'Process Automation',
+                    link: "https://uat-fe.radix.logicloop.io/",
+                },
+                {
+                    title: 'Energy Monitoring',
+                    link: "https://uat-fe.radix.logicloop.io/",
+                },
+                {
+                    title: 'Control Panels',
+                    link: "https://uat-fe.radix.logicloop.io/",
+                },
+            ]
+        },
+        {
+            title: "Company",
+            links: [
+                {
+                    title: 'About Us',
+                    link: "https://uat-fe.radix.logicloop.io/",
+                },
+                {
+                    title: 'Careers',
+                    link: "https://uat-fe.radix.logicloop.io/",
+                },
+                {
+                    title: 'Downloads',
+                    link: "https://uat-fe.radix.logicloop.io/",
+                },
+                {
+                    title: 'Blogs',
+                    link: "https://uat-fe.radix.logicloop.io/",
+                },
+            ]
+        }
+    ]
+    const socialmedia = [
+        {
+            icon: '/images/fb.svg',
+            href: '/',
+        },
+        {
+            icon: '/images/tw.svg',
+            href: '/',
+        },
+        {
+            icon: '/images/li.svg',
+            href: '/',
+        },
+        {
+            icon: '/images/insta.svg',
+            href: '/',
+        }
+    ]
+    const subfooter = [
+        {
+            title: "Disclaimer",
+            link: "https://uat-fe.radix.logicloop.io/"
+        },
+        {
+            title: "Privacy",
+            link: "https://uat-fe.radix.logicloop.io/"
+        },
+        {
+            title: "Terms",
+            link: "https://uat-fe.radix.logicloop.io/"
+        },
+    ]
+    return (
+        <div className='custom-footer pt-7 overflow-hidden'>
+            <div className='mx-auto lg:w-10 md:w-11 sm:w-12'>
+                <div className="grid nested-grid">
+                    <div className="col-3">
+                        <div>
+                            <img
+                                alt='logo'
+                                src={'/images/radix-logo-white.png'}
+                            />
+                        </div>
+                        <div className='font-semibold text-xl text-white mt-3'>
+                            Connect with us
+                        </div>
+                        <div className='flex gap-3 mt-2'>
+                            {socialmedia.map((social, i) => (
+                                <div key={i} className='border-circle border-white border-1 flex align-items-center justify-content-center' style={{ height: 37, width: 37, padding: 8, }}>
+                                    <img
+                                        src={social.icon}
+                                        alt={'icon' + i}
+                                    />
+                                </div>
+                            ))}
+                        </div>
+                        <div>
+                            <div className='mt-4 mt-sm-0 mt-lg-4'>
+                                <div className='text-white font-semibold text-xl'>Office</div>
+                                <div className='flex align-items-center gap-3 mt-2'>
+                                    <div className='mb-2'>
+                                        <svg width="16" height="24" viewBox="0 0 16 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                            <path d="M13.4375 0C14.0469 0 14.5625 0.234375 15.0312 0.65625C15.4531 1.125 15.6875 1.64062 15.6875 2.25V21.75C15.6875 22.4062 15.4531 22.9219 15.0312 23.3438C14.5625 23.8125 14.0469 24 13.4375 24H2.9375C2.28125 24 1.76562 23.8125 1.34375 23.3438C0.875 22.9219 0.6875 22.4062 0.6875 21.75V2.25C0.6875 1.64062 0.875 1.125 1.34375 0.65625C1.76562 0.234375 2.28125 0 2.9375 0H13.4375ZM8.1875 22.5C8.5625 22.5 8.9375 22.3594 9.21875 22.0781C9.5 21.7969 9.6875 21.4219 9.6875 21C9.6875 20.625 9.5 20.25 9.21875 19.9688C8.9375 19.6875 8.5625 19.5 8.1875 19.5C7.76562 19.5 7.39062 19.6875 7.10938 19.9688C6.82812 20.25 6.6875 20.625 6.6875 21C6.6875 21.4219 6.82812 21.7969 7.10938 22.0781C7.39062 22.3594 7.76562 22.5 8.1875 22.5ZM13.4375 17.4375V2.8125C13.4375 2.67188 13.3438 2.53125 13.25 2.4375C13.1562 2.34375 13.0156 2.25 12.875 2.25H3.5C3.3125 2.25 3.17188 2.34375 3.07812 2.4375C2.98438 2.53125 2.9375 2.67188 2.9375 2.8125V17.4375C2.9375 17.625 2.98438 17.7656 3.07812 17.8594C3.17188 17.9531 3.3125 18 3.5 18H12.875C13.0156 18 13.1562 17.9531 13.25 17.8594C13.3438 17.7656 13.4375 17.625 13.4375 17.4375Z" fill="white" />
+                                        </svg>
+                                    </div>
+                                    <div>
+                                        <p className='text-white text-base font-semibold m-0'>
+                                            +91 22 42537777
+                                            <br />
+                                            +91 22 42537707
+                                        </p>
+                                    </div>
+                                </div>
+                                <div className='flex align-items-center gap-3 mt-3'>
+                                    <div className=''>
+                                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                            <path d="M4.00781 3H19.9922C20.8516 3.01562 21.5625 3.30859 22.125 3.87891C22.6875 4.44922 22.9766 5.15625 22.9922 6V18C22.9766 18.8438 22.6875 19.5508 22.125 20.1211C21.5625 20.6914 20.8516 20.9844 19.9922 21H4.00781C3.14844 20.9844 2.4375 20.6914 1.875 20.1211C1.3125 19.5508 1.02344 18.8438 1.00781 18V6C1.02344 5.15625 1.3125 4.44922 1.875 3.87891C2.4375 3.30859 3.14844 3.01562 4.00781 3ZM20.8828 5.55469C20.8047 5.38281 20.6875 5.25 20.5312 5.15625C20.375 5.0625 20.1953 5.00781 19.9922 4.99219H4.00781C3.80469 5.00781 3.625 5.0625 3.46875 5.15625C3.3125 5.25 3.19531 5.38281 3.11719 5.55469L12 11.7891L20.8828 5.55469ZM21 7.92188L12.5625 13.8281C12.3906 13.9375 12.2031 13.9922 12 13.9922C11.7969 13.9922 11.6094 13.9375 11.4375 13.8281L3 7.92188V18C3 18.2812 3.09766 18.5156 3.29297 18.7031C3.48828 18.8906 3.72656 18.9922 4.00781 19.0078H19.9922C20.2734 18.9922 20.5117 18.8906 20.707 18.7031C20.9023 18.5156 21 18.2812 21 18V7.92188Z" fill="white" />
+                                        </svg>
+                                    </div>
+                                    <p className='text-white text-base font-semibold m-0'>
+                                        esales@radix.co.in
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="col-9">
+                        <div className="grid">
+                            {footerLinks.map((footer, i) => (
+                                <div key={i} className='col-3'>
+                                    <div className='flex flex-column mt-4 mt-lg-0'>
+                                        <div className='font-semibold text-nowrap text-xl mb-3' style={{ color: i === 1 ? 'transparent' : '#fff', userSelect: 'none' }}>{footer.title}</div>
+                                        {footer.links.map((links, i) => (
+                                            <Link key={i} href={process.env.BASE_FRONTEND_APPLICATION as string} className='text-white no-underline text-base font-semibold m-0 line-height-4'>
+                                                {links.title}
+                                            </Link>
+                                        ))}
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                </div>
+                <div className='py-3 mt-3' style={{ borderTop: '1px solid #1F6585', borderBottom: '1px solid #1F6585' }}>
+                    <div className='grid'>
+                        <div className='lg:col-6 md:col-12'>
+                            <div className='text-xl font-semibold text-white mb-1'>
+                                Subscribe to our product mailers
+                            </div>
+                            <p className='text-sm text-white mb-0'>
+                                Get notified about updates and be the first to get early access to new episodes.
+                            </p>
+                        </div>
+                        <div className='lg:col-6 md:col-12'>
+                            <FooterForm />
+                        </div>
+                    </div>
+                </div>
+                <div className='py-4 flex sm:flex-column md:flex-row align-items-center justify-content-between'>
+                    <div className='flex align-items-center'>
+                        {subfooter.map((link, i) => (
+                            <Link key={i} href={link.link} className='text-white no-underline text-base font-semibold m-0'>
+                                {link.title}
+                                {i < subfooter.length - 1 && <span className='mx-3'>|</span>}
+                            </Link>
+                        ))}
+                    </div>
+                    <div>
+                        <p className='mb-0 mt-2 mt-sm-0 text-base text-white font-semibold'>
+                            © 2024.All Rights Reserved
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}

package/src/components/CustomFooter/FooterForm.tsx

@@ -0,0 +1,18 @@
+import { Button } from 'primereact/button'
+import { InputText } from 'primereact/inputtext'
+
+export const FooterForm = () => {
+    return (
+        <div className='grid'>
+            <div className='lg:col-4 sm:col-12'>
+                <InputText placeholder='Your name' className='bg-transparent footer-input-border text-white h-4rem' />
+            </div>
+            <div className='lg:col-8 sm:col-12'>
+                <div className='footer-input-border border-white border-1 relative'>
+                    <InputText placeholder='Your email address' className='bg-transparent footer-input-border border-none text-white h-4rem w-full' />
+                    <Button label='Subscribe' rounded className='absolute right-0 top-50 mr-2 bg-white text-color border-none' style={{transform:'translateY(-50%)'}}/>
+                </div>
+            </div>
+        </div>
+    )
+}

package/src/components/CustomHeader/CallIcon.tsx

@@ -0,0 +1,19 @@
+
+export const CallIcon = () => {
+    return (
+        <div>
+            <svg className='border-1 border-circle border-700 p-1' xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 14 14" fill="none">
+                <g clipPath="url(#clip0_1812_6708)">
+                    <path d="M7.40724 0.777588C7.70563 0.854976 8.00729 0.921705 8.30182 1.01171C9.26127 1.30491 10.1156 1.79052 10.8679 2.45221C11.6673 3.15526 12.2867 3.99231 12.7142 4.96884C12.9373 5.47853 13.0928 6.0088 13.196 6.55493C13.2015 6.584 13.2133 6.61188 13.2222 6.64031V6.71779C13.219 6.7207 13.2142 6.72302 13.2129 6.72661C13.1329 6.94815 13.003 7.05631 12.83 7.04522C12.6195 7.03173 12.4956 6.91115 12.4487 6.65959C12.2761 5.73287 11.9226 4.882 11.3709 4.1174C10.6489 3.11687 9.72315 2.36426 8.57269 1.91106C8.17133 1.75296 7.74447 1.6579 7.32653 1.54406C7.08776 1.47901 6.96367 1.38066 6.94269 1.20251C6.9208 1.01663 7.00482 0.890755 7.22633 0.777588C7.28663 0.777588 7.34693 0.777588 7.40724 0.777588Z" fill="#333333" />
+                    <path d="M4.12192 6.29327C4.60882 7.42934 6.28597 9.21272 7.70207 9.85915C7.73292 9.81512 7.76692 9.74718 7.81813 9.69668C8.11537 9.40359 8.40547 9.10183 8.71922 8.82723C9.17581 8.42763 9.85948 8.42746 10.2999 8.84714C10.9135 9.43182 11.5126 10.033 12.0944 10.6494C12.5121 11.0919 12.5342 11.7751 12.1379 12.2347C11.7483 12.6866 11.3292 13.1176 10.8882 13.5198C10.4342 13.9339 9.86501 14.0395 9.2613 13.9877C8.14527 13.892 7.15411 13.4398 6.1938 12.9082C5.00589 12.2506 3.94883 11.4201 3.02448 10.4266C1.90128 9.21935 0.972132 7.88379 0.386922 6.32977C0.173929 5.76417 0.017225 5.18489 0.00113977 4.57484C-0.0150624 3.96037 0.139685 3.4071 0.580079 2.95825C0.92972 2.60189 1.26702 2.23025 1.64321 1.90385C2.22448 1.3995 2.8578 1.40375 3.41831 1.92923C4.01135 2.48521 4.58097 3.068 5.13503 3.66306C5.56053 4.12005 5.55362 4.79588 5.13919 5.26466C4.84602 5.59627 4.52244 5.90105 4.21178 6.21716C4.18484 6.24458 4.15299 6.26717 4.12192 6.29327ZM0.750824 4.53274C0.764831 4.68247 0.777002 4.83239 0.793706 4.98182C0.800845 5.04568 0.815837 5.10884 0.829973 5.17171C1.03493 6.08327 1.4154 6.92331 1.90204 7.71404C3.19958 9.82235 4.92869 11.4692 7.16108 12.5669C7.84299 12.9022 8.54703 13.1728 9.31469 13.241C9.79568 13.2838 10.2176 13.1723 10.5605 12.8143C10.8403 12.5221 11.1263 12.2359 11.4089 11.9465C11.445 11.9096 11.4794 11.8709 11.5116 11.8307C11.7108 11.5824 11.7133 11.3321 11.4969 11.0982C11.2632 10.8456 11.0153 10.606 10.7722 10.3622C10.4713 10.0604 10.1721 9.7569 9.86629 9.46014C9.63799 9.2386 9.38136 9.2361 9.1393 9.44124C9.09341 9.48013 9.05096 9.52323 9.00829 9.56575C8.71252 9.86049 8.41894 10.1574 8.12099 10.45C7.90764 10.6594 7.67074 10.6976 7.41251 10.5671C7.2322 10.476 7.05129 10.3847 6.87788 10.2815C6.09873 9.81733 5.42083 9.22971 4.80867 8.56453C4.26778 7.97679 3.77437 7.35513 3.44131 6.62057C3.26533 6.23245 3.30258 6.04229 3.60815 5.74611C3.91715 5.44661 4.22699 5.14742 4.52355 4.83583C4.75865 4.58882 4.75015 4.34865 4.52566 4.0902C4.49746 4.05774 4.46793 4.02632 4.43754 3.99588C3.95095 3.50845 3.46469 3.0207 2.97715 2.53422C2.65933 2.2171 2.38393 2.21752 2.06258 2.5357C1.78422 2.81131 1.5136 3.09495 1.22962 3.36459C0.892699 3.68451 0.7343 4.06971 0.750824 4.53274Z" fill="#333333" />
+                    <path d="M7.28473 3.17871C7.44788 3.22081 7.68717 3.26227 7.91189 3.34383C9.38909 3.87993 10.3403 4.90517 10.75 6.4254C10.7734 6.51241 10.7904 6.60126 10.8078 6.68977C10.8499 6.90378 10.7331 7.09663 10.5315 7.14856C10.3397 7.19798 10.1419 7.08518 10.0807 6.88066C10.018 6.67108 9.98501 6.45091 9.90615 6.24813C9.41477 4.98456 8.50425 4.20795 7.17326 3.92913C6.92377 3.87687 6.79051 3.68876 6.84231 3.46467C6.88059 3.29909 7.03539 3.17898 7.28473 3.17871Z" fill="#333333" />
+                </g>
+                <defs>
+                    <clipPath id="clip0_1812_6708">
+                        <rect width="13.2222" height="13.2222" fill="white" transform="translate(0 0.777588)" />
+                    </clipPath>
+                </defs>
+            </svg>
+        </div>
+    )
+}

package/src/components/CustomHeader/CustomDropdown.tsx

@@ -0,0 +1,175 @@
+'use client'
+import Link from 'next/link';
+import { useState } from 'react';
+export interface TertiaryProps {
+    id: number,
+    title: string,
+    slug: string,
+}
+export interface SecondaryProps {
+    id: number,
+    title: string,
+    subProducts: TertiaryProps[]
+}
+export interface PrimaryDataProps {
+    id: number,
+    title: string,
+    icon: string,
+    subProducts: SecondaryProps[]
+}
+export interface RootProps {
+    data: PrimaryDataProps[],
+}
+export const PrimaryCustomDropdown = (props: RootProps) => {
+    const { data } = props;
+    const [subMenu, setSubMenu] = useState<SecondaryProps[]>([]);
+    const [subSubMenu, setSubSubMenu] = useState<TertiaryProps[]>([]);
+    const [openPrimaryId, setOpenPrimaryId] = useState<number | null>(null);
+    const [openSecondaryId, setOpenSecondaryId] = useState<number | null>(null);
+    const handleSubmenu = (id: number, subProducts: SecondaryProps[]) => {
+        setSubMenu(subProducts);
+        setSubSubMenu([]);
+        setOpenPrimaryId(id);
+        setOpenSecondaryId(null);
+    }
+    const handleSubSubmenu = (id: number, subProducts: TertiaryProps[]) => {
+        setSubSubMenu(subProducts);
+        setOpenSecondaryId(id);
+    }
+    return (
+        <div className=' w-full flex flex-column p-3' style={{ height: 'calc(100vh - 120px)' }}>
+            <p className='text-lg font-bold primary-dark'>
+                PRODUCTS
+            </p>
+            <div className='h-full w-full flex flex-row'>
+                {/* Main menu */}
+                {data.length > 0 &&
+                    <div className='primary-custom-megamenu'>
+                        <div className='px-3 w-full' style={{ direction: 'ltr' }}>
+                            {data.map((item, i) => {
+                                const isOpen = openPrimaryId === item.id;
+                                return (
+                                    <>
+                                        {item.subProducts.length > 0 ?
+                                            <div
+                                                key={item.id}
+                                                className={`btn ${isOpen ? 'open-dropdown-item' : 'active-dropdown-item'}`}
+                                                onClick={() => handleSubmenu(item.id, item.subProducts)}
+                                            >
+                                                <div className='flex align-items-center text-left text-nowrap gap-3'>
+                                                    <div>
+                                                        <img
+                                                            src={item.icon}
+                                                            alt={item.title + i}
+                                                        />
+                                                    </div>
+                                                    {item.title}
+                                                </div>
+                                                <div>
+                                                    <svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                                        <path d="M1 1L5 5L1 9" stroke="#333333" stroke-linecap="round" stroke-linejoin="round" />
+                                                    </svg>
+                                                </div>
+                                            </div> : <Link
+                                                href={process.env.BASE_FRONTEND_APPLICATION as string}
+                                                key={item.id}
+                                                className={`btn no-underline ${isOpen ? 'open-dropdown-item' : 'active-dropdown-item'}`}
+                                            // onClick={() => handleSubmenu(item.id, item.subProducts)}
+                                            >
+                                                <div className='flex align-items-center text-left text-nowrap gap-3'>
+                                                    <div>
+                                                        <img
+                                                            src={item.icon}
+                                                            alt={item.title + i}
+                                                        />
+                                                    </div>
+                                                    {item.title}
+                                                </div>
+                                                <div>
+                                                    <svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                                        <path d="M1 1L5 5L1 9" stroke="#333333" stroke-linecap="round" stroke-linejoin="round" />
+                                                    </svg>
+                                                </div>
+                                            </Link>}
+                                    </>
+
+                                )
+                            })}
+                        </div>
+                    </div>
+                }
+                {subMenu.length > 0 &&
+                    <div className='primary-custom-megamenu'>
+                        <div className='px-3 w-full' style={{ direction: 'ltr' }}>
+                            {subMenu.map((item) => {
+                                const isOpen = openSecondaryId === item.id;
+                                return (
+                                    <>
+                                        {item.subProducts.length > 0 ?
+
+                                            <div
+                                                key={item.id}
+                                                className={`flex btn gap-3 justify-content-between ${isOpen ? 'open-dropdown-item' : 'active-dropdown-item'}`}
+                                                onClick={() => handleSubSubmenu(item.id, item.subProducts)}
+                                            >
+                                                <div className='flex align-items-center text-left text-nowrap gap-3'>
+                                                    {item.title}
+                                                </div>
+                                                <div>
+                                                    <svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                                        <path d="M1 1L5 5L1 9" stroke="#333333" stroke-linecap="round" stroke-linejoin="round" />
+                                                    </svg>
+                                                </div>
+                                            </div>
+                                            :
+                                            <Link
+                                                href={process.env.BASE_FRONTEND_APPLICATION as string}
+                                                key={item.id}
+                                                className={`flex btn gap-3 justify-content-between ${isOpen ? 'open-dropdown-item' : 'active-dropdown-item'}`}
+                                            // onClick={() => handleSubSubmenu(item.id, item.subProducts)}
+                                            >
+                                                <div className='flex align-items-center text-left text-nowrap gap-3'>
+                                                    {item.title}
+                                                </div>
+                                                <div>
+                                                    <svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                                        <path d="M1 1L5 5L1 9" stroke="#333333" stroke-linecap="round" stroke-linejoin="round" />
+                                                    </svg>
+                                                </div>
+                                            </Link>
+                                        }
+                                    </>
+
+                                )
+                            })}
+                        </div>
+                    </div>
+                }
+                {subSubMenu.length > 0 &&
+                    <div className='primary-custom-megamenu'>
+                        <div className='px-3 w-full' style={{ direction: 'ltr' }}>
+                            {subSubMenu.map((item) => {
+                                return (
+                                    <Link
+                                        href={process.env.BASE_FRONTEND_APPLICATION as string}
+                                        key={item.id}
+                                        className='btn active-dropdown-item no-underline flex'
+                                    >
+                                        <div className='flex align-items-center text-left gap-3'>
+                                            {item.title}
+                                        </div>
+                                        <div>
+                                            <svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                                <path d="M1 1L5 5L1 9" stroke="#333333" stroke-linecap="round" stroke-linejoin="round" />
+                                            </svg>
+                                        </div>
+                                    </Link>
+                                )
+                            })}
+                        </div>
+                    </div>
+                }
+            </div>
+        </div>
+    )
+}