@solidstarters/solid-core-ui 1.1.70 → 1.1.72

package/dist/components/CustomFooter/CustomFooter.tsx

@@ -0,0 +1,264 @@
+"use client";
+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/dist/components/CustomFooter/FooterForm.tsx

@@ -0,0 +1,19 @@
+"use client";
+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/dist/components/CustomHeader/CallIcon.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+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/dist/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>
+    )
+}

package/dist/components/CustomHeader/CustomHeader.tsx

@@ -0,0 +1,64 @@
+"use client"
+import Link from 'next/link'
+import { useRouter } from 'next/navigation'
+import { Button } from 'primereact/button'
+import { useState } from 'react'
+import { CallIcon } from './CallIcon'
+import { PrimaryCustomDropdown } from './CustomDropdown'
+import { EmailIcon } from './EmailIcon'
+import { HeaderCart } from './HeaderCart'
+import { ProductNavData } from './productNavData'
+export const CustomHeader = () => {
+    const [dropdownVisible, setDropdownVisible] = useState(false);
+    const toggleDropdown = () => setDropdownVisible(!dropdownVisible);
+    const router = useRouter();
+    return (
+        <div className='px-6 flex align-items-center fixed w-full z-5 bg-white custom-header' style={{ height: 70 }}>
+            <div className='flex align-items-center px-2'>
+                <Link className="custom-header-logo" href={process.env.BASE_FRONTEND_APPLICATION as string}>
+                    <img
+                        alt='logo'
+                        src={'/images/radix-logo.png'}
+                        className='relative'
+                    />
+                </Link>
+                <ul className='flex align-items-center header-ul'>
+                    <li className={`header-li-btn ${dropdownVisible ? 'active-nav-item' : 'deactive-nav-item'}`} onClick={toggleDropdown}>
+                        <Button plain label="PRODUCTS" className='text-sm text-900' text iconPos='right' icon="pi pi-angle-down" />
+                    </li>
+                    <li className='header-li-btn'>
+                        <Button label="AUTOMATION" className='text-sm text-900' text iconPos='right' icon="pi pi-angle-down" link  onClick={() => window.open(process.env.BASE_FRONTEND_APPLICATION, '_self')}/>
+                    </li>
+                    <li className='header-li-btn'>
+                        <Button link label="COMPANY" className='text-sm text-900' text onClick={() => window.open(process.env.BASE_FRONTEND_APPLICATION, '_self')} />
+                    </li>
+                    <li className='header-li-px'>
+                        <Button label="SEARCH" className='h-3rem text-sm text-900 border-200 border-3 w-20rem text-left flex-1' severity="secondary" text rounded iconPos='right' icon="pi pi-search" />
+                    </li>
+                    <li className='header-li-px header-li-btn'>
+                        <Button link label="LOGIN" className='text-sm text-900' text  onClick={() => window.open(process.env.BASE_FRONTEND_APPLICATION, '_self')}/>
+                    </li>
+                    <li>
+                        <HeaderCart />
+                    </li>
+                    <li className='header-li-px'>
+                        <Button label="+91 22 42537777" className='h-3rem text-sm text-900 border-200 border-3 py-0 pl-2 gap-2' severity="secondary" text rounded icon={<CallIcon />} link  onClick={() => window.open(process.env.BASE_FRONTEND_APPLICATION, '_self')}/>
+                    </li>
+                    <li className='header-li-px'>
+                        <Button label="esales@radix.co.in" className='h-3rem text-sm text-900 border-200 border-3 py-0 pl-2 gap-2' severity="secondary" text rounded icon={<EmailIcon />} link  onClick={() => window.open(process.env.BASE_FRONTEND_APPLICATION, '_self')}/>
+                    </li>
+                </ul>
+            </div>
+            {dropdownVisible && (
+                <div
+                    className='custom-dropdown absolute left-0 bg-white main-megamenu-animation main-megamenu-slide-down-in'
+                // ref={dropdownRef}
+                // onMouseLeave={hideDropdown}
+                >
+                    <PrimaryCustomDropdown data={ProductNavData} />
+                    {/* Dropdown content goes here */}
+                </div>
+            )}
+        </div>
+    )
+}

package/dist/components/CustomHeader/EmailIcon.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+export const EmailIcon = () => {
+    return (
+        <div>
+            <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 28 28" fill="none">
+                <rect x="0.68" y="0.68" width="26.64" height="26.64" rx="13.32" stroke="#333333" strokeWidth="1.36" />
+                <path d="M9.57856 9.00008H17.9893C18.4415 9.0083 18.8156 9.16246 19.1116 9.46255C19.4076 9.76264 19.5597 10.1347 19.5679 10.5786V16.8929C19.5597 17.3368 19.4076 17.7089 19.1116 18.009C18.8156 18.3091 18.4415 18.4632 17.9893 18.4714H9.57856C9.12637 18.4632 8.75228 18.3091 8.4563 18.009C8.16032 17.7089 8.00822 17.3368 8 16.8929V10.5786C8.00822 10.1347 8.16032 9.76264 8.4563 9.46255C8.75228 9.16246 9.12637 9.0083 9.57856 9.00008ZM18.458 10.3443C18.4168 10.2539 18.3552 10.184 18.273 10.1347C18.1907 10.0853 18.0962 10.0566 17.9893 10.0483H9.57856C9.47168 10.0566 9.37713 10.0853 9.29491 10.1347C9.2127 10.184 9.15103 10.2539 9.10992 10.3443L13.7839 13.6248L18.458 10.3443ZM18.5196 11.5899L14.0799 14.6977C13.9895 14.7552 13.8908 14.784 13.7839 14.784C13.6771 14.784 13.5784 14.7552 13.488 14.6977L9.04826 11.5899V16.8929C9.04826 17.0409 9.09965 17.1642 9.20242 17.2629C9.30519 17.3615 9.43057 17.415 9.57856 17.4232H17.9893C18.1373 17.415 18.2627 17.3615 18.3655 17.2629C18.4682 17.1642 18.5196 17.0409 18.5196 16.8929V11.5899Z" fill="#333333" />
+            </svg>
+        </div>
+    )
+}

package/dist/components/CustomHeader/HeaderCart.tsx

@@ -0,0 +1,15 @@
+"use client";
+import { Button } from "primereact/button"
+
+export const HeaderCart = () => {
+    return (
+        <Button text className='flex' link  onClick={() => window.open('https://uat-fe.radix.logicloop.io/', '_self')}>
+            <svg xmlns="http://www.w3.org/2000/svg" width="25" height="23" viewBox="0 0 25 23" fill="none">
+                <path d="M22.9206 13.5215C22.8049 14.0905 22.4721 14.375 21.9222 14.375H9.20299L9.46345 15.8125H21.1408C21.4592 15.8125 21.7196 15.9473 21.9222 16.2168C22.1248 16.4863 22.1971 16.7858 22.1393 17.1152L21.8788 18.2383C22.8049 18.6875 23.2679 19.4362 23.2679 20.4844C23.2679 21.1732 23.0219 21.7572 22.53 22.2363C22.0669 22.7454 21.5026 23 20.837 23C20.1713 23 19.5925 22.7454 19.1005 22.2363C18.6375 21.7572 18.406 21.1732 18.406 20.4844C18.406 19.7656 18.652 19.1667 19.1439 18.6875H10.0278C10.5198 19.1667 10.7658 19.7656 10.7658 20.4844C10.7658 21.1732 10.5198 21.7572 10.0278 22.2363C9.56474 22.7454 9.0004 23 8.33478 23C7.66916 23 7.09035 22.7454 6.59837 22.2363C6.13532 21.7572 5.9038 21.1732 5.9038 20.4844C5.9038 19.526 6.30897 18.7923 7.11929 18.2832L4.08057 2.875H1.04185C0.752445 2.875 0.506454 2.77018 0.303872 2.56055C0.101291 2.35091 0 2.09635 0 1.79688V1.07812C0 0.778646 0.101291 0.524089 0.303872 0.314453C0.506454 0.104818 0.752445 0 1.04185 0H5.51311C5.74463 0 5.94721 0.0898438 6.12085 0.269531C6.32344 0.419271 6.45367 0.613932 6.51155 0.853516L6.90224 2.875H23.9625C24.3098 2.875 24.5847 3.00977 24.7873 3.2793C24.9899 3.54883 25.0478 3.84831 24.9609 4.17773L22.9206 13.5215Z" fill="#12415D" />
+            </svg>
+            <div className='border-circle bg-cyan-600 h-1rem w-1rem flex align-items-center justify-content-center'>
+                <span className="text-white text-sm">0</span>
+            </div>
+        </Button>
+    )
+}