@solidstarters/solid-core-ui 0.1.26

package/src/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/src/components/CustomHeader/EmailIcon.tsx

@@ -0,0 +1,11 @@
+
+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/src/components/CustomHeader/HeaderCart.tsx

@@ -0,0 +1,14 @@
+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>
+    )
+}

package/src/components/CustomHeader/productNavData.tsx

@@ -0,0 +1,179 @@
+import { PrimaryDataProps } from "./CustomDropdown";
+
+export const ProductNavData: PrimaryDataProps[] = [
+    {
+        id: 1,
+        title: "Temperature",
+        icon: '/images/Navigation/Temperature.svg',
+        subProducts: [
+            {
+                id: 1,
+                title: "Level 11 PID Temperature Controllers",
+                subProducts: [
+                    {
+                        id: 1,
+                        title: "Level 112 PID Temperature Controllers - Mid Range",
+                        slug: 'PID Temperature Controllers - Mid Range'
+                    },
+                    {
+                        id: 2,
+                        title: "Level 113 PID Temperature Controllers - Value Range",
+                        slug: 'PID Temperature Controllers - Value Range'
+                    },
+                ],
+            },
+            {
+                id: 2,
+                title: "Level 22 Temperature Transmitters",
+                subProducts: [
+                    {
+                        id: 1,
+                        title: "Level 212 PID Temperature Controllers - Mid Range",
+                        slug: 'PID Temperature Controllers - Mid Range'
+                    },
+                    {
+                        id: 2,
+                        title: "Level 213 PID Temperature Controllers - Value Range",
+                        slug: 'PID Temperature Controllers - Value Range'
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        id: 2,
+        title: "Level",
+        icon: '/images/Navigation/Level.svg',
+        subProducts: [
+            {
+                id: 1,
+                title: "Level 33 PID Temperature Controllers",
+                subProducts: [
+                    {
+                        id: 1,
+                        title: "Level 312 PID Temperature Controllers - Mid Range",
+                        slug: 'PID Temperature Controllers - Mid Range'
+                    },
+                    {
+                        id: 2,
+                        title: "Level 313 PID Temperature Controllers - Value Range",
+                        slug: 'PID Temperature Controllers - Value Range'
+                    },
+                ],
+            },
+            {
+                id: 2,
+                title: "Level 44 Temperature Transmitters",
+                subProducts: [
+                    {
+                        id: 1,
+                        title: "Level 412 PID Temperature Controllers - Mid Range",
+                        slug: 'PID Temperature Controllers - Mid Range'
+                    },
+                    {
+                        id: 2,
+                        title: "Level 413 PID Temperature Controllers - Value Range",
+                        slug: 'PID Temperature Controllers - Value Range'
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        id: 3,
+        title: "Pressure",
+        icon: '/images/Navigation/Presure.svg',
+        subProducts: [],
+    },
+    {
+        id: 4,
+        title: "Flow",
+        icon: '/images/Navigation/Temperature.svg',
+        subProducts: [],
+    },
+    {
+        id: 5,
+        title: "BAS & HVAC",
+        icon: '/images/Navigation/Level.svg',
+        subProducts: [],
+    },
+    {
+        id: 6,
+        title: "RTDs",
+        icon: '/images/Navigation/Presure.svg',
+        subProducts: [],
+    },
+    {
+        id: 7,
+        title: "Thermocouples",
+        icon: '/images/Navigation/Temperature.svg',
+        subProducts: [],
+    },
+    {
+        id: 8,
+        title: "PID Controllers",
+        icon: '/images/Navigation/Level.svg',
+        subProducts: [],
+    },
+    {
+        id: 9,
+        title: "Pressure & Temperature Gauges",
+        icon: '/images/Navigation/Presure.svg',
+        subProducts: [],
+    },
+    {
+        id: 10,
+        title: "Digital Panel Meters",
+        icon: '/images/Navigation/Temperature.svg',
+        subProducts: [],
+    },
+    {
+        id: 11,
+        title: "Temperature Transmitters",
+        icon: '/images/Navigation/Level.svg',
+        subProducts: [],
+    },
+    {
+        id: 12,
+        title: "Signal Isolators ",
+        icon: '/images/Navigation/Presure.svg',
+        subProducts: [],
+    },
+
+    {
+        id: 13,
+        title: "GPS Clocks",
+        icon: '/images/Navigation/Temperature.svg',
+        subProducts: [],
+    },
+    {
+        id: 14,
+        title: "SCR Power Regulators",
+        icon: '/images/Navigation/Level.svg',
+        subProducts: [],
+    },
+    {
+        id: 15,
+        title: "Data Logging Products",
+        icon: '/images/Navigation/Presure.svg',
+        subProducts: [],
+    },
+    {
+        id: 16,
+        title: "Humidity & Temperature",
+        icon: '/images/Navigation/Temperature.svg',
+        subProducts: [],
+    },
+    {
+        id: 17,
+        title: "Flow Meters",
+        icon: '/images/Navigation/Level.svg',
+        subProducts: [],
+    },
+    {
+        id: 18,
+        title: "Pressure",
+        icon: '/images/Navigation/Presure.svg',
+        subProducts: [],
+    },
+]

package/src/components/FormView/DetailsViews.tsx

@@ -0,0 +1,46 @@
+"use client"
+import { Button } from 'primereact/button';
+import { useState } from 'react';
+import { OrderPaymentDetails } from './OrderPaymentDetails';
+import { OrderTableDetails } from './OrderTableDetails';
+
+export const DetailsViews = () => {
+    const [details, setDetails] = useState("Product Details");
+    const detailsData = [
+        {
+            title: 'Product Details',
+            component: <OrderTableDetails />
+        },
+        {
+            title: 'Payment Details',
+            component: <OrderPaymentDetails />
+        },
+    ]
+    return (
+        <div className="">
+            <div className='flex gap-3'>
+                {detailsData.map((detail, i) => {
+                    return (
+                        <Button
+                            key={i}
+                            label={detail.title}
+                            text={detail.title !== details ? true : false}
+                            onClick={() => setDetails(detail.title)}
+                            className={`outline-none ${details === detail.title ? 'surface-200 border-200 text-color outline-none' : 'text-color font-normal'}`}
+                            size="small"
+                        />
+                    )
+                })}
+            </div>
+            <div className='mt-3'>
+                {detailsData.map((detail, i) => (
+                    details === detail.title && (
+                        <div key={i}>
+                            {detail.component}
+                        </div>
+                    )
+                ))}
+            </div>
+        </div>
+    )
+}

package/src/components/FormView/OrderAddressDetails.tsx

@@ -0,0 +1,69 @@
+
+export const OrderAddressDetails = () => {
+    const AddressCard = () => {
+        return (
+            <div>
+                <p className='text-sm font-semibold'>
+                    Rohit
+                </p>
+                <div className='text-sm font-semibold'>
+                    Address:
+                </div>
+                <div className="text-sm max-w-15rem">
+                    Flat No. 202, Rose Apartments,
+                    Sector 12, Kandivali (East), Mumbai,
+                    Maharashtra - 400001, India
+                </div>
+            </div>
+        )
+    }
+    const orderData = [
+        {
+            key: 'Order Date',
+            value: 'Fri, 3 July 2024'
+        },
+        {
+            key: 'Order ID',
+            value: 'IN2024/14'
+        },
+        {
+            key: 'Expected Delivery',
+            value: 'Fri, 23 Aug 2024'
+        },
+        {
+            key: 'Tracking id',
+            value: 'F25656151651'
+        },
+        {
+            key: 'Total Amount',
+            value: '₹ 1199.00'
+        },
+    ]
+    return (
+        <div className="grid">
+            <div className="col-6">
+                <div className="text-sm text-color-secondary">Customer</div>
+                <AddressCard />
+                <p className="text-sm text-color-secondary">Delivery Address</p>
+                <AddressCard />
+                <p className='text-sm mb-0'>
+                    <span className='font-semibold'>Mobile number: </span>+91 95635 02322
+                </p>
+            </div>
+            <div className="col-6">
+                <div className='w-5'>
+                    {orderData.map((order, index) => (
+                        <div className="grid">
+                            <div className='col-6 text-sm text-color-secondary'>
+                                {order.key}:
+                            </div>
+                            <div className='col-6 text-sm'>
+                                {order.value}
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </div>
+    )
+}

package/src/components/FormView/OrderPaymentDetails.tsx

@@ -0,0 +1,17 @@
+
+export const OrderPaymentDetails = () => {
+    return (
+        <div className='p-3 border-round-lg bg-cyan-50'>
+            <div className='grid'>
+                <div className='md:col-6 sm:col-12'>
+                    <div className='text-sm text-500 md:w-6 w-full'>Payment Date : <span className='text-color'> Fri, 23 Aug 2024</span></div>
+                    <div className='text-sm text-500 md:w-6 w-full mt-2'>Transaction ID : <span className='text-color'> IN2024/14</span></div>
+                </div>
+                <div className='md:col-6 sm:col-12'>
+                    <div className='text-sm text-500 md:w-6 w-full'>Payment Mode : <span className='text-color'> Fri, 23 Aug 2024</span></div>
+                    <div className='text-sm text-500 md:w-6 w-full mt-2'>Amount : <span className='text-color'>₹ 1199.00</span></div>
+                </div>
+            </div>
+        </div>
+    )
+}

package/src/components/FormView/OrderTableDetails.tsx

@@ -0,0 +1,35 @@
+import { Column } from 'primereact/column'
+import { DataTable } from 'primereact/datatable'
+
+export const OrderTableDetails = () => {
+    const orderedProduct = [{
+        id: '1000',
+        name: 'EMS for RH, T and DP in Clean Room Area',
+        image: 'bamboo-watch.jpg',
+        price: 15000,
+        taxes: 18,
+        quantity: 24,
+        discountAmount: 200,
+        totalAmount: 17500
+    }]
+    const productBodyTemplate = (product: any) => {
+        return (
+            <div className='flex gap-3'>
+                <img src={`https://primefaces.org/cdn/primereact/images/product/${product.image}`} alt={product.image} className="w-3rem shadow-2 border-round" />
+                <div className='text-sm font-bold'>{product.name}</div>
+            </div>
+        )
+    };
+
+    const headerClass = "font-normal";
+    return (
+        <DataTable value={orderedProduct} tableStyle={{ minWidth: '60rem' }}>
+            <Column field='products' header="Products" body={productBodyTemplate} headerClassName={headerClass} className='max-w-14rem'></Column>
+            <Column field='quantity' header="Quantity" headerClassName={headerClass} className='font-semibold'></Column>
+            <Column field='price' header="Price" headerClassName={headerClass} className='font-semibold'></Column>
+            <Column field='taxes' header="Taxes(%)" headerClassName={headerClass} className='font-semibold'></Column>
+            <Column field='discountAmount' header="Discount Amount" headerClassName={headerClass} className='font-semibold'></Column>
+            <Column field='totalAmount' header="Total Amount" headerClassName={headerClass} className='font-semibold'></Column>
+        </DataTable>
+    )
+}

package/src/components/FormView/OrderedProductDetail.tsx

@@ -0,0 +1,21 @@
+
+export const OrderedProductDetail = () => {
+    return (
+        <div className="flex flex-row gap-3">
+            <img className="w-8rem shadow-2 border-round" src={`https://primefaces.org/cdn/primereact/images/product/bamboo-watch.jpg`} alt='order' />
+            <div className='flex flex-column justify-content-between'>
+                <div>
+                    <div className='text-xl font-semibold'>
+                        EMS for RH, T and DP in Clean Room Area
+                    </div>
+                    <div className='text-xs max-w-25rem text-color-secondary'>
+                        Lorem ipsum dolor sit amet consectetur. Aliquam et et nibh aliquam hendrerit. Diam amet etiam in consequat amet vitae.
+                    </div>
+                </div>
+                <div className='text-sm font-semibold'>
+                    Price: ₹ 17,500 <span className='font-normal text-xs text-color-secondary'>(incl. of all taxes)</span>
+                </div>
+            </div>
+        </div>
+    )
+}

package/src/components/Tag/CustomTag.tsx

@@ -0,0 +1,49 @@
+interface Props {
+    className?: string,
+    value: string,
+    severity: string,
+}
+
+const getSeverityColor = (severity: string): { textColor: string; backgroundColor: string } => {
+    let textColor;
+    let backgroundColor;
+
+    switch (severity) {
+        case 'Delivered':
+            textColor = '#148C00';
+            backgroundColor = '#E8FFEA';
+            break;
+        case 'Returned':
+            textColor = '#D89100';
+            backgroundColor = '#FFF7E5';
+            break;
+        case 'Cancelled':
+            textColor = '#B50000';
+            backgroundColor = '#FFEAEA';
+            break;
+        case 'On The Way':
+            textColor = '#12415D';
+            backgroundColor = '#E3F5FF';
+            break;
+        default:
+            textColor = '#808080';
+            backgroundColor = '#FFF7E5';
+    }
+    return { textColor, backgroundColor };
+};
+
+export const CustomTag = (props: Props) => {
+    const { className, value, severity } = props;
+    const severityColor = getSeverityColor(severity);
+
+    return (
+        <div className='flex'>
+            <div
+                className={`border-round text-xs font-semibold ${className}`}
+                style={{ backgroundColor: severityColor.backgroundColor, color: severityColor.textColor, padding: '0.5rem 0.75rem' }}
+            >
+                {value}
+            </div>
+        </div>
+    )
+}