+ {/* Benchmark Scale */} +

+ {Array.from({ length: 6 }, (_, idx) => { + + console.log(idx, _, "idxidx") + console.log(maxValue - (maxValue / 5) * idx, "idxidx2222222") + + const scaleValue = maxValue - (maxValue / 5) * idx; // Calculate the scale value + return ( +

+ {scaleValue} +

+ ); + })} +

+ +

+ {data.map((bar, index) => { + return ( +

+ {/* Render multiple vertical lines */} + {[...Array(numberOfLines)].map((_, lineIndex) => ( +

+ ))} + +

+ {/*

Value 1: {bar.value1}

Value 2: {bar.value2}

Value 3: {bar.value3}

*/} + +

+ {/*

Value 1: {bar.value1}

Value 2: {bar.value2}

Value 3: {bar.value3}

*/} +

Value 1: {bar.value1}

Value 2: {bar.value2}

Value 3: {bar.value3}

{bar.month}

{/* Display month label */} +

+ ); + })} +

+ ); +}; + +export default PozoPublicBarchart; diff --git a/src/Components/Charts/PozoPublicBarchart.scss b/src/Components/Charts/PozoPublicBarchart.scss new file mode 100644 index 0000000..3e46333 --- /dev/null +++ b/src/Components/Charts/PozoPublicBarchart.scss @@ -0,0 +1,138 @@ +.bar-chart-container { + display: flex; + height: inherit; + // overflow: scroll; + align-items: flex-end; + font-family: "Gilroy" !important; + /* Align bars to the bottom */ +} + +.benchmark-scale { + display: flex; + height: inherit; + flex-direction: column; + justify-content: space-between; + padding-right: 10px; + /* Space between scale and bars */ +} + +.scale-value { + width: 30px; + /* Width of the scale */ + position: relative; + display: flex; + align-items: flex-end; + /* Align text to bottom */ + color: #555; + font-size: 14px; + font-weight: 600; + /* Color of scale text */ +} + +/* Adjust the bar-chart styles */ +.bar-chart { + height: 103%; + display: flex; + justify-content: space-around; + align-items: flex-end; + // height: max-content; /* Set a fixed height for the chart */ + width: calc(100% - 50px); + /* Reduce width for the scale */ +} + +.bar-container { + background-color: #EAEAEA; + text-align: center; + height: 100%; + width: 25px; + position: relative; + /* Needed for tooltip positioning */ +} + +.bar1 { + width: 25px; + background-color: #EAEAEA; + display: flex; + height: 100%; + border-top-left-radius: 8px; + border-top-right-radius: 8px; + flex-direction: column-reverse; + position: relative; + top: 0; + /* Needed for tooltip */ +} + +/* Vertical Line Overlay Styling */ +.vr-line { + position: absolute; + width: 2px; + /* Width of each vertical line */ + background-color: rgba(255, 255, 255, 0.377); + border-top-left-radius: 8px; + border-top-right-radius: 8px; + height: 100%; + /* Span the full height of the bar */ + z-index: 1; + /* Ensure it appears on top of the segments */ +} + +/* Styling for each bar segment */ +.bar-segment { + width: 100%; + border-top-left-radius: 8px; + border-top-right-radius: 8px; + position: relative; + /* For tooltip positioning */ + transition: background-color 0.3s, transform 0.3s; + /* For hover effect */ +} + +/* Colors for each segment */ +.segment1 { + background-color: #F6CF7D; +} + +.segment2 { + background-color: #EE89DF; +} + +.segment3 { + background-color: #978FED; +} + +/* Tooltip Styling */ +.tooltip { + position: absolute; + left: 50%; + bottom: 100%; + transform: translateX(-50%); + padding: 5px 8px; + background-color: black; + color: white; + font-size: 12px; + border-radius: 4px; + opacity: 0; + pointer-events: none; + transition: opacity 0.3s; + white-space: nowrap; + z-index: 260 !important; + text-align: left; + height: max-content; + /* Make sure tooltip appears above everything */ +} + +/* Hover Effect: Show tooltip */ +.bar-container:hover .tooltip { + opacity: 1; +} + +.bar-container:hover { + transform: translateY(-5px); + /* Slightly move the segment on hover */ +} + +.bar-label { + margin-top: 5px; + font-size: 12px; + /* Space between label and bar */ +} \ No newline at end of file diff --git a/src/Components/Charts/PozoPublicBarchart2.jsx b/src/Components/Charts/PozoPublicBarchart2.jsx new file mode 100644 index 0000000..f7072f3 --- /dev/null +++ b/src/Components/Charts/PozoPublicBarchart2.jsx @@ -0,0 +1,115 @@ +import React from 'react'; +import "./PozoPublicBarchart2.scss"; // Adjust path based on your folder structure + +const PozoPublicBarchart = ({ data }) => { + const numberOfLines = 8; // Set how many vertical lines you want per bar + const maxValue = Math.max(...data.flatMap(bar => [bar.value1, bar.value2, bar.value3])); + + const maxHeight = 200; // Define a maximum height for the bars (in pixels) + const scaleFactor = maxHeight / maxValue; // Calculate scale factor to scale bar heights + + return ( +

+ {/* Benchmark Scale */} +

+ {Array.from({ length: 6 }, (_, idx) => { + const scaleValue = Math.round((maxValue / 5) * (5 - idx)); // Ensure the benchmark aligns with the max value + return ( +

+ {scaleValue} +

+ ); + })} +

+ +

+ {data.map((bar, index) => { + + const value1Height = bar.value1 * scaleFactor; + const value2Height = bar.value2 * scaleFactor; + const value3Height = bar.value3 * scaleFactor; + + console.log(value1Height, 'value1Height111111') + console.log(value2Height, 'value1Height222222') + console.log(value3Height, 'value1Height3333333') + + return ( +

+ {/* Render multiple vertical lines */} + {[...Array(numberOfLines)].map((_, lineIndex) => ( +

+ ))} + + {/* Independent Bar segments starting from 0 */} +

+ + {/*

Value 1: {bar.value1}

Value 2: {bar.value2}

Value 3: {bar.value3}

*/} +

+ {/*

Value 1: {bar.value1}

Value 2: {bar.value2}

Value 3: {bar.value3}

*/} +

Value 1: {bar.value1}

Value 2: {bar.value2}

Value 3: {bar.value3}

{bar.month}

{/* Display month label */} +

+ ); + })} +

+ ); +}; + +export default PozoPublicBarchart; diff --git a/src/Components/Charts/PozoPublicBarchart2.scss b/src/Components/Charts/PozoPublicBarchart2.scss new file mode 100644 index 0000000..83cfc14 --- /dev/null +++ b/src/Components/Charts/PozoPublicBarchart2.scss @@ -0,0 +1,295 @@ +.bar-chart-container { + display: flex; + height: inherit; + // overflow: scroll; + align-items: flex-end; + /* Align bars to the bottom */ + font-family: "Gilroy" !important; +} + +.benchmark-scale { + display: flex; + height: inherit; + flex-direction: column; + justify-content: space-between; + padding-right: 10px; + /* Space between scale and bars */ +} + +.scale-value { + width: 30px; + /* Width of the scale */ + position: relative; + display: flex; + align-items: flex-end; + /* Align text to bottom */ + color: #555; + font-size: 14px; + font-weight: 600; + /* Color of scale text */ +} + +/* Adjust the bar-chart styles */ +.bar-chart { + height: 103%; + display: flex; + justify-content: space-around; + align-items: flex-end; + // height: max-content; /* Set a fixed height for the chart */ + width: calc(100% - 50px); + /* Reduce width for the scale */ +} + +.bar-container { + background-color: #EAEAEA; + text-align: center; + height: inherit; + width: 25px; + position: relative; + /* Needed for tooltip positioning */ +} + +.bar { + width: 25px; + background-color: #EAEAEA; + display: flex; + height: 100%; + border-top-left-radius: 8px; + border-top-right-radius: 8px; + flex-direction: column-reverse; + position: relative; + top: 0; + /* Needed for tooltip */ +} + +/* Vertical Line Overlay Styling */ +.vr-line { + position: absolute; + width: 2px; + /* Width of each vertical line */ + background-color: rgba(255, 255, 255, 0.377); + border-top-left-radius: 8px; + border-top-right-radius: 8px; + height: 100%; + /* Span the full height of the bar */ + z-index: 1; + /* Ensure it appears on top of the segments */ +} + +/* Styling for each bar segment */ +.bar-segment { + width: 100%; + border-top-left-radius: 8px; + border-top-right-radius: 8px; + position: relative; + /* For tooltip positioning */ + transition: background-color 0.3s, transform 0.3s; + /* For hover effect */ +} + +/* Colors for each segment */ +.segment1 { + background-color: #F6CF7D; +} + +.segment2 { + background-color: #EE89DF; +} + +.segment3 { + background-color: #978FED; +} + +/* Tooltip Styling */ +.tooltip { + position: absolute; + left: 50%; + bottom: 100%; + transform: translateX(-50%); + padding: 5px 8px; + background-color: black; + color: white; + font-size: 12px; + border-radius: 4px; + opacity: 0; + pointer-events: none; + transition: opacity 0.3s; + white-space: nowrap; + z-index: 260 !important; + text-align: left; + height: max-content; + /* Make sure tooltip appears above everything */ +} + +/* Hover Effect: Show tooltip */ +.bar-container:hover .tooltip { + opacity: 1; +} + +.bar-container:hover { + transform: translateY(-5px); + /* Slightly move the segment on hover */ +} + +.bar-label { + margin-top: 15px; + font-size: 12px; + /* Space between label and bar */ +} + +.bar-container { + height: 100%; + animation: shutter-in-bottom 2.5s ease 0s 1 alternate forwards; +} + +@keyframes shutter-in-bottom { + + 0% { + transform: rotateX(100deg); + transform-origin: bottom; + opacity: 0; + } + + 100% { + transform: rotateX(0); + transform-origin: bottom; + opacity: 1; + } +} + + +// .bar-chart-container { +// display: flex; +// height: 100vh; +// overflow: scroll; +// align-items: flex-end; +// /* Align bars to the bottom */ +// } + +// .benchmark-scale { +// display: flex; +// flex-direction: column; +// justify-content: space-between; +// padding-right: 10px; +// /* Space between scale and bars */ +// } + +// .scale-value { +// width: 30px; +// /* Width of the scale */ +// position: relative; +// display: flex; +// align-items: flex-end; +// /* Align text to bottom */ +// color: #555; +// /* Color of scale text */ +// } + +// /* Adjust the bar-chart styles */ +// .bar-chart { +// display: flex; +// justify-content: space-around; +// align-items: flex-end; +// height: max-content; +// /* Set a fixed height for the chart */ +// width: calc(100% - 50px); +// /* Reduce width for the scale */ +// } + +// .bar-container { +// background-color: #EAEAEA; +// text-align: center; +// position: relative; +// /* Needed for tooltip positioning */ +// } + +// .bar { +// width: 25px; +// background-color: #EAEAEA; +// display: flex; +// height: 100%; +// border-top-left-radius: 8px; +// border-top-right-radius: 8px; +// flex-direction: column-reverse; +// position: relative; +// top: 0px; +// /* Needed for tooltip */ +// } + +// /* Vertical Line Overlay Styling */ +// .vr-line { +// position: absolute; +// width: 2px; +// /* Width of each vertical line */ +// background-color: rgba(255, 255, 255, 0.377); +// border-top-left-radius: 8px; +// border-top-right-radius: 8px; +// height: 100%; +// /* Span the full height of the bar */ +// z-index: 1; +// /* Ensure it appears on top of the segments */ +// } + +// /* Styling for each bar segment */ +// .bar-segment { +// width: 100%; +// border-top-left-radius: 8px; +// border-top-right-radius: 8px; +// position: relative; +// /* For tooltip positioning */ +// transition: background-color 0.3s, transform 0.3s; +// /* For hover effect */ +// } + +// /* Colors for each segment */ +// .segment1 { +// background-color: #F6CF7D; +// } + +// .segment2 { +// background-color: #EE89DF; +// } + +// .segment3 { +// background-color: #978FED; +// } + +// /* Tooltip Styling */ +// .tooltip { +// position: absolute; +// left: 50%; +// bottom: 100%; +// transform: translateX(-50%); +// padding: 5px; +// background-color: black; +// color: white; +// font-size: 12px; +// border-radius: 4px; +// opacity: 0; +// pointer-events: none; +// transition: opacity 0.3s; +// white-space: nowrap; +// z-index: 26; +// /* Make sure tooltip appears above everything */ +// } + +// /* Hover Effect: Show tooltip */ +// .bar-segment:hover .tooltip { +// opacity: 1; +// } + +// .bar-segment:hover { +// transform: translateY(-5px); +// /* Slightly move the segment on hover */ +// } + +// .bar-label { +// margin-top: 40px; +// /* Space between label and bar */ +// } + +// .hrLineforHighestValue { +// position: absolute; +// right: 0; +// width: 95vw; +// } \ No newline at end of file diff --git a/src/Components/Charts/PozoPublicPieChart.jsx b/src/Components/Charts/PozoPublicPieChart.jsx new file mode 100644 index 0000000..7cdaafe --- /dev/null +++ b/src/Components/Charts/PozoPublicPieChart.jsx @@ -0,0 +1,196 @@ + import React, { useState, useEffect } from "react"; + import "./PozoPublicPiechart.scss" + + // Helper function to calculate the arcs for the donut chart + const calculateArcs = (data) => { + const total = data.reduce((acc, item) => acc + item.value, 0); + let cumulativePercentage = 0; + + return data.map((item) => { + const percentage = (item.value / total) * 100; + const startAngle = cumulativePercentage; + const endAngle = cumulativePercentage + percentage; + cumulativePercentage = endAngle; + + const largeArcFlag = percentage > 50 ? 1 : 0; + + const outerRadius = 1; // Outer radius for the arc + const innerRadius = 0.7; // Inner radius for the hollow part + + // Calculate the outer arc points + const startXOuter = outerRadius * Math.cos((2 * Math.PI * startAngle) / 100); + const startYOuter = outerRadius * Math.sin((2 * Math.PI * startAngle) / 100); + const endXOuter = outerRadius * Math.cos((2 * Math.PI * endAngle) / 100); + const endYOuter = outerRadius * Math.sin((2 * Math.PI * endAngle) / 100); + + // Calculate the inner arc points + const startXInner = innerRadius * Math.cos((2 * Math.PI * startAngle) / 100); + const startYInner = innerRadius * Math.sin((2 * Math.PI * startAngle) / 100); + const endXInner = innerRadius * Math.cos((2 * Math.PI * endAngle) / 100); + const endYInner = innerRadius * Math.sin((2 * Math.PI * endAngle) / 100); + + // Create the path for the arc (outer and inner) + const pathData = [ + `M ${startXOuter} ${startYOuter}`, // Move to start of outer arc + `A ${outerRadius} ${outerRadius} 0 ${largeArcFlag} 1 ${endXOuter} ${endYOuter}`, // Outer arc + `L ${endXInner} ${endYInner}`, // Line to inner arc + `A ${innerRadius} ${innerRadius} 0 ${largeArcFlag} 0 ${startXInner} ${startYInner}`, // Inner arc + `Z`, // Close the path + ].join(" "); + + return { + pathData, + color: item.color, + value: item.value, + percentage: percentage.toFixed(2), + name: item.name, + date: item.date, // Add date to return object + }; + + + }); + }; + + const PieChart = ({ data }) => { + const [tooltip, setTooltip] = useState({ x: 0, y: 0, content: '', visible: false }); + const [filter, setFilter] = useState(""); // State to hold the filter criteria + const [dateFilter, setDateFilter] = useState(""); // State to hold the date filter + const [animatedValues, setAnimatedValues] = useState(data.map(item => ({ ...item, animatedValue: 0 }))); // State for animated values + + // Function to filter data + const filteredData = animatedValues.filter(item => + item.name.toLowerCase().includes(filter.toLowerCase()) && + (!dateFilter || item.date.includes(dateFilter)) // Filter by date + ); + + const handleMouseOver = (event, arc) => { + setTooltip({ + x: event.clientX + 10, + y: event.clientY - 20, + content: `${arc.name}: ₹${arc.value} (${arc.percentage}%) on ${arc.date}`, + visible: true, + }); + }; + + const handleMouseOut = () => { + setTooltip((prev) => ({ ...prev, visible: false })); + }; + + const arcs = calculateArcs(filteredData); + console.log(arcs, "yusgd"); + // Animate values from 0 to actual value + useEffect(() => { + const animationDuration = 2000; // Animation duration in ms + const interval = 50; // Interval for the animation + const step = Math.floor(animationDuration / interval); + + console.log("Animated Values:", animatedValues); + + const newValues = animatedValues.map(item => ({ + ...item, + animatedValue: 0, // Start from 0 + })); + + let animationFrame = 0; + const intervalId = setInterval(() => { + if (animationFrame < step) { + setAnimatedValues(newValues.map(item => ({ + ...item, + animatedValue: Math.round((item.value / step) * (animationFrame + 0)), // Increment the value + }))); + animationFrame++; + } else { + clearInterval(intervalId); // Stop the animation when complete + setAnimatedValues(newValues.map(item => ({ ...item, animatedValue: item.value }))); // Set to final value + } + }, interval); + + return () => clearInterval(intervalId); // Cleanup interval on unmount + }, []); + + return ( +

+ {/* setFilter(e.target.value)} + style={{ marginBottom: '1rem', padding: '8px', borderRadius: '4px', border: '1px solid #ccc' }} + /> + setDateFilter(e.target.value)} + style={{ marginBottom: '1rem', padding: '8px', borderRadius: '4px', border: '1px solid #ccc' }} + /> */} + + +

+ +

+ {arcs.map((arc, index) => ( +

+ {arc.name} +

₹{animatedValues[index]?.animatedValue}

({arc.percentage}%)

+ ))} +

+ + {tooltip.visible && ( +

+ {tooltip.content} +

+ )} +

+ ); + }; + + export default PieChart; diff --git a/src/Components/Charts/PozoPublicPiechart.scss b/src/Components/Charts/PozoPublicPiechart.scss new file mode 100644 index 0000000..9891314 --- /dev/null +++ b/src/Components/Charts/PozoPublicPiechart.scss @@ -0,0 +1,3 @@ +.piechartsize { + width: 100px; +} \ No newline at end of file diff --git a/src/Components/Charts/import React from 'react';.txt b/src/Components/Charts/import React from 'react';.txt new file mode 100644 index 0000000..a6b7234 --- /dev/null +++ b/src/Components/Charts/import React from 'react';.txt @@ -0,0 +1,73 @@ +import React from 'react'; +import './PozoPublicBarchart.scss'; // Adjust path based on your folder structure + +const PozoPublicBarchart = ({ data }) => { + const numberOfLines = 8; // Set how many vertical lines you want per bar + const maxValue = Math.max(...data.flatMap(bar => [bar.value1, bar.value2, bar.value3])); // Calculate the max value across all segments + const desiredMaxHeight = 100; // Define the desired maximum height for the bars (in pixels) + const scaleFactor = desiredMaxHeight / maxValue; // Calculate scale factor to scale bar heights + + return ( +

+ {/* Benchmark Scale */} +

+ {Array.from({ length: 6 }, (_, idx) => { + const scaleValue = Math.round(maxValue - (maxValue / 5) * idx); // Calculate the scale value + return ( +

+ {scaleValue} +

+ ); + })} +

+ +

+ {data.map((bar, index) => { + return ( +

+ {/* Render multiple vertical lines */} + {[...Array(numberOfLines)].map((_, lineIndex) => ( +

+ ))} + +

Value 1: {bar.value1}

Value 2: {bar.value2}

Value 3: {bar.value3}

{bar.month}

{/* Display month label */} +

+ ); + })} +

+ ); +}; + +export default PozoPublicBarchart; diff --git a/src/Components/Collapse/PozoPublicCollapse.jsx b/src/Components/Collapse/PozoPublicCollapse.jsx new file mode 100644 index 0000000..36e3637 --- /dev/null +++ b/src/Components/Collapse/PozoPublicCollapse.jsx @@ -0,0 +1,89 @@ +import { IoIosArrowDropup, IoIosArrowDropdown } from "react-icons/io"; +import React, { useState, useRef, useEffect } from 'react'; +import "../Collapse/PozoPublicCollapse.scss"; +import { PiPencilSimpleLight } from "react-icons/pi"; + +const PozoPublicCollapse = ({ + title = "Item description", + children, + children2, + isOpenInitially = false, + width = "100%", + className = "", + title2 = "", + isEdit, +}) => { + const [isOpen, setIsOpen] = useState(isOpenInitially); // Use false by default + const contentRef = useRef(null); + const collapseRef = useRef(null); + const [contentHeight, setContentHeight] = useState("0px"); + + const toggleCollapse = () => { + // Explicitly set the state based on current value + if (!isOpen) { + setIsOpen(true); // Open the collapse + } else { + setIsOpen(false); // Close the collapse + } + }; + + useEffect(() => { + setContentHeight(isOpen ? `${contentRef.current.scrollHeight}px` : "0px"); + }, [isOpen]); + + const handleClickOutside = (event) => { + if (collapseRef.current && !collapseRef.current.contains(event.target)) { + setIsOpen(false); // Close the collapse if clicked outside + } + }; + + // Uncomment this block if you want to close the collapse when clicking outside of it + // useEffect(() => { + // document.addEventListener('mousedown', handleClickOutside); + // return () => { + // document.removeEventListener('mousedown', handleClickOutside); + // }; + // }, []); + + return ( +

{title} + {title2} + {isEdit && } + +

+ {isOpen ? : } +

+ + {isOpen && ( +

+ {children} +

+ {children2} +

+ )} +

+ ); +}; + +export default PozoPublicCollapse; diff --git a/src/Components/Collapse/PozoPublicCollapse.scss b/src/Components/Collapse/PozoPublicCollapse.scss new file mode 100644 index 0000000..8e6e67d --- /dev/null +++ b/src/Components/Collapse/PozoPublicCollapse.scss @@ -0,0 +1,74 @@ +.PozoPublicCollapse-Master { + width: 100%; + font-family: var(--Pozo-Fontfamily); + height: 100%; + max-height: auto; + + .PozoPublicCollapseMain { + display: flex; + flex-direction: column; + position: relative; + width: 100%; + border: 1px solid var(--input-BorderColor); // Default border color + border-radius: 6px; + transition: border-color 0.3s ease; // Smooth transition for border color + + &.open { + border-color: #0071E3; // Border color when open + } + + &:hover { + border-color: #0071E3; // Border color on hover + } + + &:focus-within { + border-color: #0071E3; // Border color on focus + } + + .PozoPublicCollapse-Header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 8px 20px; + border-radius: 6px; + background-color: #F5F5F5; + cursor: pointer; + width: 100%; + text-transform: capitalize; + color: #0909099d; + font-size: 15px; + + div { + font-weight: 550; + font-family: "Gilroy"; + } + } + + .PozoPublicCollapse-Content { + // overflow: hidden; + transition: height 0.3s ease, opacity 0.3s ease; + padding: 0px 10px; + background-color: #FFF; + border-radius: 6px; + width: 100%; + height: max-content; + font-size: 14px !important; + font-weight: 400 !important; + + p div { + font-size: 14px !important; + font-weight: 400 !important; + } + } + } + + .title2Collapse { + font-size: 14px; + color: #7D7D7D; + text-align: center; + + svg { + margin-bottom: -2px; + } + } +} \ No newline at end of file diff --git a/src/Components/CollapseAuto/PozoPublicCollapseAuto.jsx b/src/Components/CollapseAuto/PozoPublicCollapseAuto.jsx new file mode 100644 index 0000000..a76e99e --- /dev/null +++ b/src/Components/CollapseAuto/PozoPublicCollapseAuto.jsx @@ -0,0 +1,103 @@ +import { RiDeleteBin6Line } from "react-icons/ri"; +import React, { useEffect, useRef, useState } from 'react'; +import "../CollapseAuto/PozoPublicCollapseAuto.scss"; +import { PiCaretCircleDownLight, PiCaretCircleUpLight, PiPencilSimpleLight } from "react-icons/pi"; + +const PozoPublicCollapseAuto = ({ + title = "Item description", + children, + isOpenInitially = false, + width = "100%", + className = "", + isEdit = false, + isDelete = false, + isToogle = false, + isChecked, + title2 = "", +}) => { + const [isOpen, setIsOpen] = useState(isOpenInitially); + const contentRef = useRef(null); + const collapseRef = useRef(null); + const [checked, setChecked] = useState(isChecked); + + const toggleCollapsePozo = () => { + setIsOpen(prev => !prev); + }; + + useEffect(() => { + const handleClickOutside = (event) => { + if (collapseRef.current && !collapseRef.current.contains(event.target)) { + setIsOpen(false); + } + }; + + document.addEventListener('mousedown', handleClickOutside); + return () => { + document.removeEventListener('mousedown', handleClickOutside); + }; + }, []); + + const handleChange = () => { + setChecked(prev => !prev); + }; + + return ( +

{title} {title2}

event.stopPropagation()}> + {isEdit && } + {isDelete && ( + + )} + {isToogle && +

+ + +

+ +

+ } +

+ {isOpen ? : + } +

+ {children} +

+ ); +} + +export default PozoPublicCollapseAuto; diff --git a/src/Components/CollapseAuto/PozoPublicCollapseAuto.scss b/src/Components/CollapseAuto/PozoPublicCollapseAuto.scss new file mode 100644 index 0000000..21a8214 --- /dev/null +++ b/src/Components/CollapseAuto/PozoPublicCollapseAuto.scss @@ -0,0 +1,123 @@ +.PozoPublicCollapseAuto-Master { + width: 100%; + font-family: var(--Pozo-Fontfamily); + position: relative; + height: 100%; + max-height: max-content; + + .PozoPublicCollapseMain { + display: flex; + flex-direction: column; + position: relative; + width: 100%; + border: 1px solid var(--input-BorderColor); + border-radius: 6px; + transition: border-color 0.3s ease; + position: relative; + + &.open { + border-color: #0071E3; + } + + &:hover { + border-color: #0071E3 !important; + } + + &:focus-within { + border-color: #0071E3; + } + + .PozoPublicCollapseAuto-Header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px; + border-radius: 6px; + background-color: var(--lightBlue-color); + cursor: pointer; + width: 100%; + text-transform: capitalize; + color: #090909; + font-size: 18px; + position: relative; + z-index: 0; + + div { + font-weight: 600; + } + + .svgs { + display: flex; + align-items: center; + justify-content: center; + font-size: 20px; + column-gap: 8px; + cursor: pointer; + position: absolute; + z-index: 15; + right: 7rem; + } + } + + .PozoPublicCollapseAuto-Content { + overflow: hidden; + transition: max-height 0.3s ease, opacity 0.3s ease; + padding: 0px 10px; + background-color: #FFF; + border-radius: 6px; + width: 100%; + opacity: 1; + height: max-content !important; + max-height: 0; + font-size: 14px !important; + font-weight: 400 !important; + + p div { + font-size: 14px !important; + font-weight: 400 !important; + padding: 1rem 0.5rem; + } + } + } + + .switch-container { + position: absolute; + top: 50%; + left: 70px; + transform: translate(-50%, -50%); + } + + input[type="checkbox"].switch { + position: absolute; + opacity: 0; + width: 0; + height: 0; + } + + .slider { + width: 32px; + height: 16.5px; + border-radius: 999px; + background-color: #d7d7d7; + cursor: pointer; + transition: background-color 0.4s, box-shadow 0.4s; + padding: 1px; + + .handle { + width: 12px; + height: 12px; + border-radius: inherit; + background: #ffffff; + transition: transform 0.4s cubic-bezier(1, 0, 0, 1); + margin: 1px; + } + } + + input[type="checkbox"].switch:checked+.slider { + background-color: #0FA958; + } + + input[type="checkbox"].switch:checked+.slider .handle { + transform: translateX(15px); + } +} \ No newline at end of file diff --git a/src/Components/CustomModal/CustomModals.jsx b/src/Components/CustomModal/CustomModals.jsx new file mode 100644 index 0000000..a096cc7 --- /dev/null +++ b/src/Components/CustomModal/CustomModals.jsx @@ -0,0 +1,53 @@ +import React, { useState } from 'react'; +import './customModal.css'; // Import your CSS file + +const CustomModal = () => { + const [isOpen, setIsOpen] = useState(false); + const [animationClass, setAnimationClass] = useState(''); + + const openModal = (animation) => { + setAnimationClass(animation); + setIsOpen(true); + document.body.classList.add('modal-active'); + }; + + const closeModal = () => { + setAnimationClass(animationClass + ' out'); + setTimeout(() => { + setIsOpen(false); + document.body.classList.remove('modal-active'); + setAnimationClass(''); // Reset animation class after close + }, 500); // Duration should match the animation duration + }; + + return ( +

Modal Animations

+ {['one', 'two', 'three', 'four', 'five', 'six', 'seven'].map((id) => ( +

openModal(id)}> + {id.charAt(0).toUpperCase() + id.slice(1)} +

+ ))} +

+ + {isOpen && ( + + )} +

+ ); +}; + +export default CustomModal; diff --git a/src/Components/CustomModal/customModal.css b/src/Components/CustomModal/customModal.css new file mode 100644 index 0000000..2112ba2 --- /dev/null +++ b/src/Components/CustomModal/customModal.css @@ -0,0 +1,616 @@ +/* * { + box-sizing:border-box; + } + + html,body { + min-height:100%; + height:100%; + background-image:url(http://theartmad.com/wp-content/uploads/Dark-Grey-Texture-Wallpaper-5.jpg); + background-size:cover; + background-position:top center; + font-family:helvetica neue, helvetica, arial, sans-serif; + font-weight:200; + &.modal-active { + overflow: hidden; + } + } + + #modal-container { + position:fixed; + display:table; + height:10%; + width:100%; + top:0; + left:0; + transform:scale(0); + z-index:1; + &.one { + transform:scaleY(.01) scaleX(0); + animation:unfoldIn 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards; + .modal-background { + .modal { + transform:scale(0); + animation: zoomIn .5s .8s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards; + } + } + &.out { + transform:scale(1); + animation:unfoldOut 1s .3s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards; + .modal-background { + .modal { + animation: zoomOut .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards; + } + } + } + } + &.two { + transform:scale(1); + .modal-background { + background:rgba(0,0,0,.0); + animation: fadeIn .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards; + .modal { + opacity:0; + animation: scaleUp .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards; + } + } + + .content { + animation: scaleBack .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards; + } + &.out { + animation: quickScaleDown 0s .5s linear forwards; + .modal-background { + animation: fadeOut .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards; + .modal { + animation: scaleDown .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards; + } + } + + .content { + animation: scaleForward .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards; + } + } + } + &.three { + z-index:0; + transform:scale(1); + .modal-background { + background:rgba(0,0,0,.6); + .modal { + animation: moveUp .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards; + } + } + + .content { + z-index:1; + animation: slideUpLarge .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards; + } + &.out { + .modal-background { + .modal { + animation: moveDown .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards; + } + } + + .content { + animation: slideDownLarge .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards; + } + } + } + &.four { + z-index:0; + transform:scale(1); + .modal-background { + background:rgba(0,0,0,.7); + .modal { + animation: blowUpModal .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards; + } + } + + .content { + z-index:1; + animation:blowUpContent .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards; + } + &.out { + .modal-background { + .modal { + animation: blowUpModalTwo .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards; + } + } + + .content { + animation: blowUpContentTwo .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards; + } + } + } + &.five { + transform:scale(1); + .modal-background { + background:rgba(0,0,0,.0); + animation: fadeIn .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards; + .modal { + transform:translateX(-1500px); + animation: roadRunnerIn .3s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards; + } + } + &.out { + animation: quickScaleDown 0s .5s linear forwards; + .modal-background { + animation: fadeOut .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards; + .modal { + animation: roadRunnerOut .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards; + } + } + } + } + &.six { + transform:scale(1); + .modal-background { + background:rgba(0,0,0,.0); + animation: fadeIn .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards; + .modal { + background-color:transparent; + animation: modalFadeIn .5s .8s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards; + h2,p { + opacity:0; + position:relative; + animation: modalContentFadeIn .5s 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards; + } + .modal-svg { + rect { + animation: sketchIn .5s .3s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards; + } + } + } + } + &.out { + animation: quickScaleDown 0s .5s linear forwards; + .modal-background { + animation: fadeOut .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards; + .modal { + animation: modalFadeOut .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards; + h2,p { + animation: modalContentFadeOut .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards; + } + .modal-svg { + rect { + animation: sketchOut .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards; + } + } + } + } + } + } + &.seven { + transform:scale(1); + .modal-background { + background:rgba(0,0,0,.0); + animation: fadeIn .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards; + .modal { + height:75px; + width:75px; + border-radius:75px; + overflow:hidden; + animation: bondJamesBond 1.5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards; + h2,p { + opacity:0; + position:relative; + animation: modalContentFadeIn .5s 1.4s linear forwards; + } + } + } + &.out { + animation: slowFade .5s 1.5s linear forwards; + .modal-background { + background-color:rgba(0,0,0,.7); + animation: fadeToRed 2s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards; + .modal { + border-radius:3px; + height:162px; + width:227px; + animation: killShot 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards; + h2,p { + animation:modalContentFadeOut .5s .5 cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards; + } + } + } + } + } + .modal-background { + display:table-cell; + background:rgba(0,0,0,.8); + text-align:center; + vertical-align:middle; + .modal { + background:white; + padding:50px; + display:inline-block; + border-radius:3px; + font-weight:300; + position:relative; + h2 { + font-size:25px; + line-height:25px; + margin-bottom:15px; + } + p { + font-size:18px; + line-height:22px; + } + .modal-svg { + position:absolute; + top:0; + left:0; + height:100%; + width:100%; + border-radius:3px; + rect { + stroke: #fff; + stroke-width: 2px; + stroke-dasharray: 778; + stroke-dashoffset: 778; + } + } + } + } + } + + .content { + min-height:100%; + height:100%; + background:white; + position:relative; + z-index:0; + h1 { + padding:75px 0 30px 0; + text-align:center; + font-size:30px; + line-height:30px; + } + .buttons { + max-width:800px; + margin:0 auto; + padding:0; + text-align:center; + .button { + display:inline-block; + text-align:center; + padding:10px 15px; + margin:10px; + background:red; + font-size:18px; + background-color:#efefef; + border-radius:3px; + box-shadow:0 1px 2px rgba(0,0,0,.3); + cursor:pointer; + &:hover { + color:white; + background:#009bd5; + } + } + } + } + + @keyframes unfoldIn { + 0% { + transform:scaleY(.005) scaleX(0); + } + 50% { + transform:scaleY(.005) scaleX(1); + } + 100% { + transform:scaleY(1) scaleX(1); + } + } + + @keyframes unfoldOut { + 0% { + transform:scaleY(1) scaleX(1); + } + 50% { + transform:scaleY(.005) scaleX(1); + } + 100% { + transform:scaleY(.005) scaleX(0); + } + } + + @keyframes zoomIn { + 0% { + transform:scale(0); + } + 100% { + transform:scale(1); + } + } + + @keyframes zoomOut { + 0% { + transform:scale(1); + } + 100% { + transform:scale(0); + } + } + + @keyframes fadeIn { + 0% { + background:rgba(0,0,0,.0); + } + 100% { + background:rgba(0,0,0,.7); + } + } + + @keyframes fadeOut { + 0% { + background:rgba(0,0,0,.7); + } + 100% { + background:rgba(0,0,0,.0); + } + } + + @keyframes scaleUp { + 0% { + transform:scale(.8) translateY(1000px); + opacity:0; + } + 100% { + transform:scale(1) translateY(0px); + opacity:1; + } + } + + @keyframes scaleDown { + 0% { + transform:scale(1) translateY(0px); + opacity:1; + } + 100% { + transform:scale(.8) translateY(1000px); + opacity:0; + } + } + + @keyframes scaleBack { + 0% { + transform:scale(1); + } + 100% { + transform:scale(.85); + } + } + + @keyframes scaleForward { + 0% { + transform:scale(.85); + } + 100% { + transform:scale(1); + } + } + + @keyframes quickScaleDown { + 0% { + transform:scale(1); + } + 99.9% { + transform:scale(1); + } + 100% { + transform:scale(0); + } + } + + @keyframes slideUpLarge { + 0% { + transform:translateY(0%); + } + 100% { + transform:translateY(-100%); + } + } + + @keyframes slideDownLarge { + 0% { + transform:translateY(-100%); + } + 100% { + transform:translateY(0%); + } + } + + @keyframes moveUp { + 0% { + transform:translateY(150px); + } + 100% { + transform:translateY(0); + } + } + + @keyframes moveDown { + 0% { + transform:translateY(0px); + } + 100% { + transform:translateY(150px); + } + } + + @keyframes blowUpContent { + 0% { + transform:scale(1); + opacity:1; + } + 99.9% { + transform:scale(2); + opacity:0; + } + 100% { + transform:scale(0); + } + } + + @keyframes blowUpContentTwo { + 0% { + transform:scale(2); + opacity:0; + } + 100% { + transform:scale(1); + opacity:1; + } + } + + @keyframes blowUpModal { + 0% { + transform:scale(0); + } + 100% { + transform:scale(1); + } + } + + @keyframes blowUpModalTwo { + 0% { + transform:scale(1); + opacity:1; + } + 100% { + transform:scale(0); + opacity:0; + } + } + + @keyframes roadRunnerIn { + 0% { + transform:translateX(-1500px) skewX(30deg) scaleX(1.3); + } + 70% { + transform:translateX(30px) skewX(0deg) scaleX(.9); + } + 100% { + transform:translateX(0px) skewX(0deg) scaleX(1); + } + } + + @keyframes roadRunnerOut { + 0% { + transform:translateX(0px) skewX(0deg) scaleX(1); + } + 30% { + transform:translateX(-30px) skewX(-5deg) scaleX(.9); + } + 100% { + transform:translateX(1500px) skewX(30deg) scaleX(1.3); + } + } + + @keyframes sketchIn { + 0% { + stroke-dashoffset: 778; + } + 100% { + stroke-dashoffset: 0; + } + } + + @keyframes sketchOut { + 0% { + stroke-dashoffset: 0; + } + 100% { + stroke-dashoffset: 778; + } + } + + @keyframes modalFadeIn { + 0% { + background-color:transparent; + } + 100% { + background-color:white; + } + } + + @keyframes modalFadeOut { + 0% { + background-color:white; + } + 100% { + background-color:transparent; + } + } + + @keyframes modalContentFadeIn { + 0% { + opacity:0; + top:-20px; + } + 100% { + opacity:1; + top:0; + } + } + + @keyframes modalContentFadeOut { + 0% { + opacity:1; + top:0px; + } + 100% { + opacity:0; + top:-20px; + } + } + + @keyframes bondJamesBond { + 0% { + transform:translateX(1000px); + } + 80% { + transform:translateX(0px); + border-radius:75px; + height:75px; + width:75px; + } + 90% { + border-radius:3px; + height:182px; + width:247px; + } + 100% { + border-radius:3px; + height:162px; + width:227px; + } + } + + @keyframes killShot { + 0% { + transform:translateY(0) rotate(0deg); + opacity:1; + } + 100% { + transform:translateY(300px) rotate(45deg); + opacity:0; + } + } + + @keyframes fadeToRed { + 0% { + background-color:rgba(black,.6); + } + 100% { + background-color:rgba(red,.8); + } + } + + @keyframes slowFade { + 0% { + opacity:1; + } + 99.9% { + opacity:0; + transform:scale(1); + } + 100% { + transform:scale(0); + } + } */ \ No newline at end of file diff --git a/src/Components/DatePicker/PozoPublicDatePicker.jsx b/src/Components/DatePicker/PozoPublicDatePicker.jsx new file mode 100644 index 0000000..9695dc2 --- /dev/null +++ b/src/Components/DatePicker/PozoPublicDatePicker.jsx @@ -0,0 +1,122 @@ +import { BiCalendar } from "react-icons/bi"; +import React, { useState, useRef, useEffect } from 'react'; +import './PozoPublicDatePicker.scss'; + +const PozoPublicDatePicker = ({ + onDateChange, + calendarStyle, + width = '250px', + height = '40px', + placeholder = 'Select a date', + // borderColor = '#A5A5A5' +}) => { + const [isOpen, setIsOpen] = useState(false); + const [selectedDate, setSelectedDate] = useState(null); + const [currentDate, setCurrentDate] = useState(new Date()); + const [isFocused, setIsFocused] = useState(false); + const pickerRef = useRef(null); + + const handleClickOutside = (event) => { + if (pickerRef.current && !pickerRef.current.contains(event.target)) { + setIsOpen(false); + } + }; + + useEffect(() => { + document.addEventListener('mousedown', handleClickOutside); + return () => document.removeEventListener('mousedown', handleClickOutside); + }, []); + + const handleDateClick = (date) => { + setSelectedDate(date); + if (onDateChange) onDateChange(date); + setIsOpen(false); + }; + + const handleMonthChange = (direction) => { + const newDate = new Date(currentDate); + newDate.setMonth(currentDate.getMonth() + direction); + setCurrentDate(newDate); + }; + + const handleYearChange = (direction) => { + const newDate = new Date(currentDate); + newDate.setFullYear(currentDate.getFullYear() + direction); + setCurrentDate(newDate); + }; + + const getDaysInMonth = (year, month) => { + const date = new Date(year, month + 1, 0); + return Array.from({ length: date.getDate() }, (_, i) => new Date(year, month, i + 1)); + }; + + const getDayHeaders = () => { + const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; + return ( +

+ {days.map(day => ( +

+ {day} +

+ ))} +

+ ); + }; + // console.log(getDaysInMonth(currentDate.getFullYear(), currentDate.getMonth()),"bvyuct7") + const renderCalendar = () => { + const days = getDaysInMonth(currentDate.getFullYear(), currentDate.getMonth()); + const startOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1).getDay(); + const blankDays = Array.from({ length: startOfMonth }, (_, i) => i); + + return ( +

+ + + {currentDate.toLocaleString('default', { month: 'long' })} {currentDate.getFullYear()} + + +

+ {getDayHeaders()} +

+ {blankDays.map((_, i) => ( +

+ ))} + {days.map(date => ( +

handleDateClick(date)} + > + {date.getDate()} +

+ ))} +

+ ); + }; + + return ( +

setIsOpen(!isOpen)} + > + setIsOpen(!isOpen)} + onFocus={() => setIsFocused(true)} + onBlur={() => setIsFocused(false)} + className={`date-picker-input ${isFocused || selectedDate ? 'focused' : ''}`} + /> + +

+ {isOpen && renderCalendar()} +

+ ); +}; + +export default PozoPublicDatePicker; diff --git a/src/Components/DatePicker/PozoPublicDatePicker.scss b/src/Components/DatePicker/PozoPublicDatePicker.scss new file mode 100644 index 0000000..ffb15c4 --- /dev/null +++ b/src/Components/DatePicker/PozoPublicDatePicker.scss @@ -0,0 +1,106 @@ +.date-picker { + position: relative; + display: inline-block; + + input { + border: none; + outline: none; + font-size: 14px; + color: #818181; + } + + .pickermain { + display: flex; + align-items: center; + justify-content: space-between; + padding: 8px 10px; + border: 1px solid var(--input-BorderColor); + border-radius: 6px; + cursor: pointer; + color: #818181; + + &:hover { + border-color: #007bff; + } + + &:focus-within { + border-color: #007bff; + } + } +} + +.calendar { + position: absolute; + top: 100%; + left: 0; + border: 1px solid #ccc; + background: #fff; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + z-index: 650; +} + +.calendar-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 8px; + border-bottom: 1px solid #ccc; +} + +.calendar-header button { + background: #f0f0f0; + border: none; + padding: 4px; + cursor: pointer; +} + +.calendar-header button:hover { + background: #e0e0e0; +} + +.calendar-header span { + flex: 1; + text-align: center; + font-weight: bold; +} + +.calendar-headers { + display: grid; + grid-template-columns: repeat(7, 1fr); + background: #f0f0f0; + border-bottom: 1px solid #ccc; +} + +.calendar-header-day { + text-align: center; + padding: 8px; + font-weight: 700; + font-size: 12px; +} + +.calendar-body { + display: grid; + grid-template-columns: repeat(7, 1fr); + gap: 4px; + padding: 8px 0px; +} + +.calendar-day { + text-align: center; + cursor: pointer; + padding: 4px; + border-radius: 4px; +} + +.calendar-day:hover { + background: #f0f0f0; +} + +.calendar-day.selected { + background: #007bff; + color: #fff; +} + +.calendar-day.blank { + background: #fff; +} \ No newline at end of file diff --git a/src/Components/DropDown/PozoPublicDropDown.jsx b/src/Components/DropDown/PozoPublicDropDown.jsx new file mode 100644 index 0000000..b5bd712 --- /dev/null +++ b/src/Components/DropDown/PozoPublicDropDown.jsx @@ -0,0 +1,163 @@ +import { BsPlusSquare } from "react-icons/bs"; +import { IoIosArrowDown } from "react-icons/io"; +import { useState, useEffect, useRef } from 'react'; +import "../DropDown/PozoPublicDropDown.scss"; +import PublicPozoModal from "../PublicPozoModal/PublicPozoModal"; +import PropTypes from 'prop-types'; + +const PozoPublicDropDown = ({ + placeholder = "Select an option", + placeholder2, + options, + width = "100%", + height = "2.5rem", + onOptionSelect, + className = "", + AddModal = false, +}) => { + const [isOpen, setIsOpen] = useState(false); + const [searchTerm, setSearchTerm] = useState(""); // State to hold the search term + const [filteredOptions, setFilteredOptions] = useState(options); // State to hold the filtered options + const dropdownRef = useRef(null); + const [isModalOpen, setIsModalOpen] = useState(false); + const toggleDropdown = () => setIsOpen(!isOpen); + + const DropDownModalOpen = () => setIsModalOpen(true); + const DropDownModalClose = () => setIsModalOpen(false); + + const handleOptionClick = (option) => { + setSearchTerm(option); + setIsOpen(false); + if (onOptionSelect) { + onOptionSelect(option); + } + }; + const handleActionClick = () => { + console.log('Action button clicked'); + + }; + + const handleInputChange = (event) => { + const searchValue = event.target.value; + setSearchTerm(searchValue); + + // Filter options based on the search term + const filtered = options.filter(option => + option.toLowerCase().includes(searchValue.toLowerCase()) + ); + setFilteredOptions(filtered); + setIsOpen(true); // Keep the dropdown open while typing + }; + + const handleClickOutside = (event) => { + if (dropdownRef.current && !dropdownRef.current.contains(event.target)) { + setIsOpen(false); + } + }; + + useEffect(() => { + document.addEventListener('mousedown', handleClickOutside); + + return () => { + document.removeEventListener('mousedown', handleClickOutside); + }; + }, []); + + // // Update filtered options when the original options change + // useEffect(() => { + // setFilteredOptions(options); + // }, []); + + return ( +

+ {placeholder && ( + + {placeholder} + + + + )} + {placeholder2 && ( + + {placeholder2} + + + )} + +

+ + {AddModal && +

+ +

+ } + {isModalOpen && ( + +

Search also Ad in this Function

+ + )} +

+ + {isOpen && ( +

+ {Array.isArray(filteredOptions) && filteredOptions.length > 0 ? ( + filteredOptions.map((option, index) => ( +

handleOptionClick(option)} + > + {option} +

+ )) + ) : ( +

+ No options available +

+ )} +

+ ); +}; + +PozoPublicDropDown.propTypes = { + placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), + placeholder2: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), + options: PropTypes.arrayOf(PropTypes.string), + width: PropTypes.string, + height: PropTypes.string, + onOptionSelect: PropTypes.func, + className: PropTypes.string, + AddModal: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]), +}; + +PozoPublicDropDown.defaultProps = { + placeholder: "Select an option", + placeholder2: "", + options: [], + width: "100%", + height: "2.5rem", + AddModal: false, +}; + + +export default PozoPublicDropDown; diff --git a/src/Components/DropDown/PozoPublicDropDown.scss b/src/Components/DropDown/PozoPublicDropDown.scss new file mode 100644 index 0000000..4ff35fe --- /dev/null +++ b/src/Components/DropDown/PozoPublicDropDown.scss @@ -0,0 +1,145 @@ +.PozoPublicDropDown-Master { + position: relative; + width: 100%; + + .PozoPublicDropDownMain { + display: flex; + align-items: center; + justify-content: space-between; + border: 1px solid var(--input-BorderColor); + border-radius: 6px; + padding: 12px 16px; + cursor: pointer; + position: relative; + transition: border-color 0.3s ease; + + &.error { + border-color: #e33333; + } + + input { + border: none; + outline: none; + font-family: var(--Pozo-Fontfamily); + width: 100%; + cursor: pointer; + padding-top: 0; + background: transparent; + + &::placeholder { + color: transparent; + } + } + + .PozoPublicDropDown-Label { + position: absolute; + left: 16px; + top: 50%; + transform: translateY(-50%); + transition: all 0.3s ease; + pointer-events: none; + color: var(--input-textColor); + font-size: 13px; + background-color: #fff; + padding: 0 4px; + } + + .PozoPublicDropDown-Label2 { + position: absolute; + left: 14px; + top: 50%; + transform: translateY(-50%); + transition: all 0.3s ease; + pointer-events: none; + color: var(--input-textColor); + font-size: 12px; + // background-color: #fff; + padding: 0 4px; + } + + .PozoPublicDropDown-Label.float, + input:focus+.PozoPublicDropDown-Label, + .PozoPublicDropDownMain:focus-within .PozoPublicDropDown-Label { + top: -10px; + transform: translateY(0); + font-size: 12px; + color: var(--blue-color); + + } + + .PozoPublicDropDown-Label2.float2, + input:focus+.PozoPublicDropDown-Label2, + .PozoPublicDropDownMain:focus-within .PozoPublicDropDown-Label2 { + top: -16px; + transform: translateY(0); + transform: translateX(-17px); + font-size: 11px; + color: var(--blue-color); + + } + + // Styles for focus state + &:focus-within { + border-color: var(--input-FocusColor); // Change border color on focus + } + + // Styles for hover state + &:hover { + border-color: #0071e3; + color: #0071e3; // Change border color on hover + + .PozoPublicDropDown-Label { + color: var(--input-HoverColor); // Change label color on hover + } + + .PozoPublicDropDown-Label2 { + color: var(--input-HoverColor); // Change label color on hover + } + } + } + + .PozoPublicDropDownOptions { + position: absolute; + width: 100%; + background-color: #fff; + // border: 1px solid var(--input-BorderColor); + border-radius: 6px; + margin-top: 4px; + z-index: 900; + height: max-content; + max-height: 21vh; + // box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px; + overflow-x: scroll; + font-size: 14px; + padding: 5px 5px; + } + + .PozoPublicDropDownOption { + padding: 10px; + cursor: pointer; + + &:hover { + background-color: rgba(0, 0, 0, 0.04); + border-color: var(--input-HoverColor); // Border color on option hover + } + } + + .PozoPublicDropDownNoOptions { + padding: 10px; + color: var(--input-textColor); + text-align: center; + display: flex; + align-items: center; + justify-content: center; + } + + .addBTN { + display: flex; + margin-left: 1rem; + font-size: 20px; + color: #1c1c1c; + cursor: pointer; + z-index: 10; + } +} \ No newline at end of file diff --git a/src/Components/DropDownWithAdd/PozoPublicDropdownAdd.jsx b/src/Components/DropDownWithAdd/PozoPublicDropdownAdd.jsx new file mode 100644 index 0000000..0d48c29 --- /dev/null +++ b/src/Components/DropDownWithAdd/PozoPublicDropdownAdd.jsx @@ -0,0 +1,9 @@ +import React from 'react' + +const PozoPublicDropdownAdd = () => { + return ( +

PozoPublicDropdownAdd

+ ) +} + +export default PozoPublicDropdownAdd \ No newline at end of file diff --git a/src/Components/DropDownWithAdd/PozoPublicDropdownAdd.scss b/src/Components/DropDownWithAdd/PozoPublicDropdownAdd.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/Components/ImagePicker/ImageUploader.jsx b/src/Components/ImagePicker/ImageUploader.jsx new file mode 100644 index 0000000..1c09703 --- /dev/null +++ b/src/Components/ImagePicker/ImageUploader.jsx @@ -0,0 +1,88 @@ +import { MdFileDownloadDone } from "react-icons/md"; +import { AiOutlineCloseCircle } from "react-icons/ai"; +import { TbCameraPlus } from "react-icons/tb"; +import { TbUpload } from "react-icons/tb"; +import React, { useState } from 'react'; +import "../ImagePicker/PozoPublicImagePicker.scss"; +import PublicPozoModal from "../PublicPozoModal/PublicPozoModal"; +import PozoPublicButton from "../Button/PozoPublicButton"; + +const ImageUploader = ({ width = "100%", height = "100%" }) => { + const [isModalOpen, setIsModalOpen] = useState(false); + const [selectedImage, setSelectedImage] = useState(null); + const defaultImage = "https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRtcNX3yxOkc3xIA9tHMsxR_DRuThONLIbPFoeXihVU0XQt1Fxt"; + + const handleOpenModal = () => { + setIsModalOpen(true); + }; + + const handleCloseModal = () => { + handleImageUpload + setIsModalOpen(false); + setSelectedImage(null); // Reset selected image when modal closes + + }; + + const handleImageUpload = (event) => { + if (event.target.files && event.target.files[0]) { + const imageFile = event.target.files[0]; + setSelectedImage(URL.createObjectURL(imageFile)); + } else { + setSelectedImage(null); // If upload fails, reset to null + } + }; + + return ( +

+ + Image +

+ {isModalOpen && ( + +

+ + + + +

+ {/*

Upload Your Product Image

*/} +

+ + +

+ +

+ } + > + + )} +

+ ); +} + +export default ImageUploader; diff --git a/src/Components/ImagePicker/PozoPublicImagePicker.jsx b/src/Components/ImagePicker/PozoPublicImagePicker.jsx new file mode 100644 index 0000000..da9ae6a --- /dev/null +++ b/src/Components/ImagePicker/PozoPublicImagePicker.jsx @@ -0,0 +1,140 @@ +import { MdFileDownloadDone } from "react-icons/md"; +import { AiOutlineCloseCircle } from "react-icons/ai"; +import { TbCameraPlus } from "react-icons/tb"; +import { TbUpload } from "react-icons/tb"; +import React, { useState } from 'react'; +import "../ImagePicker/PozoPublicImagePicker.scss"; +import PublicPozoModal from "../PublicPozoModal/PublicPozoModal"; +import PozoPublicButton from "../Button/PozoPublicButton"; + +const PozoPublicImagePicker = ({ width = "100%", height = "100%" }) => { + const [isModalOpen, setIsModalOpen] = useState(false); + const [selectedImages, setSelectedImages] = useState([null, null, null, null, null]); + const defaultImage = "https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRtcNX3yxOkc3xIA9tHMsxR_DRuThONLIbPFoeXihVU0XQt1Fxt"; + + const handleOpenModal = () => { + setIsModalOpen(true); + }; + + const handleCloseModal = () => { + setIsModalOpen(false); + }; + + const handleImageUpload = (event, index) => { + if (event.target.files && event.target.files[0]) { + const imageFile = event.target.files[0]; + const updatedImages = [...selectedImages]; + updatedImages[index] = URL.createObjectURL(imageFile); + setSelectedImages(updatedImages); + } else { + const updatedImages = [...selectedImages]; + updatedImages[index] = null; // If upload fails, reset to null + setSelectedImages(updatedImages); + } + }; + + return ( +

+ + Image +

+ {isModalOpen && ( + +

+ + {[...Array(5)].map((_, index) => ( +

+ +

+ handleImageUpload(event, index)} + style={{ display: 'none' }} + id={`imageUploadInput-${index}`} + /> + + + +

+ ))} +

Upload Your Product Image

+ + {/* iframe of video */} +

Guidline For Image Upload

+ +

+ + {/* guideline for image upload */} +

Dimensions:

1024 x 768px

Format:

JPF , PNG , SVG

File size:

Below 5MB

+ + +

+ +

+ } + > + + )} +

+ ); +} + +export default PozoPublicImagePicker; diff --git a/src/Components/ImagePicker/PozoPublicImagePicker.scss b/src/Components/ImagePicker/PozoPublicImagePicker.scss new file mode 100644 index 0000000..94a4f66 --- /dev/null +++ b/src/Components/ImagePicker/PozoPublicImagePicker.scss @@ -0,0 +1,212 @@ +.PozoPublicImagePicker-Master { + .PozoPublicImagePickerMain { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + border: 1px solid var(--input-BorderColor); + width: max-content; + column-gap: 1rem; + row-gap: 12px; + padding: 20px 20px; + border-radius: 6px; + color: var(--input-textColor); + cursor: pointer; + font-size: 16px; + } + + .ImageUploadMain { + display: flex; + align-items: flex-start; + justify-content: space-between; + padding: 1rem 0rem; + column-gap: 10px; + width: 100%; + position: relative; + } + + .uploadImage { + display: flex; + flex-direction: column; + // width: 35%; + justify-content: space-around; + column-gap: 1rem; + row-gap: 2rem; + } + + .imagerUploadsection { + display: flex; + align-items: center; + column-gap: 1rem; + row-gap: 1rem; + flex-wrap: wrap; + width: 100%; + } + + .imageViwer { + display: flex; + flex-wrap: wrap; + width: 35%; + align-items: center; + column-gap: 16px; + row-gap: 16px; + position: relative; + top: 25px; + } + + .title1 { + position: absolute; + top: -36px; + font-size: 20px; + } + + .uploadBTN { + border: 1px solid var(--input-BorderColor); + width: max-content; + padding: 26px 38px; + display: flex; + align-items: center; + column-gap: 5px; + border-radius: 6px; + cursor: pointer; + font-size: 14px; + margin-top: -7rem; + opacity: 0; + } + + .imagerViewer { + width: 100px; + height: 85px; + border: 2px solid #1292EE; + border-radius: 6px; + + img { + width: 100%; + height: 100%; + border-radius: 6px; + + } + } + + .uploadVideo { + display: flex; + align-items: center; + justify-content: center; + width: 350px; + position: relative; + top: 25px; + height: 250px; + } + + .title2 { + position: absolute; + top: -33px; + text-align: left; + width: 100%; + font-size: 20px; + } + + .guidlineImage { + display: flex; + flex-direction: column; + width: 30%; + } + + .formats { + display: flex; + flex-direction: column; + text-transform: capitalize; + + div { + font-size: 14px; + color: #818181; + + } + } + + .imagembFormat { + display: flex; + align-items: flex-start; + justify-content: space-between; + flex-direction: column; + } + + .picGuide { + // border: 1px dashed var(--input-BorderColor); + width: 100%; + display: flex; + column-gap: 5px; + row-gap: 5px; + flex-wrap: wrap; + + img { + width: 90px; + font-size: 2.5rem; + } + } + + .blurimages { + display: flex; + align-items: center; + column-gap: 10px; + row-gap: 10px; + padding: 1rem 0rem; + position: relative; + + img { + width: 100px; + height: 100px; + } + + .wrong { + position: absolute; + position: absolute; + font-size: 3rem; + color: red; + top: 40px; + left: 25px; + } + + .blur { + filter: blur(1px); + } + + .correct { + position: absolute; + top: 10px; + font-size: 3rem; + color: limegreen; + left: 167px; + } + } +} + +@media (max-width:768px) { + .PozoPublicImagePicker-Master .ImageUploadMain { + flex-direction: column; + row-gap: 3rem; + overflow: scroll; + height: 75vh; + overflow-x: hidden; + } + + .PozoPublicImagePicker-Master .imageViwer, + .PozoPublicImagePicker-Master .guidlineImage { + width: 100%; + } + + .PublicPozoModal-Master .PublicPozoModalMain { + height: 85vh !important; + width: 100% !important; + } + + .PozoPublicImagePicker-Master .imagerViewer { + width: 95px; + } + + .PozoPublicImagePicker-Master .picGuide img { + width: 100px; + padding-top: 1rem; + } + +} \ No newline at end of file diff --git a/src/Components/Input/PozoPublicInput.jsx b/src/Components/Input/PozoPublicInput.jsx new file mode 100644 index 0000000..d717ce0 --- /dev/null +++ b/src/Components/Input/PozoPublicInput.jsx @@ -0,0 +1,51 @@ +import React, { useState } from 'react'; +import "../Input/PozoPublicInput.scss"; + +const PozoPublicInput = ({ + label, + type = "text", + width = "100%", + height = "auto", + placeholder, + name, + value, + onChange, + onClick, + maxLength = 100, + disabled = false, + className = "", + pattern, + inputMode, +}) => { + const [inputValue, setInputValue] = useState(value); + + const handleChange = (e) => { + const newValue = e.target.value; + if (newValue.length <= maxLength) { + setInputValue(newValue); + onChange(e); + } + }; + // const testcode = ["pozopublic"] + + return ( +

+ + {label && {label}} +

+ ); +}; + +export default PozoPublicInput; diff --git a/src/Components/Input/PozoPublicInput.scss b/src/Components/Input/PozoPublicInput.scss new file mode 100644 index 0000000..51c176f --- /dev/null +++ b/src/Components/Input/PozoPublicInput.scss @@ -0,0 +1,83 @@ +.PozoPublicInputMain { + position: relative; + width: 100%; + height: auto; + + input { + padding: 12px 16px; + outline: none; + border: 1px solid red; + border-radius: 6px; + font-family: var(--Pozo-Fontfamily); + width: 100%; + height: 100%; + font-size: 14px; + box-sizing: border-box; + background: transparent; + position: relative; + transition: border-color 0.2s ease; + background-color: #ffffff; + + &::placeholder { + color: var(--input-textColor); + opacity: 1; + transition: opacity 0.2s ease; + + } + + &:hover { + border-color: #0071e3; + } + } + + input[type=number]::-webkit-inner-spin-button, + input[type=number]::-webkit-outer-spin-button { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + margin: 0; + } + + .PozoPublicInput-Label { + position: absolute; + top: 10px; + left: 10px !important; + font-family: var(--Pozo-Fontfamily); + font-size: 12px; + color: #818181; + /* Default label color */ + transition: all 0.2s ease; + pointer-events: none; + background: white; + padding: 0 4px; + transform-origin: top left; + transform: scale(1); + text-wrap: nowrap; + } + + input:focus+.PozoPublicInput-Label, + input:not(:placeholder-shown)+.PozoPublicInput-Label { + top: -10px; + left: 12px; + font-size: 12px; + color: #0071e3; + font-weight: 500; + } + + input:focus { + border-color: #0071e3; + } + + input:focus::placeholder, + input:not(:placeholder-shown)::placeholder { + opacity: 0; + } + + .error { + border-color: var(--red-color); + } + + .success { + border-color: var(--green-color); + } +} \ No newline at end of file diff --git a/src/Components/InputDropDown/PozoPublicInputDropdown.jsx b/src/Components/InputDropDown/PozoPublicInputDropdown.jsx new file mode 100644 index 0000000..c99bcc5 --- /dev/null +++ b/src/Components/InputDropDown/PozoPublicInputDropdown.jsx @@ -0,0 +1,112 @@ +import React, { useState } from 'react'; +import PropTypes from 'prop-types'; +import { BiChevronDown } from 'react-icons/bi'; // Import a custom icon from React Icons +import "../InputDropDown/PozoPublicInputDropdown.scss"; + +const PozoPublicInputDropdown = ({ + width = '100%', + height = 'auto', + onClick, + label, + dropdown1Options = [], + dropdown2Options = [], + select1 = false, + select2 = false, + select3 = false, +}) => { + const [dropdown1Value, setDropdown1Value] = useState(''); + const [dropdown2Value, setDropdown2Value] = useState(''); + + const handleDropdown1Change = (e) => { + setDropdown1Value(e.target.value); + }; + + const handleDropdown2Change = (e) => { + setDropdown2Value(e.target.value); + }; + + return ( +

+ + {label} + + {select1 && +

+ + +

+ } + + {select2 && +

+ + +

+ } + + {select3 && +

+ + +

+ } + +

+ ); +} + +PozoPublicInputDropdown.propTypes = { + width: PropTypes.string, + height: PropTypes.string, + onClick: PropTypes.func, + dropdown1Options: PropTypes.array, + dropdown2Options: PropTypes.array +}; + +export default PozoPublicInputDropdown; diff --git a/src/Components/InputDropDown/PozoPublicInputDropdown.scss b/src/Components/InputDropDown/PozoPublicInputDropdown.scss new file mode 100644 index 0000000..c64e7d0 --- /dev/null +++ b/src/Components/InputDropDown/PozoPublicInputDropdown.scss @@ -0,0 +1,113 @@ +.PozoPublicInputDropdown-Master { + display: flex; + align-items: center; + border: 1px solid #ccc; + border-radius: 4px; + padding: 5px 10px; + + &:hover { + border-color: var(--secondayBTN-color); + } + + &:focus { + border-color: var(--secondayBTN-color); + } +} + +.PozoPublicInputDropdown-Wrapper { + display: flex; + align-items: center; + width: 100%; + position: relative; + column-gap: 3px; +} + +.PozoPublicInputDropdown-Input { + flex: 1; + padding: 12px 5px 5px 5px; + /* Extra padding-top for placeholder space */ + border: none; + outline: none; + position: relative; + z-index: 1; + background: transparent; + + &::placeholder { + color: transparent; + font-size: 10px !important; + } + + &:focus+.PozoPublicInputDropdown-Placeholder, + &:not(:placeholder-shown)+.PozoPublicInputDropdown-Placeholder { + top: -5px; + left: 5px; + font-size: 12px; + color: var(--secondayBTN-color); + background-color: #fff; + padding: 1px 5px; + } +} + +.PozoPublicInputDropdown-Placeholder { + position: absolute; + top: 50%; + left: 5px; + transform: translateY(-50%); + color: #aaa; + transition: 0.3s ease all; + pointer-events: none; + font-size: 14px; + +} + + +.PozoPublicInputDropdown-Select { + position: relative; + width: 100%; + padding: 5px 6px; + border: 1px solid #ccc; + border-radius: 4px; + background-color: #fff; + color: #000000; + font-size: 13px; + appearance: none; + /* Hides the default arrow */ + cursor: pointer; + transition: border-color 0.3s ease; + // padding-right: 30px; + opacity: 0.6; + + &:hover { + border-color: var(--secondayBTN-color); + } + + &:focus { + border-color: var(--secondayBTN-color); + outline: none; + } + + &:focus-within { + border-color: var(--secondayBTN-color); + outline: none; + } +} + +.PozoPublicInputDropdown-Icon { + position: absolute; + right: 5px; + top: 50%; + transform: translateY(-50%); + pointer-events: none; + opacity: 1 !important; +} + + +.PozoPublicInputDropdown-Select option { + padding: 10px 12px; + background-color: #fff; + color: #e33333; + font-size: 14px; + border-bottom: 1px solid #eee; + transition: background-color 0.2s ease, color 0.2s ease; +} + diff --git a/src/Components/InputSearch/PozoPublicInputSearch.jsx b/src/Components/InputSearch/PozoPublicInputSearch.jsx new file mode 100644 index 0000000..aaf1d58 --- /dev/null +++ b/src/Components/InputSearch/PozoPublicInputSearch.jsx @@ -0,0 +1,88 @@ +import React, { useState, useEffect, useRef } from 'react'; +import "../InputSearch/PozoPublicInputSearch.scss"; + +const PozoPublicInputSearch = ({ + label, + type = "text", + width = "100%", + height = "auto", + placeholder, + name, + value, + onChange, + onClick, + disabled = false, + className = "", + searchResults = [], +}) => { + const [data, setData] = useState([]); + const [Text, setText] = useState([]); + const [showSuggestions, setShowSuggestions] = useState(false); + const inputRef = useRef(null); + + const OnSearch = (e) => { + onChange(e.target.value) + const newValue = e.target.value; + setText(newValue) + const filteredItems = searchResults.filter(item => + item.toLowerCase().includes(newValue.toLowerCase()) + ); + setData(filteredItems); + setShowSuggestions(newValue.length !== 0); + // onChange(e); // Continue to call the passed onChange handler + }; + + const handleClickOutside = (event) => { + if (inputRef.current && !inputRef.current.contains(event.target)) { + setShowSuggestions(false); + } + }; + + useEffect(() => { + document.addEventListener('mousedown', handleClickOutside); + return () => { + document.removeEventListener('mousedown', handleClickOutside); + }; + }, []); + + const handleSuggestionClick = (item) => { + setText(item); + setShowSuggestions(false); + // onChange({ target: { name, value: item } }); // Update the input value + }; + + return ( +

+ + {label && {label}} + + {showSuggestions && data.length > 0 && ( +

+ {data.map((result, index) => ( +

handleSuggestionClick(result)} + > + {result} +

+ ))} +

+ )} +

+ ); +} + +export default PozoPublicInputSearch; diff --git a/src/Components/InputSearch/PozoPublicInputSearch.scss b/src/Components/InputSearch/PozoPublicInputSearch.scss new file mode 100644 index 0000000..94faaf8 --- /dev/null +++ b/src/Components/InputSearch/PozoPublicInputSearch.scss @@ -0,0 +1,98 @@ +.PozoPublicInputMain { + position: relative; + width: 100%; + height: auto; + + input { + padding: 12px 16px; + outline: none; + border: 1px solid var(--input-BorderColor); + /* Default border color */ + border-radius: 6px; + font-family: var(--Pozo-Fontfamily); + width: 100%; + height: 100%; + font-size: 14px; + box-sizing: border-box; + background: transparent; + position: relative; + transition: border-color 0.2s ease; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + width: 100%; + + &::placeholder { + color: var(--input-textColor); + opacity: 1; + transition: opacity 0.2s ease; + + } + + &:hover { + border-color: #0071e3; + } + } + + .PozoPublicInput-Label { + position: absolute; + top: 12px; + left: 16px; + font-family: var(--Pozo-Fontfamily); + font-size: 14px; + color: #818181; + /* Default label color */ + transition: all 0.2s ease; + pointer-events: none; + background: white; + padding: 0 4px; + transform-origin: top left; + transform: scale(1); + } + + input:focus+.PozoPublicInput-Label, + input:not(:placeholder-shown)+.PozoPublicInput-Label { + top: -10px; + left: 12px; + font-size: 12px; + color: #0071e3; + font-weight: 600; + /* Floating label color */ + } + + input:focus { + border-color: #0071e3; + } + + input:focus::placeholder, + input:not(:placeholder-shown)::placeholder { + opacity: 0; + } + + .PozoPublicSearchResults { + position: absolute; + width: 100%; + background-color: #FFF; + border-radius: 6px; + padding: 5px 5px; + box-shadow: rgba(0, 0, 0, 0.12) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px; + z-index: 99; + max-height: 145px; + overflow-y: auto; + } + + .PozoPublicSearchResultItem { + font-size: 14px; + padding: 6px 10px; + cursor: pointer; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + width: 100%; + + &:hover { + background-color: var(--light-gray); + } + } + +} \ No newline at end of file diff --git a/src/Components/InputWithSearch/InputWithAction.jsx b/src/Components/InputWithSearch/InputWithAction.jsx new file mode 100644 index 0000000..c629e53 --- /dev/null +++ b/src/Components/InputWithSearch/InputWithAction.jsx @@ -0,0 +1,36 @@ +import React from 'react'; +import "../InputWithSearch/InputWithAction.scss" + +const InputWithAction = ({ + onChange, + onClick, + value, + label, + placeholder, + icon, + suffix +}) => { + return ( +

+ + {label} + {suffix && ( +

+ {suffix} +

+ )} +

+ ) +} + +export default InputWithAction \ No newline at end of file diff --git a/src/Components/InputWithSearch/InputWithAction.scss b/src/Components/InputWithSearch/InputWithAction.scss new file mode 100644 index 0000000..77746a5 --- /dev/null +++ b/src/Components/InputWithSearch/InputWithAction.scss @@ -0,0 +1,64 @@ +.dropdown-container { + position: relative; + width: 300px; + margin: 2rem; +} + +.dropdown-input { + padding: 5px !important; +} + +.dropdown-container input { + width: calc(100% - 3rem); + padding: 0.7rem; + border: 1px solid gray; + border-radius: 6px; + outline: none; + color: rgba(0, 0, 0, 0.7); + font-size: 1em; +} + +.dropdown-container label { + position: absolute; + left: 5px; + padding: 8px; + color: gray; + pointer-events: none; + font-size: 1em; + text-transform: uppercase; + font-family: 'poppins'; + transition: 0.4s; +} + +.dropdown-container input:valid~label, +.dropdown-container input:focus~label { + color: #007bff; + transform: translate(10px, -11px); + font-family: 'poppins'; + font-size: 0.75em; + padding: 0 10px; + background: white; + letter-spacing: 0.1rem; +} + +.dropdown-container input:focus { + border-color: #007bff; + box-shadow: 0 0 3px #007bff; +} + +.dropdown-container input:focus+label { + color: #007bff; +} + +.dropdown-container .suffix { + position: relative; + right: -11.5rem; + top: 0; + display: flex; + padding: -3rem; + width: 100px; + height: 73px; + flex-direction: column; + transform: translateY(-50%); + +} \ No newline at end of file diff --git a/src/Components/Loader/PozoPublicLoader.jsx b/src/Components/Loader/PozoPublicLoader.jsx new file mode 100644 index 0000000..842a68f --- /dev/null +++ b/src/Components/Loader/PozoPublicLoader.jsx @@ -0,0 +1,12 @@ +import React from 'react'; +import '../../Styles/Components/PozoPublicLoader.scss'; + +const FullPageLoader = () => { + return ( +

+ ); +}; + +export default FullPageLoader; diff --git a/src/Components/Modal/PozoPublicModal.jsx b/src/Components/Modal/PozoPublicModal.jsx new file mode 100644 index 0000000..17c011a --- /dev/null +++ b/src/Components/Modal/PozoPublicModal.jsx @@ -0,0 +1,47 @@ +import { CgClose } from "react-icons/cg"; +import React, { useEffect } from 'react'; +import "../Modal/PozoPublicModal.scss"; + +const PozoPublicModal = ({ isOpen, onClose, children }) => { + const handleClose = () => { + onClose(); + }; + + useEffect(() => { + const handleEscKey = (event) => { + if (event.key === "Escape") { + handleClose(); + } + }; + + if (isOpen) { + window.addEventListener("keydown", handleEscKey); + } + return () => { + window.removeEventListener("keydown", handleEscKey); + }; + }, [isOpen]); + + return ( +

+ +

+ + + {children} +

+ ); +}; + +export default PozoPublicModal; diff --git a/src/Components/Modal/PozoPublicModal.scss b/src/Components/Modal/PozoPublicModal.scss new file mode 100644 index 0000000..cc8ea14 --- /dev/null +++ b/src/Components/Modal/PozoPublicModal.scss @@ -0,0 +1,48 @@ +.modal { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background-color: rgb(0 0 0 / 53%); + justify-content: center; + align-items: center; + backdrop-filter: blur(5px); +} + +.modal.open { + display: flex; + z-index: 999; +} + +.modal-overlay-pozo { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +.modal-content-pozo { + min-width: 350px; + max-width: 400px; + max-height: 76vh; + background-color: #fff; + padding: 20px; + border-radius: 16px; + overflow-y: scroll; + position: relative; + box-shadow: 0px 37px 80px rgba(24, 52, 47, 0.028); +} + +.close-button-pozo { + font-size: 15px; + color: #092b247a; + background-color: transparent; + border: none; + position: absolute; + top: 10px; + right: 10px; + cursor: pointer; +} diff --git a/src/Components/Popconfirm/Popconfirm.jsx b/src/Components/Popconfirm/Popconfirm.jsx new file mode 100644 index 0000000..850cd62 --- /dev/null +++ b/src/Components/Popconfirm/Popconfirm.jsx @@ -0,0 +1,68 @@ +import { IoMdArrowDropdown } from "react-icons/io"; +import React, { useState, useEffect, useRef } from 'react'; +import PropTypes from 'prop-types'; +import { BsFillExclamationCircleFill } from 'react-icons/bs'; +import './Popconfirm.scss'; // Ensure the path is correct + +const Popconfirm = ({ title, onConfirm, onCancel, isVisible, onClose }) => { + const [isAnimating, setIsAnimating] = useState(isVisible); + const popconfirmRef = useRef(null); + + useEffect(() => { + if (isVisible) { + setIsAnimating(true); + } else { + setIsAnimating(false); + } + }, [isVisible]); + + useEffect(() => { + if (!isVisible && !isAnimating) { + onClose(); + } + }, [isAnimating, isVisible, onClose]); + + useEffect(() => { + const handleClickOutside = (event) => { + if (popconfirmRef.current && !popconfirmRef.current.contains(event.target)) { + onCancel(); // Trigger cancel when clicking outside + } + }; + + if (isVisible) { + document.addEventListener('mousedown', handleClickOutside); + } + + return () => { + document.removeEventListener('mousedown', handleClickOutside); + }; + }, [isVisible, onCancel]); + + const animationClass = isAnimating ? 'fade-in' : 'fade-out'; + + return ( +

+ +

+ + {title} +

Yes

+ ); +}; + +Popconfirm.propTypes = { + title: PropTypes.string.isRequired, + onConfirm: PropTypes.func.isRequired, + onCancel: PropTypes.func.isRequired, + isVisible: PropTypes.bool.isRequired, + onClose: PropTypes.func.isRequired, +}; + +export default Popconfirm; diff --git a/src/Components/Popconfirm/Popconfirm.scss b/src/Components/Popconfirm/Popconfirm.scss new file mode 100644 index 0000000..4f4ed4e --- /dev/null +++ b/src/Components/Popconfirm/Popconfirm.scss @@ -0,0 +1,93 @@ +.Popconfirm-Master { + position: absolute; + z-index: 1000; + background: white; + border-radius: 8px; + box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px; + opacity: 0; + visibility: hidden; + transform: scale(0.8); + transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, visibility 0.3s ease-in-out; + top: -80px; + // left: 74px; + right: 0; + width: 12rem; + + .arrowicons { + position: absolute; + color: #fff; + font-size: 16px !important; + right: 17px; + bottom: -10px; + box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; + + } + +} + + + +.Popconfirm-Master.fade-in { + opacity: 1; + visibility: visible; + transform: scale(1); +} + +.Popconfirm-Master.fade-out { + opacity: 0; + visibility: hidden; + transform: scale(0.8); +} + +.popconfirm-main { + padding: 16px; + display: flex; + flex-direction: column; + align-items: center; +} + +.header { + font-weight: 500; + margin-bottom: 12px; + display: flex; + align-items: center; + column-gap: 10px; + font-family: 'Gilroy', sans-serif; + /* Ensure the font is available */ +} + +.button { + display: flex; + gap: 8px; +} + +.cancel-button, +.confirm-button { + padding: 2px 8px; + border: 1px solid transparent; + border-radius: 4px; + cursor: pointer; + transition: background-color 0.2s ease; +} + +.cancel-button { + background-color: #f0f0f0b7; +} + +.confirm-button { + background-color: rgb(255, 240, 240); + color: #000; + + &:hover { + background-color: rgb(255, 220, 220); + /* Slightly different hover color */ + } +} + +@media (max-width:499px) { + .Popconfirm-Master { + top: -80px; + // left: 130px; + } + +} \ No newline at end of file diff --git a/src/Components/Popover/PopOver.jsx b/src/Components/Popover/PopOver.jsx new file mode 100644 index 0000000..36685b0 --- /dev/null +++ b/src/Components/Popover/PopOver.jsx @@ -0,0 +1,63 @@ +import { IoMdArrowDropdown } from "react-icons/io"; +import React, { useState, useRef, useEffect } from 'react'; +import "../Popover/PopOver.scss"; + +const PopOver = ({ children, content, placement = 'bottom', trigger = 'click', openDelay = 300, closeDelay = 300 }) => { + const [visible, setVisible] = useState(false); + const [timeoutId, setTimeoutId] = useState(null); + const popoverRef = useRef(null); + const targetRef = useRef(null); + + const handleToggle = () => { + if (trigger === 'click') { + setVisible(prevVisible => !prevVisible); + } + }; + + const handleMouseEnter = () => { + if (trigger === 'hover') { + clearTimeout(timeoutId); + setTimeoutId(setTimeout(() => setVisible(true), openDelay)); + } + }; + + const handleMouseLeave = () => { + if (trigger === 'hover') { + clearTimeout(timeoutId); + setTimeoutId(setTimeout(() => setVisible(false), closeDelay)); + } + }; + + const handleClickOutside = (e) => { + if (popoverRef.current && !popoverRef.current.contains(e.target) && + targetRef.current && !targetRef.current.contains(e.target)) { + setVisible(false); + } + }; + + useEffect(() => { + document.addEventListener('mousedown', handleClickOutside); + return () => document.removeEventListener('mousedown', handleClickOutside); + }, []); + + useEffect(() => { + return () => clearTimeout(timeoutId); + }, [timeoutId]); + + return ( +

+ + {children} +

+ {content} + +

+ ); +}; + +export default PopOver; diff --git a/src/Components/Popover/PopOver.scss b/src/Components/Popover/PopOver.scss new file mode 100644 index 0000000..c6778d4 --- /dev/null +++ b/src/Components/Popover/PopOver.scss @@ -0,0 +1,75 @@ +.popover-container { + position: relative; + display: inline-block; +} + +.popover-content { + position: absolute; + z-index: 9999; + background-color: white; + border-radius: 8px; + padding: 12px 10px; + box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; + opacity: 0; + transform: scale(0.9); + transition: opacity 0.3s ease, transform 0.3s ease; + white-space: nowrap; + max-width: 700px; + text-align: center; + display: flex; + align-items: center; + justify-content: center; + font-size: 14px !important; + left: 50%; + transform: translateX(-50%) scale(0.9); + margin-bottom: 5px; +} + +.iconarrow { + position: absolute; + bottom: -12px; + left: calc(50% - 16px); + box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; +} + + +.popover-content.visible { + opacity: 1; + transform: translateX(-50%) scale(1); +} + +.popover-content.hidden { + opacity: 0; + transform: translateX(-50%) scale(0.9); +} + +// Media queries for responsiveness +@media (max-width: 768px) { + .popover-content { + max-width: 400px; + width: max-content; + font-size: 12px !important; + margin-left: 8rem; + white-space: wrap; + } + + .iconarrow { + left: 4rem; + } + +} + +@media (max-width: 480px) { + .popover-content { + max-width: 300px; + width: max-content; + font-size: 12px !important; + margin-left: 4.5rem; + white-space: wrap; + } + + .iconarrow { + left: 2rem; + } + +} \ No newline at end of file diff --git a/src/Components/PozoCarousel/PozoCarousel.jsx b/src/Components/PozoCarousel/PozoCarousel.jsx new file mode 100644 index 0000000..520e4ab --- /dev/null +++ b/src/Components/PozoCarousel/PozoCarousel.jsx @@ -0,0 +1,88 @@ +import { useEffect, useState, useCallback } from 'react'; +import "../../Styles/Components/PozoCarousel.scss"; +import Slide from "../../Images/slide.png"; + +const PozoCarousel = () => { + const [currentIndex, setCurrentIndex] = useState(0); + const [images, setImages] = useState([Slide]); + + const loadDynamicImages = useCallback(() => { + try { + const customCarousel = JSON.parse(localStorage.getItem('carouselImages')); + + if (customCarousel && Array.isArray(customCarousel) && customCarousel.length > 0) { + const dynamicImages = customCarousel + .map(item => (typeof item === 'string' ? item : item.image)) + .filter(Boolean); + if (dynamicImages.length > 0) { + setImages(dynamicImages); + return; + } + } + + // Default: only slide.png + setImages([Slide]); + } catch (err) { + console.error("Error reading carousel images from localStorage:", err); + setImages([Slide]); + } + }, []); + + useEffect(() => { + loadDynamicImages(); + window.addEventListener("storage", loadDynamicImages); + window.addEventListener("carouselImagesUpdated", loadDynamicImages); + return () => { + window.removeEventListener("storage", loadDynamicImages); + window.removeEventListener("carouselImagesUpdated", loadDynamicImages); + }; + }, [loadDynamicImages]); + + const nextSlide = useCallback(() => { + setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length); + }, [images.length]); + + const prevSlide = () => { + setCurrentIndex((prevIndex) => (prevIndex - 1 + images.length) % images.length); + }; + + const goToSlide = (index) => { + setCurrentIndex(index); + }; + + useEffect(() => { + if (images.length === 0) return; + const interval = setInterval(nextSlide, 6000); + return () => clearInterval(interval); + }, [nextSlide, images.length]); + + return ( +

+ +

+ {images.map((image, index) => ( +

+ ))} +

+ +

+ {images.map((_, index) => ( +

goToSlide(index)} + >

+ ))} +

+ ); +}; + +export default PozoCarousel; \ No newline at end of file diff --git a/src/Components/PozoPublicBreadCrumb/PozoPublicBreadCrumb.jsx b/src/Components/PozoPublicBreadCrumb/PozoPublicBreadCrumb.jsx new file mode 100644 index 0000000..b4cf027 --- /dev/null +++ b/src/Components/PozoPublicBreadCrumb/PozoPublicBreadCrumb.jsx @@ -0,0 +1,60 @@ +import React, { useState } from "react"; +import { useNavigate } from "react-router-dom"; +import { useDispatch, useSelector } from "react-redux"; +import { + breadCrumbSelector, + changeBreadCrumb, + emptyBreadCrumb, +} from "../../Features/LandingPage/landingPage.js"; +import FullPageLoader from "../../Components/Loader/PozoPublicLoader.jsx"; +import "../../Styles/Components/PozoPublicBreadCrumb.scss"; +const subDirectory = import.meta.env.BASE_URL; + +const Breadcrumbs = () => { + + const breadCrumb = useSelector(breadCrumbSelector); + const dispatch = useDispatch(); + const navigate = useNavigate(); + const [loading, setLoading] = useState(false); + + const items = [ + { + name: "Home", + link: `${subDirectory}app-page`, + }, + ]; + const handleBreadcrumbClick = (url) => { + setLoading(true); + setTimeout(() => { + dispatch(emptyBreadCrumb()); + dispatch(changeBreadCrumb({ items: items })); + navigate(url); + }, 1000); + + setLoading(false); + }; + + return ( +

+ {loading && } + +

+ ); +}; + +export default Breadcrumbs; diff --git a/src/Components/PozoPublicCard/ModalPozoPublic.jsx b/src/Components/PozoPublicCard/ModalPozoPublic.jsx new file mode 100644 index 0000000..7d94b1c --- /dev/null +++ b/src/Components/PozoPublicCard/ModalPozoPublic.jsx @@ -0,0 +1,92 @@ +import React, { useEffect, useRef } from 'react'; +import { IoCloseSharp } from 'react-icons/io5'; +// import Button from '../PozoForm/ButtonPozo'; +import { PiArrowRightBold } from 'react-icons/pi'; +import "../../Styles/Components/ModalPozoPublic.scss" + +const ModalPozoPublic = ({ + isOpen, + onClose, + width, + height, + button, + maxWidth, + maxHeight, + top, + right, + left, + bottom, + closeIcon, + title, + children, +}) => { + const modalRef = useRef(null); + + useEffect(() => { + const handleKeyDown = (event) => { + if (event.keyCode === 27) { + onClose(); + } + }; + + const handleClickOutside = (event) => { + if (modalRef.current && !modalRef.current.contains(event.target)) { + // onClose(); + } + }; + + if (isOpen) { + document.addEventListener('keydown', handleKeyDown); + document.addEventListener('mousedown', handleClickOutside); + } + + return () => { + document.removeEventListener('keydown', handleKeyDown); + document.removeEventListener('mousedown', handleClickOutside); + }; + }, [isOpen, onClose]); + + if (closeIcon === undefined) { + closeIcon = true; + } + + if (!isOpen) return null; + + const modalStyle = { + width: width, + height: height, + maxWidth: maxWidth, + maxHeight: maxHeight, + top: top, + right: right, + left: left, + bottom: bottom, + }; + + return ( +

+ {title && ( +

{title}

+ {closeIcon && ( + + )} +

+ )} +

{children}

+ {button && ( +

+ +

+ )} +

+ ); +}; + +export default ModalPozoPublic; \ No newline at end of file diff --git a/src/Components/PozoPublicCard/ShopCard.jsx b/src/Components/PozoPublicCard/ShopCard.jsx new file mode 100644 index 0000000..49752ca --- /dev/null +++ b/src/Components/PozoPublicCard/ShopCard.jsx @@ -0,0 +1,942 @@ +import { HiLocationMarker, HiOutlineBadgeCheck } from "react-icons/hi"; +import { TbTruckDelivery } from "react-icons/tb"; +import { BsLightningChargeFill } from "react-icons/bs"; +import { TbShare3 } from "react-icons/tb"; +import { RiDeleteBinLine } from "react-icons/ri"; +import { BiBookmark } from "react-icons/bi"; +import React, { useEffect, useState } from "react"; +import PropTypes from "prop-types"; +import { RiArrowDownSFill } from "react-icons/ri"; +import { BiRupee, BiStopwatch } from "react-icons/bi"; +import { AiOutlineHeart, AiFillStar } from "react-icons/ai"; +import { CiShop } from "react-icons/ci"; +import { GiScooter } from "react-icons/gi"; +import { IoCloseSharp } from "react-icons/io5"; +import ModalPozoPublic from "./ModalPozoPublic.jsx"; +// import ShopCardQuantity from "./ShopCardQuantity"; +import HeartSvg from "../../Images/Assets/HeartSvg"; +import "../../Styles/Components/ShopCard.scss"; +import pozologoimg from "../../Images/PozoStore.svg"; +import { useNavigate } from "react-router-dom"; +import FullPageLoader from "../../Components/Loader/PozoPublicLoader.jsx"; +import { useDispatch } from "react-redux"; +import { changeCartShow } from "../../Features/Cart/GlobalPublicBooking.js"; +const subDirectory = import.meta.env.BASE_URL; +const ShopCard = ({ + id, + shopName, + dishName, + imageUrl, + price, + deliveryTime, + deliveryDistance, + offer, + isVeg, + isNonVeg, + isFavorite, + addToCartBtn, + showCartShopName, + showQuantityModal, + showChangeQuantity, + offerValue, + deliveryAvailable, + MRP, + Buy, + QuantityPrice, + Review, + buyNow, + direction, + cartSDS, + deliveryStatus, + Cartoffer, + shopNameShow, + CartMRP, + Color, + Size, + Accredited, + showSize, + showColor, + youSave, + SDSIcon, + multiQty, + HomePrice, + ShowPinCodecheck, + ProductDescription, + InfoReview, + SingleImage, + ImageForwad, + Imagebackward, + imageChangeButtons, + imgwidth, + imgheight, + ShopCardDetailswidth, + Type, + favchecked, + data +}) => { + const navigate = useNavigate(); + const dispatch = useDispatch(); + + const [fillColor, setFillColor] = useState(isFavorite ? "white" : "#D42527"); + const [quantity, setQuantity] = useState(0); + const [isVisible, setIsVisible] = useState(false); + const [isModalOpen, setIsModalOpen] = useState(false); + const [loading, setLoading] = useState(false); + + + + const [isOpen, setIsOpen] = useState(false); + const [isCartVisible, setIsCartVisible] = useState(false); + + useEffect(() => { + if (favchecked == "Y") { + setFillColor('#D42527') + } + }, []) + + const openModal2 = () => setIsOpen(true); + const closeModal2 = () => setIsOpen(false); + const handleHeartClick = () => { + setFillColor((prevColor) => (prevColor === "white" ? "#D42527" : "white")); + }; + + const handleAddToCartClick = () => { + setIsVisible(true); + setIsCartVisible(true); + setQuantity((prevQuantity) => prevQuantity + 1); + dispatch(changeCartShow(true)); + }; + + const handleQuantityChange = (change) => { + setQuantity((prevQuantity) => { + const newQuantity = Math.max(prevQuantity + change, 0); + if (newQuantity === 0) { + setIsVisible(false); + dispatch(changeCartShow(false)); + } + return newQuantity; + }); + }; + + const openModal = () => { + setIsModalOpen(true); + }; + + const closeModal = () => { + setIsModalOpen(false); + }; + + const PageNavigate = () => { + setLoading(true); + + setTimeout(() => { + navigate(`${subDirectory}app-page/store`); + }, 700); + }; + + const PageIndividualNavigate = () => { + setLoading(true); + + setTimeout(() => { + navigate(`${subDirectory}app-page/IndividualCard`); + }, 700); + }; + + const [currentImage, setCurrentImage] = useState(imageUrl); + const [fade, setFade] = useState(true); + + useEffect(() => { + changeImage(imageUrl); + }, [imageUrl]); + const changeImage = (newImage) => { + setFade(false); + setTimeout(() => { + setCurrentImage(newImage); + setFade(true); + }, 300); // Duration of the fade-out effect + }; + + const navigateToCheckout = () => { + setLoading(true); + + setTimeout(() => { + navigate(`${subDirectory}app-page/checkout`); + setLoading(false); + }, 700); + } + + + return ( + <> + {loading && } + {isOpen && ( +

e.stopPropagation()}> + + large

+ + +

+ )} + +

+ {Type == "individualCard" ? ( +

+ {imageChangeButtons && ( +

+ +

+ )} + + {dishName}

+ + {imageChangeButtons && ( +

+ +

+ )} + + {isFavorite == "Y" && ( +

+ +

+ )} + {offer == "Y" && ( + {offerValue ? `${offerValue} % OFF` : ""} + )} + {isVeg == "veg" && ( +

+ ● +

+ )} + {isNonVeg == "Y" && ( +

+ ● +

+ )} +

+ ) : ( +

+ {imageChangeButtons && ( +

+ +

+ )} + + {dishName}

+ + {imageChangeButtons && ( +

+ +

+ )} + + {isFavorite == "Y" && ( +

+ +

+ )} + {offer == "Y" && ( + {offerValue ? `${offerValue} % OFF` : ""} + )} + {isVeg == "veg" && ( +

+ ● +

+ )} + {isNonVeg == "Y" && ( +

+ ● +

+ )} +

+ )} + +

+ {showQuantityModal == "Y" && ( +

+ 400 g +

+ {QuantityPrice && ( +

+ + {QuantityPrice} +

+ )} +

+ +

+ 4.5 +

(1 Review)

+ )} + + {shopNameShow == "Y" && ( +

+ {Type == "PozoCart" ? "From" : "Visit"} + {shopName} +

+ )} + +

+ {dishName} +

+ {deliveryAvailable == "Y" && ( +

+ {" "} + Delivery Available +

+ )} + {ProductDescription == "Y" && ( +

+ Bluetooth Soundbar w/ 500W RMS Signature Sound,5.1 + Channel Surround Sound,BTv5.3, Wall Mountable + Design,Bass&Treble Controls&Master Remote + Control(Premium Black) +

+ )} + {showCartShopName == "Y" && ( +

+ From + {shopName} +

+ )} + {Accredited == "Y" && ( +

+ + {" "} + + Accredited + +

+ )} + {InfoReview == "Y" && ( +

+ {" "} + 4.5 +

(1 Review)

+ + Lorem ipsum dolor sit amet consectetur adipisicing + elit. At quas eius quaerat rerum, accusantium quis + maxime reiciendis + +

+ )} +

+ {Type == "individualCard" && ( +

+ {price && ( +

+ + {price} +

+ )} + {HomePrice && ( +

+ From{" "} + {" "} + {HomePrice} /- +

+ )} + + {CartMRP == "Y" && ( + + M.R.P.: ~~₹1,0099.00~~ + + )} + + {Cartoffer == "Y" && ( + + {offerValue ? `${offerValue} % OFF` : ""} + + )} + {youSave && ( +

You Save ₹{youSave}

+ )} +

+ + {deliveryTime && ( +

+ {deliveryTime}{" "} + {deliveryDistance && " • " + deliveryDistance} +

+ )} +

+ + {ShowPinCodecheck == "Y" && ( +

+ + { + if (e.target.value.length > 6) { + e.target.value = e.target.value.slice(0, 6); + } + }} + /> +

+ Check Delivery +

+ )} + +

+ {showSize == "Y" && ( +

+ Size :

{Size} + +

+ )} + + {showColor == "Y" && ( +

+ Color :

{Color}

+ )} +

+ {Review == "Y" && ( +

+ 4.5 +

(1 Review)

+ + Lorem ipsum dolor sit amet consectetur adipisicing elit. + At quas eius quaerat rerum, accusantium quis maxime + reiciendis + +

+ )} + {cartSDS == "Y" && ( +

+ {" "} + Save for later +

+ {" "} + delete +

+ {" "} + share +

+ )} + + {SDSIcon == "Y" && ( +

+ {Type !== "individualCard" && } + {Type !== "individualCard" && } + {" "} +

+ )} +

+ {MRP && ~~M.R.P.:₹{MRP}~~} + {Buy == "Y" &&

BUY

} +

+ +

+ {Type !== "individualCard" && ( +

+ {price && ( +

+ {price} +

+ )} + {HomePrice && ( +

+ From {HomePrice} /- +

+ )} + + {/*================== cart MRP ============= */} + {CartMRP == "Y" && ( + M.R.P.: ~~₹1,0099.00~~ + )} + + {Cartoffer == "Y" && ( + + {offerValue ? `${offerValue} % OFF` : ""} + )} + {youSave && ( +

+ You Save ₹{youSave} +

+ )} +

+ + {deliveryTime && ( +

+ {deliveryTime} {deliveryDistance && " • " + deliveryDistance} +

+ )} + +

+ )} + + +

+ + {deliveryStatus == "Y" && ( +

+ + DELIVERY Free •{" "} + 6 | Jul | Saturday + {" "} + + Fast • Today +

+ )} + +

+ {showChangeQuantity == "Y" && ( +

+ 400 g +

+ )} + {buyNow == "Y" &&

BUY NOW

} + {isVisible ? ( +

+ handleQuantityChange(-1)}>- +

+ {quantity} +

+ handleQuantityChange(1)}>+ +

+ ) + : ( + addToCartBtn == "Y" && ( + <> +

+ Add to Cart +

+ + ) + )} +

+ } + title="Select your Quantity" + isOpen={isModalOpen} + > +

+ {multiQty?.map((data) => ( + + ))} +

+ +

e.stopPropagation()}> + + large

+ + +

+ )} + +

+ {Type == "individualCard" ? ( +

+ {imageChangeButtons && ( +

+ +

+ )} + + {dishName}

+ + {imageChangeButtons && ( +

+ +

+ )} + + {isFavorite == "Y" && ( +

+ +

+ )} + {offer == "Y" && ( + {offerValue ? `${offerValue} % OFF` : ""} + )} + {isVeg == "veg" && ( +

+ ● +

+ )} + {isNonVeg == "Y" && ( +

+ ● +

+ )} +

+ ) : ( +

+ {imageChangeButtons && ( +

+ +

+ )} + + {dishName}

+ + {imageChangeButtons && ( +

+ +

+ )} + + {isFavorite == "Y" && ( +

+ +

+ )} + {offer == "Y" && ( + {offerValue ? `${offerValue} % OFF` : ""} + )} + {isVeg == "veg" && ( +

+ ● +

+ )} + {isNonVeg == "Y" && ( +

+ ● +

+ )} +

+ )} + +

+ {showQuantityModal == "Y" && ( +

+ 400 g +

+ {QuantityPrice && ( +

+ + {QuantityPrice} +

+ )} +

+ +

+ 4.5 +

(1 Review)

+ )} + + {shopNameShow == "Y" && ( +

+ {Type == "PozoCart" ? "From" : "Visit"} + {shopName} +

+ )} + +

+ {dishName} +

+ {deliveryAvailable == "Y" && ( +

+ {" "} + Delivery Available +

+ )} + {ProductDescription == "Y" && ( +

+ Bluetooth Soundbar w/ 500W RMS Signature Sound,5.1 + Channel Surround Sound,BTv5.3, Wall Mountable + Design,Bass&Treble Controls&Master Remote + Control(Premium Black) +

+ )} + {showCartShopName == "Y" && ( +

+ From + {shopName} +

+ )} + {Accredited == "Y" && ( +

+ + {" "} + + Accredited + +

+ )} + {InfoReview == "Y" && ( +

+ {" "} + 4.5 +

(1 Review)

+ + Lorem ipsum dolor sit amet consectetur adipisicing + elit. At quas eius quaerat rerum, accusantium quis + maxime reiciendis + +

+ )} +

+ {Type == "individualCard" && ( +

+ {price && ( +

+ + {price} +

+ )} + {HomePrice && ( +

+ From{" "} + {" "} + {HomePrice} /- +

+ )} + + {CartMRP == "Y" && ( + + M.R.P.: ~~₹1,0099.00~~ + + )} + + {Cartoffer == "Y" && ( + + {offerValue ? `${offerValue} % OFF` : ""} + + )} + {youSave && ( +

You Save ₹{youSave}

+ )} +

+ + {deliveryTime && ( +

+ {deliveryTime}{" "} + {deliveryDistance && " • " + deliveryDistance} +

+ )} +

+ + {ShowPinCodecheck == "Y" && ( +

+ + { + if (e.target.value.length > 6) { + e.target.value = e.target.value.slice(0, 6); + } + }} + /> +

+ Check Delivery +

+ )} + +

+ {showSize == "Y" && ( +

+ Size :

{Size}

+ )} + + {showColor == "Y" && ( +

+ Color :

{Color}

+ )} +

+ {Review == "Y" && ( +

+ 4.5 +

(1 Review)

+ + Lorem ipsum dolor sit amet consectetur adipisicing elit. + At quas eius quaerat rerum, accusantium quis maxime + reiciendis + +

+ )} + {cartSDS == "Y" && ( +

+ {" "} + Save for later +

+ {" "} + delete +

+ {" "} + share +

+ )} + + {SDSIcon == "Y" && ( +

+ + + {" "} +

+ )} +

+ {MRP && ~~M.R.P.:₹{MRP}~~} + {Buy == "Y" &&

BUY

} +

+ +

+ {Type !== "individualCard" && ( +

+ {price && ( +

+ {price} +

+ )} + {HomePrice && ( +

+ From {HomePrice} /- +

+ You Save ₹{youSave} +

+ )} +

+ + {deliveryTime && ( +

+ {deliveryTime} {deliveryDistance && " • " + deliveryDistance} +

+ )} + +

+ )} + + +

+ + {deliveryStatus == "Y" && ( +

+ + DELIVERY Free •{" "} + 6 | Jul | Saturday + {" "} + + Fast • Today +

+ )} + +

+ {showChangeQuantity == "Y" && ( +

+ 400 g +

+ )} + {buyNow == "Y" &&

BUY NOW

} + {isVisible ? ( +

+ handleQuantityChange(-1)}>- +

+ {quantity} +

+ handleQuantityChange(1)}>+ +

+ ) + : ( + addToCartBtn == "Y" && ( + <> +

+ Add to Cart +

+ + ) + )} +

+ } + title="Select your Quantity" + isOpen={isModalOpen} + > +

+ {multiQty?.map((data) => ( + + ))} +

+ +

+ + ); +}; +// console.log(ShopCard.propTypes, "ShopCardShopCard"); +ShopCard.propTypes = { + id: PropTypes.number.isRequired, + shopName: PropTypes.string.isRequired, + dishName: PropTypes.string.isRequired, + imageUrl: PropTypes.string.isRequired, + price: PropTypes.string.isRequired, + deliveryTime: PropTypes.string.isRequired, + deliveryDistance: PropTypes.string.isRequired, + direction: PropTypes.string.isRequired, + QuantityPrice: PropTypes.string.isRequired, + Color: PropTypes.string.isRequired, + Size: PropTypes.string.isRequired, + youSave: PropTypes.string.isRequired, + HomePrice: PropTypes.string.isRequired, + + offer: PropTypes.bool, + isVeg: PropTypes.bool, + isNonVeg: PropTypes.bool, + isFavorite: PropTypes.bool, + addToCartBtn: PropTypes.bool, + showCartShopName: PropTypes.bool, + showQuantityModal: PropTypes.bool, + showChangeQuantity: PropTypes.bool, + deliveryAvailable: PropTypes.bool, + Buy: PropTypes.bool, + Review: PropTypes.bool, + buyNow: PropTypes.bool, + cartSDS: PropTypes.bool, + deliveryStatus: PropTypes.bool, + Cartoffer: PropTypes.bool, + shopNameShow: PropTypes.bool, + CartMRP: PropTypes.bool, + Accredited: PropTypes.bool, + showSize: PropTypes.bool, + showColor: PropTypes.bool, + youSave: PropTypes.bool, + SDSIcon: PropTypes.bool, +}; + +ShopCard.defaultProps = { + offer: true, + isVeg: false, + isNonVeg: false, + isFavorite: true, + addToCartBtn: true, + showCartShopName: true, + showQuantityModal: true, + showChangeQuantity: true, + deliveryAvailable: true, + Buy: true, + Review: true, + buyNow: true, + cartSDS: true, + deliveryStatus: true, + Cartoffer: true, + shopNameShow: true, + CartMRP: true, + Accredited: true, + showSize: true, + showColor: true, + SDSIcon: false, +}; + +export default ShopCard; diff --git a/src/Components/PozoPublicCatergory/PozoCategory.jsx b/src/Components/PozoPublicCatergory/PozoCategory.jsx new file mode 100644 index 0000000..2a38d6d --- /dev/null +++ b/src/Components/PozoPublicCatergory/PozoCategory.jsx @@ -0,0 +1,683 @@ +import { useEffect, useRef, useState } from "react"; +import "../../Styles/Components/PozoCategory.scss"; +import MobilePng from "../../Images/mobilepng.png"; + +const PozoCategory = () => { + const categories = [ + { + "category": "Mobile & Accessories", + "subcategories": [ + { + "name": "Mobile Phones", + "types": [ + { + "typesName": "Smartphones", + "products": ["iPhone 12", "Samsung Galaxy S21", "OnePlus 9"] + }, + { + "typesName": "Feature Phones", + "products": ["Nokia 3310", "Samsung Guru", "Micromax Joy"] + }, + { + "typesName": "Rugged Phones", + "products": ["CAT S62 Pro", "Ulefone Armor 9", "Doogee S96 Pro"] + }, + { + "typesName": "Foldable Phones", + "products": ["Samsung Galaxy Z Fold 2", "Huawei Mate Xs", "Motorola Razr"] + } + ] + }, + { + "name": "Mobile Accessories", + "types": [ + { + "typesName": "Chargers", + "products": ["Anker Charger", "Belkin Charger", "Apple MagSafe"] + }, + { + "typesName": "Cables", + "products": ["Anker Cable", "Belkin Cable", "Amazon Basics Cable"] + }, + { + "typesName": "Power Banks", + "products": ["Anker PowerCore", "Mi Power Bank", "RavPower Power Bank"] + }, + { + "typesName": "Headphones & Earphones", + "products": ["Sony WH-1000XM4", "Bose QC35", "Apple AirPods"] + }, + { + "typesName": "Cases & Covers", + "products": ["Spigen Case", "OtterBox Case", "Caseology Cover"] + }, + + ] + } + ] + }, + { + "category": "Furniture", + "subcategories": [ + { + "name": "Living Room", + "types": [ + { + "typesName": "Sofas", + "products": ["Ikea Sofa", "Ashley Sofa", "West Elm Sofa"] + }, + { + "typesName": "Coffee Tables", + "products": ["Ikea Coffee Table", "West Elm Coffee Table", "Ashley Coffee Table"] + }, + { + "typesName": "TV Stands", + "products": ["Ikea TV Stand", "Ashley TV Stand", "West Elm TV Stand"] + }, + { + "typesName": "Bookshelves", + "products": ["Ikea Bookshelf", "West Elm Bookshelf", "Ashley Bookshelf"] + } + ] + }, + { + "name": "Bedroom", + "types": [ + { + "typesName": "Beds", + "products": ["Ikea Bed", "Ashley Bed", "West Elm Bed"] + }, + { + "typesName": "Wardrobes", + "products": ["Ikea Wardrobe", "Ashley Wardrobe", "West Elm Wardrobe"] + }, + { + "typesName": "Dressers", + "products": ["Ikea Dresser", "Ashley Dresser", "West Elm Dresser"] + }, + { + "typesName": "Nightstands", + "products": ["Ikea Nightstand", "Ashley Nightstand", "West Elm Nightstand"] + } + ] + }, + { + "name": "Dining Room", + "types": [ + { + "typesName": "Dining Tables", + "products": ["Ikea Dining Table", "Ashley Dining Table", "West Elm Dining Table"] + }, + { + "typesName": "Dining Chairs", + "products": ["Ikea Dining Chair", "Ashley Dining Chair", "West Elm Dining Chair"] + }, + { + "typesName": "Sideboards", + "products": ["Ikea Sideboard", "Ashley Sideboard", "West Elm Sideboard"] + }, + { + "typesName": "Bar Stools", + "products": ["Ikea Bar Stool", "Ashley Bar Stool", "West Elm Bar Stool"] + } + ] + }, + { + "name": "Office", + "types": [ + { + "typesName": "Desks", + "products": ["Ikea Desk", "Ashley Desk", "West Elm Desk"] + }, + { + "typesName": "Office Chairs", + "products": ["Ikea Office Chair", "Ashley Office Chair", "West Elm Office Chair"] + }, + { + "typesName": "File Cabinets", + "products": ["Ikea File Cabinet", "Ashley File Cabinet", "West Elm File Cabinet"] + }, + { + "typesName": "Bookcases", + "products": ["Ikea Bookcase", "West Elm Bookcase", "Ashley Bookcase"] + } + ] + }, + { + "name": "Outdoor", + "types": [ + { + "typesName": "Patio Furniture", + "products": ["Ikea Patio Furniture", "Ashley Patio Furniture", "West Elm Patio Furniture"] + }, + { + "typesName": "Garden Chairs", + "products": ["Ikea Garden Chair", "Ashley Garden Chair", "West Elm Garden Chair"] + }, + { + "typesName": "Outdoor Tables", + "products": ["Ikea Outdoor Table", "Ashley Outdoor Table", "West Elm Outdoor Table"] + }, + { + "typesName": "Hammocks", + "products": ["Ikea Hammock", "Ashley Hammock", "West Elm Hammock"] + } + ] + } + ] + }, + { + "category": "Healthcare & Pharma", + "subcategories": [ + { + "name": "Medicines", + "types": [ + { + "typesName": "Prescription Medicines", + "products": ["Medicine A", "Medicine B", "Medicine C"] + }, + { + "typesName": "Over-the-Counter Medicines", + "products": ["Medicine D", "Medicine E", "Medicine F"] + } + ] + }, + { + "name": "Supplements", + "types": [ + { + "typesName": "Vitamins", + "products": ["Vitamin A", "Vitamin B", "Vitamin C"] + }, + { + "typesName": "Minerals", + "products": ["Mineral A", "Mineral B", "Mineral C"] + }, + { + "typesName": "Herbal Supplements", + "products": ["Herb A", "Herb B", "Herb C"] + } + ] + }, + { + "name": "Personal Care", + "types": [ + { + "typesName": "Skincare", + "products": ["Skincare Product A", "Skincare Product B", "Skincare Product C"] + }, + { + "typesName": "Haircare", + "products": ["Haircare Product A", "Haircare Product B", "Haircare Product C"] + }, + { + "typesName": "Oral Care", + "products": ["Oral Care Product A", "Oral Care Product B", "Oral Care Product C"] + } + ] + }, + { + "name": "Medical Devices", + "types": [ + { + "typesName": "Thermometers", + "products": ["Thermometer A", "Thermometer B", "Thermometer C"] + }, + { + "typesName": "Blood Pressure Monitors", + "products": ["BP Monitor A", "BP Monitor B", "BP Monitor C"] + }, + { + "typesName": "Glucose Monitors", + "products": ["Glucose Monitor A", "Glucose Monitor B", "Glucose Monitor C"] + } + ] + } + ] + }, + { + "category": "Life Style & Fashion", + "subcategories": [ + { + "name": "Clothing", + "types": [ + { + "typesName": "Men's Clothing", + "products": ["Men's Shirt A", "Men's Pants B", "Men's Jacket C"] + }, + { + "typesName": "Women's Clothing", + "products": ["Women's Dress A", "Women's Top B", "Women's Skirt C"] + }, + { + "typesName": "Children's Clothing", + "products": ["Children's Shirt A", "Children's Pants B", "Children's Jacket C"] + } + ] + }, + { + "name": "Footwear", + "types": [ + { + "typesName": "Men's Footwear", + "products": ["Men's Shoes A", "Men's Boots B", "Men's Sandals C"] + }, + { + "typesName": "Women's Footwear", + "products": ["Women's Shoes A", "Women's Boots B", "Women's Sandals C"] + }, + { + "typesName": "Children's Footwear", + "products": ["Children's Shoes A", "Children's Boots B", "Children's Sandals C"] + } + ] + }, + { + "name": "Accessories", + "types": [ + { + "typesName": "Watches", + "products": ["Watch A", "Watch B", "Watch C"] + }, + { + "typesName": "Bags", + "products": ["Bag A", "Bag B", "Bag C"] + }, + { + "typesName": "Jewelry", + "products": ["Jewelry A", "Jewelry B", "Jewelry C"] + }, + { + "typesName": "Hats", + "products": ["Hat A", "Hat B", "Hat C"] + } + ] + } + ] + }, + { + "category": "Restaurant", + "subcategories": [ + { + "name": "Cuisine Type", + "types": [ + { + "typesName": "Italian", + "products": ["Dish A", "Dish B", "Dish C"] + }, + { + "typesName": "Chinese", + "products": ["Dish D", "Dish E", "Dish F"] + }, + { + "typesName": "Indian", + "products": ["Dish G", "Dish H", "Dish I"] + }, + { + "typesName": "Mexican", + "products": ["Dish J", "Dish K", "Dish L"] + } + ] + }, + { + "name": "Dining Experience", + "types": [ + { + "typesName": "Fine Dining", + "products": ["Restaurant A", "Restaurant B", "Restaurant C"] + }, + { + "typesName": "Casual Dining", + "products": ["Restaurant D", "Restaurant E", "Restaurant F"] + }, + { + "typesName": "Fast Food", + "products": ["Restaurant G", "Restaurant H", "Restaurant I"] + }, + { + "typesName": "Cafes", + "products": ["Cafe A", "Cafe B", "Cafe C"] + } + ] + }, + { + "name": "Special Services", + "types": [ + { + "typesName": "Takeout", + "products": ["Takeout Service A", "Takeout Service B", "Takeout Service C"] + }, + { + "typesName": "Delivery", + "products": ["Delivery Service A", "Delivery Service B", "Delivery Service C"] + }, + { + "typesName": "Catering", + "products": ["Catering Service A", "Catering Service B", "Catering Service C"] + } + ] + } + ] + }, + { + "category": "Bakery", + "subcategories": [ + { + "name": "Bakery Products", + "types": [ + { + "typesName": "Bread", + "products": ["Bread A", "Bread B", "Bread C"] + }, + { + "typesName": "Cakes", + "products": ["Cake A", "Cake B", "Cake C"] + }, + { + "typesName": "Cookies", + "products": ["Cookie A", "Cookie B", "Cookie C"] + }, + { + "typesName": "Pastries", + "products": ["Pastry A", "Pastry B", "Pastry C"] + } + ] + }, + { + "name": "Specialty Items", + "types": [ + { + "typesName": "Gluten-Free", + "products": ["Gluten-Free Item A", "Gluten-Free Item B", "Gluten-Free Item C"] + }, + { + "typesName": "Vegan", + "products": ["Vegan Item A", "Vegan Item B", "Vegan Item C"] + }, + { + "typesName": "Sugar-Free", + "products": ["Sugar-Free Item A", "Sugar-Free Item B", "Sugar-Free Item C"] + } + ] + }, + { + "name": "Beverages", + "types": [ + { + "typesName": "Coffee", + "products": ["Coffee A", "Coffee B", "Coffee C"] + }, + { + "typesName": "Tea", + "products": ["Tea A", "Tea B", "Tea C"] + }, + { + "typesName": "Juices", + "products": ["Juice A", "Juice B", "Juice C"] + } + ] + } + ] + }, + { + "category": "Toys & Gifts", + "subcategories": [ + { + "name": "Toys", + "types": [ + { + "typesName": "Educational Toys", + "products": ["Toy A", "Toy B", "Toy C"] + }, + { + "typesName": "Action Figures", + "products": ["Action Figure A", "Action Figure B", "Action Figure C"] + }, + { + "typesName": "Dolls", + "products": ["Doll A", "Doll B", "Doll C"] + }, + { + "typesName": "Board Games", + "products": ["Board Game A", "Board Game B", "Board Game C"] + } + ] + }, + { + "name": "Gifts", + "types": [ + { + "typesName": "Gift Cards", + "products": ["Gift Card A", "Gift Card B", "Gift Card C"] + }, + { + "typesName": "Personalized Gifts", + "products": ["Personalized Gift A", "Personalized Gift B", "Personalized Gift C"] + }, + { + "typesName": "Gift Baskets", + "products": ["Gift Basket A", "Gift Basket B", "Gift Basket C"] + }, + { + "typesName": "Flowers", + "products": ["Flower A", "Flower B", "Flower C"] + } + ] + } + ] + }, + { + "category": "HARDWARES", + "subcategories": [ + { + "name": "Tools", + "types": [ + { + "typesName": "Hand Tools", + "products": ["Hand Tool A", "Hand Tool B", "Hand Tool C"] + }, + { + "typesName": "Power Tools", + "products": ["Power Tool A", "Power Tool B", "Power Tool C"] + }, + { + "typesName": "Garden Tools", + "products": ["Garden Tool A", "Garden Tool B", "Garden Tool C"] + } + ] + }, + { + "name": "Building Materials", + "types": [ + { + "typesName": "Lumber", + "products": ["Lumber A", "Lumber B", "Lumber C"] + }, + { + "typesName": "Concrete", + "products": ["Concrete A", "Concrete B", "Concrete C"] + }, + { + "typesName": "Roofing", + "products": ["Roofing A", "Roofing B", "Roofing C"] + } + ] + }, + { + "name": "Paint", + "types": [ + { + "typesName": "Interior Paint", + "products": ["Interior Paint A", "Interior Paint B", "Interior Paint C"] + }, + { + "typesName": "Exterior Paint", + "products": ["Exterior Paint A", "Exterior Paint B", "Exterior Paint C"] + }, + { + "typesName": "Primers", + "products": ["Primer A", "Primer B", "Primer C"] + }, + { + "typesName": "Spray Paint", + "products": ["Spray Paint A", "Spray Paint B", "Spray Paint C"] + } + ] + } + ] + } + ]; + + + const scrollContainerRef = useRef(null); + const isDownRef = useRef(false); + const startXRef = useRef(0); + const scrollLeftRef = useRef(0); + const [hovered, setHovered] = useState(false); + const [selectedCategory, setSelectedCategory] = useState(null); + const [clientWidth, setClientWidth] = useState(0); + const category = categories.find(c => c.category === selectedCategory); + const subcategories = category?.subcategories || []; + + + useEffect(() => { + const updateClientWidth = () => { + if (scrollContainerRef.current) { + setClientWidth(scrollContainerRef.current.clientWidth); + } + }; + + updateClientWidth(); + + const resizeObserver = new ResizeObserver(() => { + updateClientWidth(); + }); + + if (scrollContainerRef.current) { + resizeObserver.observe(scrollContainerRef.current); + } + + return () => { + if (scrollContainerRef.current) { + resizeObserver.unobserve(scrollContainerRef.current); + } + }; + }, []); + + + const handleMouseDown = (event) => { + isDownRef.current = true; + startXRef.current = event.pageX - scrollContainerRef.current.offsetLeft; + scrollLeftRef.current = scrollContainerRef.current.scrollLeft; + scrollContainerRef.current.style.cursor = "grabbing"; + }; + + + const handleMouseLeave = () => { + isDownRef.current = false; + scrollContainerRef.current.style.cursor = "grab"; + }; + + const handleMouseUp = () => { + isDownRef.current = false; + scrollContainerRef.current.style.cursor = "grab"; + }; + + const handleMouseMove = (event) => { + if (!isDownRef.current) return; + event.preventDefault(); + const x = event.pageX - scrollContainerRef.current.offsetLeft; + const walk = (x - startXRef.current) * 1; // Scroll-fast + scrollContainerRef.current.scrollLeft = scrollLeftRef.current - walk; + }; + + + const OnchangeCategoryHover = (event) => { + setHovered(event) + } + + const handleCategoryClick = (categoryName) => { + + if (clientWidth >= 768) { + setSelectedCategory(categoryName); + } else { + // Based On categoryName API Call For Mobile Screen and redirection for the page + } + }; + + + const categoryimages = [ + MobilePng, + "https://img.freepik.com/premium-photo/retro-vinyl-club-chair-vibrant-yellow-color-isolated-solid-white-background_943617-35916.jpg?ga=GA1.1.1052249002.1710723563&semt=ais_user", + "https://img.freepik.com/premium-photo/brown-medical-bottles-pills-isolated-white-background_185193-8416.jpg?ga=GA1.1.1052249002.1710723563&semt=ais_user", + "https://img.freepik.com/free-photo/top-view-clothing_1203-8177.jpg?size=626&ext=jpg&ga=GA1.1.1052249002.1710723563&semt=ais_user", + "https://img.freepik.com/free-photo/view-building-with-cartoon-style-architecture_23-2151154879.jpg?ga=GA1.1.1052249002.1710723563&semt=ais_user", + "https://img.freepik.com/premium-photo/basket-full-baked-delights-generative-ai_356545-457.jpg?ga=GA1.1.1052249002.1710723563&semt=ais_user", + "https://img.freepik.com/premium-photo/toy-bear-present-box-red-bow-isolated-white-birthday-christmas-holiday-party-celebration_474717-7138.jpg?ga=GA1.1.1052249002.1710723563&semt=ais_user", + "https://img.freepik.com/premium-photo/heap-computer-hardware-isolated-white_266732-23923.jpg?ga=GA1.1.1052249002.1710723563&semt=ais_user", + + + ] + + + return ( +

+ + + {clientWidth >= 768 && < div + className="Cascading-Div" + onMouseEnter={() => { OnchangeCategoryHover(true) }} + onMouseLeave={() => { OnchangeCategoryHover(false) }} + style={hovered ? { display: "flex" } : { display: "none" }} + > + {subcategories?.map((item, idx) => ( +

{item.name}

+ {item.types?.map((sub, sIdx) => (

{sub.typesName}

))} +

+ ))} +

} + + +

+ {categories.map((cat, index) => ( +

{ OnchangeCategoryHover(true), handleCategoryClick(cat.category) }} + onMouseLeave={() => { OnchangeCategoryHover(false) }} + + > +

+ {clientWidth < 768 && + +

} +

{cat.category}

+ ))} + +

+ ); +}; + +export default PozoCategory; diff --git a/src/Components/PozoPublicFooter/PozoPublicFooter.jsx b/src/Components/PozoPublicFooter/PozoPublicFooter.jsx new file mode 100644 index 0000000..9655a0e --- /dev/null +++ b/src/Components/PozoPublicFooter/PozoPublicFooter.jsx @@ -0,0 +1,92 @@ +import React from 'react' +import "./PozoPublicFooter.scss" +import pozologo from "../../Images/PozoStore.svg" +import playstoreIcon from "../../Images/playstore.png" +import applestoreIcon from "../../Images/applestore.png" +import { IoIosHelpCircleOutline, IoLogoLinkedin } from 'react-icons/io' +import { FaInstagramSquare } from 'react-icons/fa' +import { FaFacebook, FaXTwitter, FaYoutube } from 'react-icons/fa6' +import { PiShootingStar, PiStorefront } from 'react-icons/pi' +import { GoGift } from 'react-icons/go' + +const PozoPublicFooter = () => { + return ( +

ABOUT

About Us

Pozo Stories

Press

Help

Track Your Order

Warranty & Support

Return Policy

Service Centers

Bulk Orders

Why Buy Direct

LEARN MORE

Privacy

Security

Terms

Sitemap

SOCIAL MEDIA

+ + + + + +

Play Store

App Store

+ +

Become a Seller

+ +

Advertise

+ +

Become a Seller

+ +

Become a Seller

+ ) +} + +export default PozoPublicFooter \ No newline at end of file diff --git a/src/Components/PozoPublicFooter/PozoPublicFooter.scss b/src/Components/PozoPublicFooter/PozoPublicFooter.scss new file mode 100644 index 0000000..40dca8a --- /dev/null +++ b/src/Components/PozoPublicFooter/PozoPublicFooter.scss @@ -0,0 +1,157 @@ +.PozoPublicFooter-master { + width: 100vw; + padding: 1rem 2rem 0 2rem; + + +} + +.PozoPublicFooter-container { + display: flex; + background-color: #F0F5FF; + // height: 40vh; + padding-top: 2rem; + padding: 2rem 2rem 1rem 2rem; + flex-wrap: wrap; + gap: 1rem; +} + +.PozoPublicFooter-img-div { + width: 15%; +} + +.PozoPublicFooter-img-div img { + width: 7rem; + +} + +.PozoPublicFooter-content { + display: flex; + width: 80%; + justify-content: space-around; + flex-wrap: wrap; + gap: 1.5rem 2rem; +} + +.PozoPublicFooter-content-header { + font-size: 14px; + font-weight: 500; + padding-bottom: 0.8rem; + // color: #000001C1; +} + +.PozoPublicFooter-content-data { + font-size: 13px; + font-weight: 500; + padding: 3px 0; + color: #000001C1; + cursor: pointer; + white-space: nowrap; +} + +.PozoPublicFooter-socialmedia-icons { + display: flex; + column-gap: 15px; + align-items: center; + margin-bottom: 1rem; + cursor: pointer; +} + +.PozoPublicFooter-download-options { + display: flex; + flex-direction: column; + row-gap: 1rem; +} + +.PozoPublicFooter-download-div { + display: flex; + // border: 1px solid #000001C1; + padding: 7px 25px; + border-radius: 8px; + background-color: rgb(255, 255, 255); + align-items: center; + column-gap: 5px; + justify-content: center; +} + +.PozoPublicFooter-download-options div img { + width: 25px; +} + +.PozoPublicFooter-copyrights { + padding: 1rem 1rem; + background-color: #F0F5FF; +} + +.extera-option-container { + display: flex; + justify-content: center; + column-gap: 2rem; + row-gap: 0.5rem; + flex-wrap: wrap; + margin-bottom: 1.5rem; +} + +.extera-option { + display: flex; + align-items: center; + column-gap: 0.5rem; +} + +.PozoPublicFooter-copyrights-text { + font-size: 13px; + text-align: center; + margin: 1rem 0 0 0; + font-family: "Gilroy"; + + span { + font-weight: 600; + color: #000000; + } +} + + +@media (max-width:768px) { + .PozoPublicFooter-content { + justify-content: space-between; + width: 100%; + } + + .PozoPublicFooter-master { + padding: 1rem 1rem; + padding-bottom: 4.5rem; + } + + .PozoPublicFooter-container { + padding: 1rem 1rem; + } + + .PozoPublicFooter-content-header { + font-size: 13px; + } + + .PozoPublicFooter-content-data { + font-size: 11.5px; + font-weight: 400; + } + + .PozoPublicFooter-copyrights-text { + font-size: 10px; + font-weight: 500; + } + + .PozoPublicFooter-download-options { + flex-direction: row; + column-gap: 1rem; + justify-content: flex-start; + } + + .PozoPublicFooter-download-div { + width: max-content; + + padding: 3px 3px; + } + + .PozoPublicFooter-download-div .PozoPublicFooter-content-data { + display: none; + } +} \ No newline at end of file diff --git a/src/Components/PozoPublicNavbar/PozoPubliNavbar.jsx b/src/Components/PozoPublicNavbar/PozoPubliNavbar.jsx new file mode 100644 index 0000000..0bc4e2f --- /dev/null +++ b/src/Components/PozoPublicNavbar/PozoPubliNavbar.jsx @@ -0,0 +1,699 @@ +import { MdOutlineWatchLater } from "react-icons/md"; +import { FiSearch } from "react-icons/fi"; +import { IoIosArrowDown, IoMdClose } from "react-icons/io"; +import { MdOutlineMyLocation } from "react-icons/md"; +import { AiOutlineClose } from "react-icons/ai"; +import { useState, useEffect, useRef } from "react"; +import { useNavigate } from "react-router-dom"; +import { useDispatch, useSelector } from "react-redux"; + +import pozologo from "../../Images/PozoStore.svg"; +import { HiLocationMarker } from "react-icons/hi"; +import { + PiShoppingCartLight, + PiStorefrontLight, + PiUserCircleLight, +} from "react-icons/pi"; +import { FaChevronDown } from "react-icons/fa6"; +import { GoHeart } from "react-icons/go"; +import { RxHamburgerMenu } from "react-icons/rx"; +import "../../Styles/HomePage/PozoPublicNavbar.scss"; + +import PozoPublicSearch from "./PozoPublicSearch/PozoPublicSearch"; +import { CiViewList } from "react-icons/ci"; +import FullPageLoader from "../Loader/PozoPublicLoader"; +import samplepic from "../../Images/Restaurant.png"; +import { LuChevronDownCircle, LuChevronUpCircle } from "react-icons/lu"; +import { breadCrumbSelector, changeBreadCrumb } from "../../Features/LandingPage/landingPage"; +const subDirectory = import.meta.env.BASE_URL; + +const PozoPublicNavbar = () => { + const dispatch = useDispatch(); + const navigate = useNavigate(); + const [Searchquery, setSearchquery] = useState(''); + const breadCrumb = useSelector(breadCrumbSelector); + const dropdownRef = useRef(null); + const ref = useRef(null); + const PageName = breadCrumb?.[breadCrumb.length - 1]?.name + const [profile, setProfile] = useState(false); + const [loading, setLoading] = useState(false); + const [isCollapsed, setIsCollapsed] = useState(false); + const [isCollapsedbook, setIsCollapsedbook] = useState(true); + const [sidedrawer, setSidedrawer] = useState(true); + const [locationDropdown, setLocationDropdown] = useState(false); + const [dropdownClosing, setDropdownClosing] = useState(false); + const [showLocationList, setShowLocationList] = useState(false); + const [Locationdata, setLocationdata] = useState([]); + const [currentLocation, setCurrentLocation] = useState( + localStorage.getItem("currentLocation") || "Hosur,, PRPH+33F, Hamumanth..." + ); + + const selectLocation = (locName) => { + if (locName) { + setCurrentLocation(locName); + localStorage.setItem("currentLocation", locName); + } + toggleLocationDropdown(); + }; + + const handleTrackCurrentLocation = () => { + if (navigator.geolocation) { + setCurrentLocation("Detecting location..."); + navigator.geolocation.getCurrentPosition( + async (position) => { + const { latitude, longitude } = position.coords; + try { + const res = await fetch( + `https://nominatim.openstreetmap.org/reverse?lat=${latitude}&lon=${longitude}&format=json` + ); + const data = await res.json(); + if (data && data.display_name) { + const address = data.display_name; + setCurrentLocation(address); + localStorage.setItem("currentLocation", address); + } else { + const fallback = `${latitude.toFixed(4)}, ${longitude.toFixed(4)}`; + setCurrentLocation(fallback); + localStorage.setItem("currentLocation", fallback); + } + } catch (err) { + console.error("Reverse geocoding error:", err); + const fallback = `Lat: ${latitude.toFixed(2)}, Lon: ${longitude.toFixed(2)}`; + setCurrentLocation(fallback); + localStorage.setItem("currentLocation", fallback); + } + if (locationDropdown) { + toggleLocationDropdown(); + } + }, + (error) => { + console.error("Geolocation error:", error); + alert("Location permission denied. Please allow location access in your browser."); + setCurrentLocation(localStorage.getItem("currentLocation") || "Hosur,, PRPH+33F, Hamumanth..."); + } + ); + } else { + alert("Geolocation is not supported by your browser."); + } + }; + + const GotoHomepage = () => { + const items = [ + { + name: "Home", + link: `${subDirectory}app-page`, + }, + ]; + setLoading(true); + setTimeout(() => { + setLoading(false); + navigate(`${subDirectory}app-page`); + dispatch(changeBreadCrumb({ items: items })); + }, 500); + }; + + const toSignIn = () => { + setLoading(true); + setTimeout(() => { + setLoading(false); + navigate(`${subDirectory}app-page/signin`); + }, 500); + } + + const toMyProfile = () => { + const items = [ + { + name: "Home", + link: `${subDirectory}app-page`, + }, + { + name: "My Profile", + link: `${subDirectory}app-page/myprofile`, + }, + ]; + setLoading(true); + setTimeout(() => { + setLoading(false); + navigate(`${subDirectory}app-page/myprofile`); + dispatch(changeBreadCrumb({ items: items })); + }, 500); + }; + + const toFavOrder = () => { + const items = [ + { + name: "Home", + link: `${subDirectory}app-page`, + }, + { + name: "My Orders", + link: `${subDirectory}app-page/order`, + }, + ]; + setLoading(true); + setTimeout(() => { + setLoading(false); + navigate(`${subDirectory}app-page/order`); + dispatch(changeBreadCrumb({ items: items })); + }, 500); + }; + + const toFavShop = () => { + const items = [ + { + name: "Home", + link: `${subDirectory}app-page`, + }, + { + name: "Fav Shop", + link: `${subDirectory}app-page/favshop`, + }, + ]; + setLoading(true); + setTimeout(() => { + setLoading(false); + navigate(`${subDirectory}app-page/favshop`); + dispatch(changeBreadCrumb({ items: items })); + }, 500); + }; + + const toFavList = () => { + const items = [ + { + name: "Home", + link: `${subDirectory}app-page`, + }, + { + name: "Favourite List", + link: `${subDirectory}app-page/favlist`, + }, + ]; + setLoading(true); + setTimeout(() => { + setLoading(false); + navigate(`${subDirectory}app-page/favlist`); + dispatch(changeBreadCrumb({ items: items })); + }, 500); + }; + + const toStore = () => { + const items = [ + { + name: "Home", + link: `${subDirectory}app-page`, + }, + { + name: "Stores", + link: `${subDirectory}app-page/Stores`, + }, + ]; + setLoading(true); + setTimeout(() => { + setLoading(false); + navigate(`${subDirectory}app-page/Stores`); + dispatch(changeBreadCrumb({ items: items })); + }, 500); + }; + + const navigatetoCart = () => { + const items = [ + { + name: "Home", + link: `${subDirectory}app-page`, + }, + { + name: "Cart", + link: `${subDirectory}app-page/cart`, + }, + ]; + setLoading(true); + setTimeout(() => { + setLoading(false); + navigate(`${subDirectory}app-page/cart`); + dispatch(changeBreadCrumb({ items: items })); + }, 500); + }; + + useEffect(() => { + if (Searchquery.length > 0) { + setShowLocationList(true) + } + else if (Searchquery.length == 0) { + setShowLocationList(false) + } + }, [Searchquery]) + + useEffect(() => { + const handleClickOutside = (event) => { + if (ref.current && !ref.current.contains(event.target)) { + setProfile(false); + } + }; + + document.addEventListener("mousedown", handleClickOutside); + return () => { + document.removeEventListener("mousedown", handleClickOutside); + }; + }, []); + + const handleLoginClick = () => { + setProfile(!profile); + }; + + const toggleCollapse = () => { + setIsCollapsed(!isCollapsed); + }; + + const toggleCollapsebook = () => { + setIsCollapsedbook(!isCollapsedbook); + }; + + const toggleHamburger = () => { + setSidedrawer(!sidedrawer); + }; + + const handleInputClick = () => { + setShowLocationList((prevShowLocationList) => !prevShowLocationList); + }; + + const handleSubmitLocation = (e) => { + e.preventDefault(); + + if (!Searchquery.trim()) return; + + let items = JSON.parse(localStorage.getItem('Locationdata')) || []; + + const isDuplicate = items.some(item => item.ShopLocation.toLowerCase() === Searchquery.trim().toLowerCase()); + + if (!isDuplicate) { + items.push({ ShopLocation: Searchquery.trim() }); + localStorage.setItem('Locationdata', JSON.stringify(items)); + } + + setLocationdata(items); + setSearchquery(''); + setShowLocationList(false); + }; + + useEffect(() => { + let items = JSON.parse(localStorage.getItem('Locationdata')) || []; + setLocationdata(items); + }, []); + + const deleteRecentSearch = (locationToDelete) => { + let items = JSON.parse(localStorage.getItem('Locationdata')) || []; + const updatedItems = items.filter(item => item.ShopLocation !== locationToDelete); + localStorage.setItem('Locationdata', JSON.stringify(updatedItems)); + setLocationdata(updatedItems); + }; + + const handleChange = (e) => { + setSearchquery(e.target.value); + }; + + const toggleLocationDropdown = () => { + if (locationDropdown) { + setDropdownClosing(true); + setTimeout(() => { + setLocationDropdown(false); + setDropdownClosing(false); + }, 300); + } else { + setLocationDropdown(true); + } + }; + + useEffect(() => { + const handleClickOutside = (event) => { + if (dropdownRef.current && !dropdownRef.current.contains(event.target)) { + setDropdownClosing(true); + setTimeout(() => { + setLocationDropdown(false); + setDropdownClosing(false); + }, 300); + } + }; + + if (locationDropdown) { + document.addEventListener("mousedown", handleClickOutside); + } else { + document.removeEventListener("mousedown", handleClickOutside); + } + + return () => { + document.removeEventListener("mousedown", handleClickOutside); + }; + }, [locationDropdown]); + + const handlerSearchFuntion = () => { + if (!Searchquery.trim()) return; + + let items = JSON.parse(localStorage.getItem('Locationdata')) || []; + + const isDuplicate = items.some(item => item.ShopLocation.toLowerCase() === Searchquery.trim().toLowerCase()); + + if (!isDuplicate) { + items.push({ ShopLocation: Searchquery.trim() }); + localStorage.setItem('Locationdata', JSON.stringify(items)); + } + + setLocationdata(items); + setSearchquery(''); + setShowLocationList(false); + } + + const StoreLocation = [ + { ShopLocationName: "Pochampalli" }, + { ShopLocationName: "Hosur" }, + { ShopLocationName: "Mathur" }, + { ShopLocationName: "Dharmapuri" }, + { ShopLocationName: "Coimbatore" }, + { ShopLocationName: "Salem" }, + { ShopLocationName: "Chennai" }, + { ShopLocationName: "Namakkal" } + ]; + + const ShopLocationLists = [ + { location: "Hosur" }, + { location: "Pochampalli" }, + { location: "Mathur" }, + { location: "Dharmapuri" }, + { location: "Coimbatore" }, + { location: "Salem" }, + { location: "Chennai" }, + { location: "Namakkal" } + ]; + + const filteredData2 = Array.isArray(ShopLocationLists) + ? ShopLocationLists?.filter((item) => item?.location?.toLowerCase()?.includes(Searchquery?.toLowerCase())) + : []; + + return ( +

+ {loading && } + +

+ + pozologo

+ + {/* Collapse Menu code area */} + {!sidedrawer && ( +

+ {/* Header */} +

+ +

Hello, Guest

+ +

+ Categories + {isCollapsed ? : } +

+ {["Restaurant", "Electrical, Electronic & Computers", "Bakery", "Groceries", "Lifestyle & Fashion", "Medicines & Pharma equips", "Dairy Delights"].map((cat, idx) => ( +

{cat}

+ ))} +

+ +

+ + {/* Booking */} +

+ Booking + {isCollapsedbook ? : } +

+ {["Restaurant", "Electrical, Electronic & Computers"].map((cat, idx) => ( +

{cat}

+ ))} +

+ +

+ + {/* Quick Links */} +

Stores

Favourite List

Track My Order

+ +

+ + {/* Login Button */} +

+ )} + + {PageName != "checkout" &&

+ +

+ Location +

+ {currentLocation} +

+ + {locationDropdown && ( +

+ +

Select Delivery location + +

+ + {/* SEARCH INPUT FOR LOCATION */} +

+ + {/* location list in search bar */} + {showLocationList && ( +

+ {filteredData2.length > 0 ? filteredData2.map((item, idx) => + ( +

selectLocation(item?.location)}> + {item?.location} +

+ )) + :

Location Not Found

} +

+ )} + + + {/* DETECT CURRENT LOCATION */} +

+ + Track Current Location + +

Using ( GPS )

+ + + {/* STORE LOCATION CODE AREA */} +

# Store Location

+ +

+ + +

+ {StoreLocation.map((e, idx) => { + return ( +

selectLocation(e?.ShopLocationName)}> + +

+ {e?.ShopLocationName} +

+ ) + })} +

+ + {/* RECENT LOCATION CODE HERE */} +

+ Recent Search

+ {(Locationdata?.map((e, idx) => ( +

selectLocation(e?.ShopLocation)}> +

+ {e?.ShopLocation} + { + event.stopPropagation(); + deleteRecentSearch(e?.ShopLocation); + }}> ⨉

+ )))} + +

+ +

+ )} +

+ +

} + +

+ +

{ setProfile(true) }}> + Login + +

+ + {profile && ( +

+ New customer? + Sign Up +

+ + My Profile +

+ + My Orders +

+ + Fav Shop +

+ + Fav List +

+ + Stores +

+ )} +

+ ); +}; + +export default PozoPublicNavbar; diff --git a/src/Components/PozoPublicNavbar/PozoPublicSearch/PozoPublicSearch.jsx b/src/Components/PozoPublicNavbar/PozoPublicSearch/PozoPublicSearch.jsx new file mode 100644 index 0000000..901161a --- /dev/null +++ b/src/Components/PozoPublicNavbar/PozoPublicSearch/PozoPublicSearch.jsx @@ -0,0 +1,222 @@ +import React, { useState, useEffect, useRef } from "react"; +import { useDispatch } from "react-redux"; +import { useNavigate } from "react-router-dom"; +import { CiSearch } from "react-icons/ci"; +import { IoIosTrendingUp } from "react-icons/io"; +import { changeSearchText } from "../../../Features/SearchBox/Search"; +import "../../../Styles/Components/PozoPublicSearch.scss"; +const subDirectory = import.meta.env.BASE_URL; + +const PozoPublicSearch = () => { + const navigateTo = useNavigate(); + const dispatch = useDispatch(); + const [dynamicPlaceholder, setDynamicPlaceholder] = useState(""); + const [animate, setAnimate] = useState(false); + const [inputValue, setInputValue] = useState(""); + const [isSearchCtnrVisible, setIsSearchCtnrVisible] = useState(false); + const [isAnimating, setIsAnimating] = useState(false); + const staticPlaceholder = "Search"; + const placeholders = [ + "Cake, Puff and more...", + "your favorite dessert...", + "delicious treats...", + ]; + const containerRef = useRef(null); + let currentIndex = 0; + + useEffect(() => { + const cyclePlaceholders = () => { + if (inputValue === "") { + setAnimate(true); // Trigger animation + setTimeout(() => { + setDynamicPlaceholder(placeholders[currentIndex]); + currentIndex = (currentIndex + 1) % placeholders.length; + setAnimate(false); // Reset animation + }, 1000); // Match this with the duration of the animation (1s) + } + }; + + cyclePlaceholders(); // Set initial placeholder + const interval = setInterval(cyclePlaceholders, 3000); // Change every 3 seconds + + dispatch(changeSearchText(inputValue)); + if (inputValue?.length > 0) { + setIsSearchCtnrVisible(false); + } + + return () => clearInterval(interval); + }, [inputValue]); + + useEffect(() => { + document.addEventListener("mousedown", handleClickOutside); + return () => { + document.removeEventListener("mousedown", handleClickOutside); + }; + }, []); + + const handleInputChange = (event) => { + setInputValue(event.target.value); + }; + + const handleInputClick = () => { + setIsSearchCtnrVisible(true); + }; + + const handleClickOutside = (event) => { + if (containerRef.current && !containerRef.current.contains(event.target)) { + setIsSearchCtnrVisible(false); + } + }; + + const clearInput = () => { + setInputValue(""); + }; + + const SearchBoxDataSearched = [ + { + category: "Sweets,Snaks & Baked Items", + link: "https://img.freepik.com/free-photo/chocolate-cake-with-chocolate-sprinkles_144627-8998.jpg?t=st=1720691493~exp=1720695093~hmac=47c6f6fa8b66e399767ee94a7829ed3f1f833806d19d6a1be3cc1242ecb20fcd&w=740", + }, + { + category: "Tiffen,Lunch & Dinner", + link: "https://img.freepik.com/free-photo/spaghetti-with-vegetablesbroccolitomatoespeppers-isolated-white-background_123827-21227.jpg?t=st=1720692563~exp=1720696163~hmac=aaa7a33104a5a8cb247738e93e0e61e1a0bb6d05850644c2703f54230ff3c00c&w=740", + }, + { + category: "Samert TV's", + link: "https://img.freepik.com/premium-vector/realistic-curved-monitor-screen-isolated_92218-10.jpg?w=740", + }, + { + category: "Men, Women & Child Cloths", + link: "https://img.freepik.com/free-photo/blue-t-shirt_125540-727.jpg?t=st=1720692403~exp=1720696003~hmac=eb210324da3b78cb5562b5369f921eb21658f317be52c3360c5e98f03b8654ee&w=996", + }, + { + category: "Premium Soundbars", + link: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxISEBUTEBASEBAXEBIQFRUVFhUPFRUQFRUWFxUXFRUYHSggGBolGxUVITEhJykrLi4uFyAzODMtNygtLi0BCgoKBQUFDgUFDisZExkrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrK//AABEIAOEA4QMBIgACEQEDEQH/xAAcAAEAAQUBAQAAAAAAAAAAAAAABAEDBQYHAgj/xABAEAACAQIBCAYIAwYHAQAAAAAAAQIDEQQFBhIhMVGRoSIyQWFxgQcTIzNCUmKSosHRcnSCsbLCFCRDU2Oz0vD/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8A7iAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaZj/SJQhKUadGpVcZSg23GnFyi2nZ63tT7ANzBzHFekXES93SpU136VR8bpcjD4rOvG1OtiZxW6GjSt5xSfMDsk5pK8mkt7dkYvE5y4OGqWKpX3RkqjXio3scZr1pTd6k5Te+Tc3xZ4A7vgsbTrQ06VSNSGy8XfXue59xIOF5NylVw89OjUcJdttklulHY14nRM38+qVW0MTahV2aX+nJ+L6nnq7wNwATAAAAAAAAAAAAAAAAAAAAAAAAAAAAD5ny3iJ0cfi1HZ/jcTeL2Neunbwdraz6YPm3P+lo5Uxa/wCdy+5KX5gSsFjYVF0XZrbF7V+q7ySabCbi04tprY1qaM7k7K6laNS0ZbE9kZfo/wD7uAyoAAFSiRaqYqnHrTinuvd/atYGx5v51V8LaKfraP8AtyepL6JbYfy7jpWQs4qGKXs5aNS13TlqmvBfEu9HCamVoLqqUu9JRXPXyPGEyvP1tPQSg/WwV7uUleS1xatZ+QH0gAAAAAAAAAAAAAAAAAAAAAAAAAAB88elGno5XxPe6Ml50KX53Poc4L6YqdsqSfzUKMv6o/2gaOUZVlAJ2DytUhaOqcezSvdeD3EmplOo+2Mf2Y/+rmGfWXiS3IC7VrSl1pSkt0m5LyT2Fu54cijkB7uScl68RRX/AD0l+OJBcyXkSV8VQ/eaP/ZED6kB4cymmBcBb0xpgXAeFIqmB6BS5UAAAAAAAAAAAABS4FQeHI8SqgXbnD/TbTtlGnLseDp8VVrX/mjss65yv0w5MqVXTxEEpRp05Qml1lG+kpW7YrXfd4XsHLShTSKNgeKj1rxL7mRaz2HpzAvOZ5cyy5nlzAvOZOzfl/nMP+80f+yJitIn5vP/ADmH/eKP9cQPorG5y4ak2p14KSdnFPTknucY3afiYTF+kCmvdUZ1Hvk1TX5vkjimW8dUp5QxU4NpvF4htPWmvWytdduqxksNnDTlG8ozUu1K0l5NtagN/wAZnvi59Rwor6Y6Tt4zvySIOCznxVKpp+vnUb2xm3Ui1u0ezysaVWy9L4IJd8m5cla3Mg1so1Zbakkty6C5bfMD6Izbzhhi4ytFwqQ0dOD120r6LT7U9F7thm4zOV+hONqWJl2urTj9sZP+46dFgSlI9JkZSLkZAXrlTwpHpAVAAAAAACjYBstTqFKkyJVqAe6lYi1MQQMoZVpUve1YQe2zktLyjtZr2MzzoR6iqVX3LQjxlr5AbLWrsxeNjpppmpYzPKtL3cIU151JcXZcjBY3Kdep7ytOS3X0Y/arLkBGzrzXdNupQV43blGPNxX848NxqOkbtkvKEqTtbTpPrQ/OO6RYznzauvX4dXUoqdl8akr3W6Vuzt8doaTWnrXmVLVVdJeLXJl9QA8ixdUC/hsHOfUhKfgm+L7AIqiZPN2H+cw/7zR/riTaGa2JkrqEU9zlr5Jo23M/MpwnGriYv1kZ6UYxl0U1Zxb1K7v322AUzxzHWIlKvh2oV3rlF9So+/5ZatuzfvOf0clYhTdN4esqidnHQk3yVmu9aj6Fp0UXVBAcWydmHjaut040Y76krP7Y3fGxtWTPRfTVniK86j3QSpx4u7/kdBSIuKyvQpe8qwT3J6UvtjdgXMg5Ho4SnoYemoRb0nrcm5Wtdt63qSMqqppuLz0gtVKlKffJqC4K7fIwmLzoxVTZNU1ugtH8Tu+YHSq+NhBXqTjCO+TUVzMPi89cNDqudZ/QrL7pW5XObVKjk7yk5S3ybk+LCA23G5+15aqVOFJb37WXF2XJmEqZexUpqbxNXSTurScUv4V0eRgq+UqUNs03uj03y2eZjq+X/wDbp+c3/av1A65m/n9GVoYtKL2etiuj/HH4fFau5G9HzNkvE1a+KoU5TejPE0abiuirSqRTTttWvtPpkAAABbmy4yxWYFirIg1pkirIh1QOPekbFullPS1uMsPSclvs5xuu/okKONpNX9ZC37ST4bTcPSTm1LEwVair1qcX0fnpvW4r6ltXi12nJKbA2KtlektmlPwWiuMrPkQa2WJvqxjH8b56uRjoRbdopyluScnwRnMn5n42t1aDhH5qj9WuD6XIDEVsVOXWnJrdey+1ajrWb9HTwWHTV1/hqS4QSMFk/wBGL24jEfw01b8Uv0N+ydk2FGlGnBPQhFRV3d2W9gc2zqzLc36yirT1vZqm7Oye6XfxMfkTMytVV60Z0tdlHo6TXa29aR2P1S3FPUrcBpOT8yaMNbgm98um+epGwYfI1OPZcm4vHUaXvasIPc2tLyjtfAwuLzxox91CdV737KPPpcgM5SwqWxJF9uMVeTUY9rbUVxZoOKzsxM+o40o/TG7t3uV+SRiqtac3epOU5b5NzfPYB0HFZzYaGybqPdTWl+J2jzMPi88ZvVSpRgt8m5vgrJczVkilWrGKvKSiu9qN/C+0DIYvKter7yrNrcnoR+2NkyGkYyvlunHq6VR9y0VxevkY+vluo+rowXctJ8X+iA2OTSV20lvepLzINfK9KPxOb3RV+b1czW6tWUneUnJ723L+Z5hFydopyk9iScm/BIDLV8uzfUgo976b/JLmY7EYqc+vOUluvq+1auRnsl5jY6vZ+p9VH5qr0Pw65cjcsk+iukrPE1p1X8sPZR465PkBypbbLbuM/knM3HYi2hQlCL+Kr7JcH0n5I7VknNvDYf3NCEH8yV5Pxk9b4mZp0QNAzP8ARksPXp169f1lSnJTjCEdGGktl5S1ys9exbDpqPFONi4AAAFGWK5II+IAgVCzKJeqMsykBYnSTNdxeY+BqVXVnQvOT0pWlKMXLtbina7NlbI2LxlOmr1Kkaa+pqN/C+0CPgsk0KKtSpQpr6YqJK0UYHGZ3YeOqCnVfctCPGWvgmYPGZ315e7jCku5eslxlq5Ab02kr7FwMVjM48NT21VN7qftOa1LzZz/ABeLqVX7WpOp+020vBbEWLAbXjM9Xso0UvqqO/4I/wDoweMy7iavWrSS+WHs14dHW/NsgKJGrY2lHbNX3R6b5bPOwF5IqkYqtlr5Iec3/bH9SDWyhVltm0t0egrbnbb53A2CtXhDrzUXueuX2rXyIVbLUF1IuXe+gvLa3yMEi/hMLUqy0aVOdSW6EXN8gJFfK1WXxaC+jo/i28yDKTbu3dva3rfE3DJXo5xtWzqKGHj9T05fbH82jcsk+jHCws6zniJd70I/bHXxbA5BQoynLRhGU5fLFOT4I2fJXo/x1azlBUI76j12/YV3xsdpyfkilRjo0qUKcd0YqP8ALaT4UQOc5J9FuHjZ4ipOu9y9lDgtfM3PJmQqFBWo0YU19MUm/F7WZeNMuKAEaFEuxpl5QPSiBbUC5GB6SK2AIqAAAAAj4gkHE86ss1p4/FYarWm4wqvQhpNQ9VKMZRWitTaUkB0DKWXsNSbU60NJfDH2kvNRvbzNdxue0dlGjKXfN6K+1XvxRpiR60Hu1cAMpjM5MVU/1PVrdTXq/wAXW5mJm23dttva3rb8WUrTjFXnKMV2aTUb+F9vkQK+WaS6ulUfctBcZa1wYE8PUrvUu1vUl4t6kYCvlqo+qowXctJ+blq4JECrVlJ3nJye+TcnzA2GtlSlH4tN7oLS5uy4MgVstyfUgo976b8ti4pmKJ2TskYjEO1CjUqd6T0fOT1LiBHr4qc+vNyW7ZH7VqXAsm+ZK9GGInZ16kKK3R9rL8kuLNzyT6OsHSs5U3XlvqPTX2q0eQHGsDk+tWdqNKdV/TFyXm9iNsyV6NMXUs60oUI7veT4LVzOy4fAxglGEVGK2JJRS8kSY0QNEyT6NcHSs6iliJfW+j9kbLjc2/B5Np046NOnGnHdFKK4IyKpntQAjRol2NMvKB6UQLSge1AuWFgPKiVsegBSxUAAAAAAAAAAcJ9MeAnQyksRFWjWpwkpdnraaUJxf8Kp+N2d2Ndz3zfjjsLOjKyl16crX0KqT0ZeGtp9zYHCYZxdHVS19vSVv6b24EOvletL4tD9jov7neXMhV8POlUlTqxcKkJOEovapJ8/HtMtkvNjGYi3qsPPRfxSXq48ZbfIDESd3d629retvxZRs6Tkn0VTdnia+j9NNX/HL9DdMkZj4OhZxoRlJfFP2kvxal5AcUyZkHFYj3NCpNfNbRj90rI3DJXotrSs8RWjTXy01py+52S4M6/TwqWxF6NIDTskZgYKjZ+pVWXzVPaO/g+iuBtFHCKKSSSW5aiaqZ7UAI8aJcVMvKJVIC2oHpQPdioHlIrYqAKWKgAAAAAAAAAAAAAAAAADzKNz0AMfWyVSlLTlSpyn8zjFy4tXLiwyXYTClgI6pHpUy9YWA8KBVRPYApYWKgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP/Z", + }, + { + category: "Medical & Pharma Equipment", + link: "https://img.freepik.com/premium-photo/many-colored-pills-white_178193-216.jpg?w=740", + }, + ]; + + const SearchBoxDataBooking = [ + { + category: "Parking Lot's", + link: "https://as2.ftcdn.net/v2/jpg/05/46/25/95/1000_F_546259563_GKZ3MCyZwpSwXHqCVn1CkoWM5ZGtmoWc.jpg", + }, + { + category: "Boating", + link: "https://t3.ftcdn.net/jpg/08/65/04/86/240_F_865048620_vJ7vHsmLs80MZialWslhZphKOikTMQls.jpg", + }, + { + category: "Parlour", + link: "https://img.freepik.com/free-vector/bag-with-cosmetics-realistic-composition-with-isolated-image-open-vanity-case-with-brushes-lipstick-illustration_1284-57081.jpg?uid=R155407159&ga=GA1.1.1582138690.1720691313&semt=ais_user", + }, + ]; + + // console.log("GIIIII", isSearchCtnrVisible, isAnimating); + return ( +

+ +

+ + + {inputValue && ( + + ✕ + + )} + + {(isSearchCtnrVisible || isAnimating) && ( +

Most Searched And Bought

+ {SearchBoxDataSearched.map((item) => { + return ( +

{item.category}

{" "} +

+ ); + })} +

Booking

+ {SearchBoxDataBooking.map((item) => { + return ( +

{item.category}

{" "} +

+ ); + })} +

#Trending Searches

+ + BOAT Airdropes 141 +

+ + VU 43inch Smart Tv +

+ )} +

+ ); +}; + +export default PozoPublicSearch; diff --git a/src/Components/PublicPozoModal/PublicPozoModal.jsx b/src/Components/PublicPozoModal/PublicPozoModal.jsx new file mode 100644 index 0000000..fe3eb7f --- /dev/null +++ b/src/Components/PublicPozoModal/PublicPozoModal.jsx @@ -0,0 +1,78 @@ +import React, { useEffect, useRef } from 'react'; +import PropTypes from 'prop-types'; +import { AiOutlineClose } from "react-icons/ai"; +import './PublicPozoModal.scss'; + +const PublicPozoModal = ({ title, children, onClose, width, height, className, onClick, handleClick, style }) => { + const modalRef = useRef(null); + + // Handle click outside modal + useEffect(() => { + const handleClickOutside = (event) => { + if (modalRef.current && !modalRef.current.contains(event.target)) { + onClose(); + } + }; + + // Handle ESC key press + const handleEscKey = (event) => { + if (event.key === 'Escape') { + onClose(); + } + }; + + document.addEventListener('mousedown', handleClickOutside); + document.addEventListener('keydown', handleEscKey); + + return () => { + document.removeEventListener('mousedown', handleClickOutside); + document.removeEventListener('keydown', handleEscKey); + }; + }, [onClose]); + + return ( +

{title}

+ +

+ {children} +

+ {/* */} +

+ ); +}; + +PublicPozoModal.propTypes = { + title: PropTypes.string.isRequired, + children: PropTypes.node.isRequired, + onClose: PropTypes.func.isRequired, + width: PropTypes.string, + height: PropTypes.string, + className: PropTypes.string, + style: PropTypes.object, + onClick: PropTypes.func, + handleClick: PropTypes.func +}; + +PublicPozoModal.defaultProps = { + width: '80%', + height: '80%', + className: '', + onClick: () => { }, + handleClick: () => { }, + style: {}, +}; + +export default PublicPozoModal; diff --git a/src/Components/PublicPozoModal/PublicPozoModal.scss b/src/Components/PublicPozoModal/PublicPozoModal.scss new file mode 100644 index 0000000..e6d1962 --- /dev/null +++ b/src/Components/PublicPozoModal/PublicPozoModal.scss @@ -0,0 +1,102 @@ +.PublicPozoModal-Master { + display: flex; + align-items: center; + justify-content: center; + background-color: #00000070; + width: 100%; + height: 100%; + padding: 1rem 1rem; + position: fixed; + top: 0; + bottom: 0; + right: 0; + left: 0; + opacity: 0; + animation: fadeIn 0.3s forwards; + z-index: 1000; + backdrop-filter: blur(3px); + + &.fade-out { + animation: fadeOut 0.3s forwards; + /* Fade out on unmount */ + } + + .PublicPozoModalMain { + display: flex; + flex-direction: column; + background-color: #FFF; + padding: 1rem; + row-gap: 1rem; + border-radius: 8px; + transform: translateY(-20px); + /* Start slightly above */ + animation: slideIn 0.3s forwards; + /* Slide in on mount */ + + .headerModal { + display: flex; + align-items: center; + justify-content: space-between; + font-size: 14px; + + svg { + cursor: pointer; + font-size: 16px; + background-color: #f3f3f3; + padding: 1px; + } + } + + .contentModal { + flex: 1; + font-size: 14px; + } + + .modal-footer { + display: flex; + justify-content: flex-end; + padding-top: 10px; + } + + .modal-action-button { + background: #007bff; + color: #fff; + border: none; + border-radius: 4px; + padding: 10px 20px; + cursor: pointer; + } + } +} + +@keyframes fadeIn { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} + +@keyframes fadeOut { + from { + opacity: 1; + + + } + + to { + opacity: 0; + } +} + +@keyframes slideIn { + from { + transform: translateY(-20px); + } + + to { + transform: translateY(0); + } +} \ No newline at end of file diff --git a/src/Components/SAdmin/SadminPanel/AdminNavbar/AdminNavbar.jsx b/src/Components/SAdmin/SadminPanel/AdminNavbar/AdminNavbar.jsx new file mode 100644 index 0000000..ac1a5f4 --- /dev/null +++ b/src/Components/SAdmin/SadminPanel/AdminNavbar/AdminNavbar.jsx @@ -0,0 +1,399 @@ +import { useEffect, useState } from "react"; +import Logo from "./../../../../Images/PozoWhite.svg"; +import "./AdminNavbar.scss"; +import { IoIosMore } from "react-icons/io"; +import { IoIosArrowDown } from "react-icons/io"; +import { PiReceipt, PiUsersThreeLight } from "react-icons/pi"; +import { FiMenu } from "react-icons/fi"; +import { IoNotificationsOutline, IoSettingsOutline } from "react-icons/io5"; +import { RxDashboard } from "react-icons/rx"; +import { RiPlayListAddFill } from "react-icons/ri"; +import { BsBarChartLine } from "react-icons/bs"; +import { AiOutlineSetting } from "react-icons/ai"; +import { MdOutlineLiveHelp, MdOutlineQueryStats } from "react-icons/md"; +import { useNavigate } from "react-router-dom"; +import FullPageLoader from "../../../Loader/PozoPublicLoader"; +import { HiOutlineSpeakerphone } from "react-icons/hi"; + +const AdminNavbar = () => { + const [dropdownData, setDropdownData] = useState({ + dashboard: [], + orders: [], + products: [], + users: [], + reports: [], + settings: [], + queries: [], + customercare: [], + }); + const [sideNav, setsideNav] = useState(true); + const [windowWidth, setWindowWidth] = useState(window.innerWidth); + useEffect(() => { + if (windowWidth > 768) { + setsideNav(true); + } else if (windowWidth <= 768) { + setsideNav(false); + } + }, [windowWidth]); + + useEffect(() => { + const handleResize = () => { + setWindowWidth(window.innerWidth); + }; + + window.addEventListener("resize", handleResize); + + // Cleanup listener on unmount + return () => window.removeEventListener("resize", handleResize); + }, []); + + useEffect(() => { + // Mock API data for each dropdown + const fetchData = async () => { + const data = { + dashboard: ["Overview", "Statistics", "Performance"], + orders: ["Received Orders","Pending Orders", "Completed Orders", "Cancelled Orders"], + products: ["Add Product", "My Product", "Product Categories", "Product Reviews", "Inventory Management"], + users: ["SAdmin Dashboard","Active Users", "Inactive Users", "New Users"], + adsmanagement: ["Ads Management","Add New Ads" ], + reports: ["Sales Report", "User Report", "Revenue Report", "Payment Report"], + settings: ["Account Settings", "Notifications", "Privacy"], + queries: [ "Open Queries", "Resolved Queries", "Pending Queries", "All Queries"], + customercare: ["Phone", "Request Quries"], + SAdmin_Dashboard: ["Phone", "Request Quries"], + }; + setDropdownData(data); + }; + fetchData(); + }, []); + + const navigate = useNavigate(); + const [loading, setLoading] = useState(false); + + const PageNavigate = () => { + setLoading(true); + + setTimeout(() => { + setLoading(false); + navigate(`/admin-page/setting`); + }, 700); + }; + const PageNavigatetoproduct = () => { + setLoading(true); + + setTimeout(() => { + setLoading(false); + navigate(`/admin-page/product`); + }, 700); + }; + + + const PageNavigatetoAdsManagement = () => { + setLoading(true); + + setTimeout(() => { + setLoading(false); + navigate(`/admin-page/adsmanagement`); + }, 700); + }; + + + const NavigatetoDashboard = () => { + setLoading(true); + + setTimeout(() => { + setLoading(false); + navigate(`/admin-page/dashboard`); + }, 700); + }; + const NavigatetoMyProduct = () => { + setLoading(true); + + setTimeout(() => { + setLoading(false); + navigate(`/admin-page/myproduct`); + }, 700); + }; + + const NavigatetoOrders = () => { + setLoading(true); + + setLoading(false); + setTimeout(() => { + navigate(`/admin-page/orders`); + }, 700); + }; + + const NavigatetoSadminUsers = () => { + setLoading(true); + + setLoading(false); + setTimeout(() => { + navigate(`/admin-page/SadminUsers`); + }, 700); + }; + const NavigatetoSadminDashboard = () => { + setLoading(true); + + setLoading(false); + setTimeout(() => { + navigate(`/admin-page/sadmindashboard`); + }, 700); + }; + + const NavigatetoReports = () => { + setLoading(true); + + setLoading(false); + setTimeout(() => { + navigate(`/admin-page/sadminreport`); + }, 700); + }; + const NavigatetoSalesReports = () => { + setLoading(true); + + setLoading(false); + setTimeout(() => { + navigate(`/admin-page/salesreport`); + }, 700); + }; + const NavigatetoPaymentReports = () => { + setLoading(true); + + setLoading(false); + setTimeout(() => { + navigate(`/admin-page/paymentreport`); + }, 700); + }; + + const NavigatetoQueries = () => { + setLoading(true); + + setTimeout(() => { + setLoading(false); + navigate(`/admin-page/querymanagement`); + }, 1000); + }; + + + const NavigatetoContact = () => { + setLoading(true); + + setTimeout(() => { + setLoading(false); + navigate(`/admin-page/querycontact`); + }, 1000); + }; + + const NavigatetoQueryRequest = () => { + setLoading(true); + + setTimeout(() => { + setLoading(false); + navigate(`/admin-page/qryrqst`); + }, 1000); + }; + + + return ( + <> + {loading && } +

+ setsideNav(!sideNav)} + /> + +

+ +

Sri Krishna Silks & Readymades

+ Palacode, Tamilnadu, India +

+ +

+ + {sideNav && ( +

+ {/* Dashboard Dropdown */} +

+ Dashboard + +

+ {dropdownData.dashboard.map((option, index) => ( +

+ {option} +

+ ))} +

+ + {/* Orders Dropdown */} +

+ Orders +

+ {dropdownData.orders.map((option, index) => ( +

+ {option} +

+ ))} +

+ + {/* Product Dropdown */} +

+ {" "} + Products{" "} + +

+ {dropdownData.products.map((option, index) => ( +

+ {option} +

+ ))} +

+ {/* Users Dropdown */} +

+ {" "} + User Mangement{" "} + +

+ {dropdownData.users.map((option, index) => ( +

+ {option} +

+ ))} +

+ + {/* Reports Dropdown */} +

+ {" "} + Reports{" "} + +

+ {dropdownData.reports.map((option, index) => ( +

+ {option} +

+ ))} +

+ + {/* ads Dropdown */} +

+ Ads Management + +

+ {dropdownData?.adsmanagement?.map((option, index) => ( +

+ {option} +

+ ))} +

+ + {/* Settings Dropdown */} +

+ Settings + +

+ {dropdownData.settings.map((option, index) => ( +

+ {option} +

+ ))} +

+ + {/* Query Dropdown */} +

+ Queries + +

+ {dropdownData.queries.map((option, index) => ( +

+ {option} +

+ ))} +

+ + {/* CustomerCare Dropdown */} +

+ Customer Care + +

+ {dropdownData.customercare.map((option, index) => ( +

+ {option} +

+ ))} +

+ + +

+ )} +

+ + ); +}; + +export default AdminNavbar; diff --git a/src/Components/SAdmin/SadminPanel/AdminNavbar/AdminNavbar.scss b/src/Components/SAdmin/SadminPanel/AdminNavbar/AdminNavbar.scss new file mode 100644 index 0000000..8ddb796 --- /dev/null +++ b/src/Components/SAdmin/SadminPanel/AdminNavbar/AdminNavbar.scss @@ -0,0 +1,150 @@ +.AdminNavBarMaster { + .Navoptinfos { + height: 45px; + width: 100%; + background-color: #23282d; + color: #fff; + display: flex; + align-items: center; + padding: 0 1rem; + } + + .NavOptions { + display: block !important; + } + .NavContent { + display: flex; + justify-content: space-between; + width: 100%; + align-items: center; + font-family: "Gilroy"; + + .hamMenu { + display: none; + cursor: pointer; + } + } + .NavLogowName { + display: flex; + align-items: center; + gap: 0.5rem; + + div { + display: flex; + flex-direction: column; + p { + font-size: clamp(10px, 2.5vw, 12px); + font-weight: 500; + } + a { + font-size: clamp(7px, 2.5vw, 9px); + font-family: "gilroy"; + font-weight: 100 !important; + } + } + } + + .Navmoreinfo { + display: flex; + font-size: clamp(17px, 2.5vw, 18px); + gap: 0.7rem; + div { + cursor: pointer; + } + } + + .NavOptions { + width: 100%; + height: 30px; + background-color: #3e4750; + color: #fff; + display: flex; + align-items: center; + } + + .navDrpdwn { + display: flex; + gap: 0.2rem; + font-family: "Gilroy"; + position: relative; + align-items: center; + } + + .noption { + position: relative; + font-size: 11px; + padding: 5px; + display: flex; + flex-direction: column; + gap: 0.5rem; + align-items: flex-start; + cursor: pointer; + + div { + display: flex; + align-items: center; + gap: 0.3rem; + } + + .dropdown-content { + display: none; + position: absolute; + top: 100%; + left: 0; + background-color: #f9f9f9; + padding: 0.5rem 0; + min-width: 160px; + box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2); + z-index: 1; + opacity: 0; + transition: + opacity 0.3s ease-in-out, + transform 0.3s ease-in-out; + transform: translateY(-10px); + } + + .dropdown-option { + padding: 8px 16px; + text-align: left; + cursor: pointer; + font-size: 12px; + color: #000; + } + + .dropdown-option:hover { + background-color: #e3333313; + color: #e33333; + font-weight: 600; + } + + &:hover .dropdown-content { + display: block; + opacity: 1; + transform: translateY(0); + } + } +} + +@media (max-width: 768px) { + .hamMenu { + display: block !important; + font-size: 25px; + } + .NavOptions { + position: absolute; + + display: block !important; + background-color: #3e4750 !important; + height: 100vh !important; + z-index: 12; + width: 12rem !important; + padding: 1rem 0.7rem; + .navDrpdwn { + flex-direction: column; + align-items: flex-start; + } + .dropdown-content { + position: relative !important; + } + } +} diff --git a/src/Components/SAdmin/SadminPanel/SadminPanel.jsx b/src/Components/SAdmin/SadminPanel/SadminPanel.jsx new file mode 100644 index 0000000..6eb92bd --- /dev/null +++ b/src/Components/SAdmin/SadminPanel/SadminPanel.jsx @@ -0,0 +1,483 @@ +import React, { useState } from 'react' +import { CiGlobe } from "react-icons/ci"; +import { IoChevronDown } from "react-icons/io5"; +import "./SadminPanel.scss" +import PozoPublicDropDown from '../../DropDown/PozoPublicDropDown'; +import PozoPublicDatePicker from '../../DatePicker/PozoPublicDatePicker'; +import { IoIosRefresh } from 'react-icons/io'; +import { RxDownload } from "react-icons/rx"; +import { HiOutlinePrinter } from "react-icons/hi2"; +import { useDispatch } from 'react-redux'; +import { changeglobalModuleTabColor } from '../../../Features/AdminPanel/AdminPanel'; + +const SadminPanel = () => { + const dispach= useDispatch() + const [selectedCountry, setSelectedCountry] = useState(''); + const [selectedYear, setSelectedYear] = useState(''); + const [isYear, setIsYear] = useState(false); + const [isOpen, setIsOpen] = useState(false); + + const [activeTab, setActiveTab] = useState('All Categories'); + + const [selectedMonthYear, setSelectedMonthYear] = useState(''); + const [selectedMYear, setSelectedMYear] = useState(''); + const [isMonthYear, setIsMonthYear] = useState(false); + + + const tabs = ['All Categories', 'Grocery', 'Food Delivery', 'Meat', 'Book']; + + const tabColors = { + 'All Categories': { + // background: '#FFD700', + background: '#EFF7FD', + color: '#000000', + activeBackground: '#60B0E9', + activeColor: '#fff', + tabBgColor:"#C2D9EA" + + }, + 'Grocery': { + // background: '#32CD32', + background: '#f8fff3', + color: '#000', + activeBackground: '#3D9315', + activeColor: '#FFFFFF', + tabBgColor:"#BDE2AC" + + }, + 'Food Delivery': { + // background: '#FA5353', + background: '#FFEFEF', + color: '#000', + activeBackground: '#F06565', + activeColor: '#FFFFFF', + tabBgColor:"#FFD6D6" + + }, + // 'Food Delivery': { + // background: '#FA5353', + // background: '#f1f1ff', + // color: '#000', + // activeBackground: '#978FF4', + // activeColor: '#FFFFFF', + // tabBgColor:"#C8C4ED" + + // }, + 'Meat': { + // background: '#B7532E', + background: '#fff5f3', + color: '#000', + activeBackground: '#CF7213', + activeColor: '#FFFFFF', + tabBgColor:"#EAD6C2" + + }, + 'Book': { + // background: '#A486FF', + background: '#F7F1F3', + color: '#000', + activeBackground: '#AC7882', + activeColor: '#FFFFFF', + tabBgColor:"#F4CBD9" + }, + +}; + + + const countries = [ + { name: 'UAE', flag: 'https://uxwing.com/wp-content/themes/uxwing/download/flags-landmarks/united-arab-emirates-flag-icon.png', fullName: 'United Arab Emirates' }, + { name: 'India', flag: 'https://uxwing.com/wp-content/themes/uxwing/download/flags-landmarks/india-flag-icon.png', fullName: 'Republic of India' }, + { name: 'UK', flag: 'https://uxwing.com/wp-content/themes/uxwing/download/flags-landmarks/united-kingdom-flag-icon.png', fullName: 'United Kingdom' }, + { name: 'USA', flag: 'https://uxwing.com/wp-content/themes/uxwing/download/flags-landmarks/united-states-flag-icon.png', fullName: 'United States of America' }, + + ]; + + const handleSelect = (country) => { + setSelectedCountry(country); + setIsOpen(false); + }; + + const [isHovered, setIsHovered] = useState(false); + + const selectedFlag = countries.find(c => c.name === selectedCountry)?.flag; + + + + + // Define a range of years + const startYear = 2000; + const endYear = new Date().getFullYear(); + const years = Array.from({ length: endYear - startYear + 1 }, (v, i) => startYear + i); + + const handleSelectYr = (year) => { + setSelectedYear(year); + setIsYear(false); + }; + + + + // Define month names + const months = [ + 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', + 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' + ]; + + const handleSelectMonthYear = (month, year) => { + setSelectedMonthYear(`${month}, ${year}`); + setIsMonthYear(false); + }; + + const handleSelectYear = (year) => { + setSelectedMYear(year); // Set the selected year + }; + +const categoryClick = async(tab,color,background,activeBackground,tabBgColor)=>{ + setActiveTab(tab) + + let data = { + categorry:tab, + color:color, + background: background, + activeBackground:activeBackground, + tabBgColor:tabBgColor, + } + await dispach(changeglobalModuleTabColor(data)) + console.log(data,"checkdata") +} + + + + return ( + +

+ + +

+ +

setIsOpen(!isOpen)} + onMouseEnter={() => setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)} + style={{ + border: '1px solid #ccc', + padding: '5px', + cursor: 'pointer', + height: "2rem ", + display: 'flex', + alignItems: 'center', + position: 'relative', + borderRadius: "6px" + }} + > + {selectedFlag ? ( + <> + {`${selectedCountry}

+ {/* {selectedCountry} */} + + ) + : ( + Country + )} + +

+ + {/* Tooltip for selected country with full name */} + {isHovered && selectedCountry && ( +

+ {countries.find(c => c.name === selectedCountry)?.fullName} +

+ )} + + {isOpen && ( +

+ {countries.map((country) => ( +

handleSelect(country.name)} + style={{ + padding: '10px', + display: 'flex', + alignItems: 'center', + cursor: 'pointer' + }} + > +

+ {country.name} +

+ ))} +

+ )} +

+ +

+ + +

setIsYear(!isYear)} + style={{ + padding: '5px', + cursor: 'pointer', + display: 'flex', + fontSize: "11.5px", + alignItems: 'center', + position: 'relative', + borderRadius: "6px", + }} + > + {selectedYear ? ( + {selectedYear} + ) : ( + Year + )} + +

+ + {isYear && ( +

+ {years.map((year) => ( +

handleSelectYr(year)} + style={{ + padding: '10px', + cursor: 'pointer' + }} + > + {year} +

+ ))} +

+ )} +

+ +

setIsMonthYear(!isMonthYear)} + style={{ + // border: '1px solid #ccc', + padding: '10px', + cursor: 'pointer', + display: 'flex', + alignItems: 'center', + position: 'relative', + borderRadius: "6px", + textWrap: "nowrap", + }} + > + + {selectedMonthYear || 'Month'} + + +

+ + {/* Dropdown showing the year and then the corresponding months */} + {isMonthYear && ( +

+ {/* Year Section on the left */} +

+ {years.map((year) => ( +

setSelectedMYear(year)} + style={{ + padding: '5px', + cursor: 'pointer', + zIndex: '2', + backgroundColor: year === selectedMYear ? '#f0f0f0' : 'transparent' // Highlight selected year + }} + > + {year} +

+ ))} +

+ + {/* Month Section on the right (shown only after selecting a year) */} + {selectedMYear && ( +

+ {months.map((month) => ( +

handleSelectMonthYear(month, selectedMYear)} + style={{ padding: '5px', cursor: 'pointer' }} + > + {month} +

+ ))} +

+ )} +

+ + +

+ +

+ + + +

+ +

+ {/* Tab Switch Section */} +

+ {tabs.map((tab) => ( +

categoryClick(tab,tabColors[tab].activeBackground ,tabColors[tab].background,tabColors[tab].tabBgColor) } + style={{ + padding: '5px 10px ', + fontSize: "12px", + textTransform: "uppercase", + // borderBottom: activeTab === tab ? '2px solid #000' : 'none', + borderRadius:'3px', + backgroundColor: activeTab === tab ? tabColors[tab].activeBackground : tabColors[tab].background, + color: activeTab === tab ? tabColors[tab].activeColor : tabColors[tab].color, + // color:"#000", + + // color: activeTab === tab ? '#000' : '#A6A6A6', + fontWeight: activeTab === tab ? '600' :"600", + }} + > + {tab} +

+ ))} +

+ +

REFRESH

DOWNLOAD

+ +

+ + + +

+ +

+ ) +} + +export default SadminPanel \ No newline at end of file diff --git a/src/Components/SAdmin/SadminPanel/SadminPanel.scss b/src/Components/SAdmin/SadminPanel/SadminPanel.scss new file mode 100644 index 0000000..f60f98d --- /dev/null +++ b/src/Components/SAdmin/SadminPanel/SadminPanel.scss @@ -0,0 +1,145 @@ +.SadminPanelDiv{ + + display: flex; + flex-direction: column; + row-gap: 0.5rem; + padding: 0.5rem 0.2rem; + +.panelFilterhead{ + display: flex; + padding: 0rem 0.5rem; + column-gap: 1rem; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + + .pnlfltrlftPart{ + display: flex; + column-gap: 1rem; + align-items: center; + flex-wrap: wrap; + gap: 0.5rem; + } + + .Statre-drp-dwn{ + .PozoPublicDropDown-Master { + .PozoPublicDropDownMain{ + svg{ + font-size: 10px; + } + input{ + font-size: 11.5px; + } + } + .PozoPublicDropDownOption{ + font-size: 11.5px; + } + } + + + } + + + .rptCalnder{ + display: flex; + justify-content: space-between; + align-items: center; + + .yrdiv{ + color: #575757; + + :hover{ + color: rgb(0, 0, 0); + font-weight: 600; + } + } + + .YrMntdatepicker{ + .date-picker{ + width: unset !important; + } + .date-picker .pickermain{ + border: none !important; + width: min-content; + } + .calendar{ + left: unset; + right: 0px; + } + .date-picker input{ + width: 50px; + // min-width: 50px; + // max-width: max-content; + font-size: 11.6px; + color: #000; + } + } + } + +} + + + +.PanelTabSwitchHead { + // border-bottom: 1px solid #ccc; + display: flex; + flex-wrap: wrap; + row-gap: 0.5rem; + justify-content: space-between; + font-size: 10.5px; + padding-right: 1rem; + // background-color: #dddddde0; + // border-radius: 6px; + align-items: center; + .TabSwitch div { + font-size: 16px; + padding: 10px; + } + + .TabSwitch div:hover { + color: #007BFF; + } + + .Othractns{ + display:flex ; + font-weight: 600; + font-size:9.7px; + padding: 0 0.5rem; + column-gap: 0.7rem; + border-radius: 6px; + div{ + cursor: pointer; + display: flex; + align-items: center; + gap: 0.3rem ; + } + + div:hover{ + color: #007BFF; + } + } + } + + +} +@media (max-width: 768px) { +.PozoPublicSadminReportMaster .CommonFltrhd { + height: unset !important; +} +.SadminPanelDiv .PanelTabSwitchHead{ +text-wrap: nowrap; +} +.TabSwitch { + overflow: scroll; +} + +.Statre-drp-dwn{ + .PozoPublicDropDown-Master { + width: 5rem !important; + + .PozoPublicDropDownMain{ + width: 5rem !important; + } + } +} +} \ No newline at end of file diff --git a/src/Components/SearchInput/PozoPublicSearchInput.jsx b/src/Components/SearchInput/PozoPublicSearchInput.jsx new file mode 100644 index 0000000..50127da --- /dev/null +++ b/src/Components/SearchInput/PozoPublicSearchInput.jsx @@ -0,0 +1,45 @@ +import React, { useState } from 'react'; +import { FiSearch } from "react-icons/fi"; // Importing search icon from react-icons +import "../../Components/SearchInput/PozoPublicSearchInput.scss"; + +const PozoPublicSearchInput = ({ + label = "Search", + placeholder = "Search...", + value = "", + onChange, + width = "100%", + height = "auto", + searchIcon = , // Default search icon using React Icons + disabled = false, + className = "" +}) => { + const [inputValue, setInputValue] = useState(value); + + const handleInputChange = (e) => { + setInputValue(e.target.value); + if (onChange) onChange(e.target.value); // Call onChange from parent + }; + + return ( +

+ + {searchIcon} + + +

+ ); +} + +export default PozoPublicSearchInput; diff --git a/src/Components/SearchInput/PozoPublicSearchInput.scss b/src/Components/SearchInput/PozoPublicSearchInput.scss new file mode 100644 index 0000000..459cb07 --- /dev/null +++ b/src/Components/SearchInput/PozoPublicSearchInput.scss @@ -0,0 +1,46 @@ +.PozoPublicSearchInput { + display: flex; + align-items: center; + border: 1px solid #ccc; + border-radius: 6px; + transition: border-color 0.3s ease; + width: 100%; + height: auto; + padding: 10px; + + &:hover { + border-color: #0071e3; + } + + .PozoPublicSearchInput-main { + display: flex; + align-items: center; + width: 100%; + } + + .PozoPublicSearchInput-icon { + color: #818181; + margin-right: 8px; + font-size: 14px; + } + + .PozoPublicSearchInput-input { + flex: 1; + border: none; + outline: none; + font-family: var(--Pozo-Fontfamily); + font-size: 14px; + padding: 1px; + background: transparent; + letter-spacing: 0.7px; + + &::placeholder { + color: #818181; + font-size: 14px; + } + + &:focus { + outline: none; + } + } +} \ No newline at end of file diff --git a/src/Components/Toast/Toast.jsx b/src/Components/Toast/Toast.jsx new file mode 100644 index 0000000..6411d89 --- /dev/null +++ b/src/Components/Toast/Toast.jsx @@ -0,0 +1,44 @@ +import React, { useEffect, useState } from 'react'; +import { FaTimes } from 'react-icons/fa'; +import '../../Styles/Components/Toast.scss'; +import { IoCloseOutline } from 'react-icons/io5'; + +const Toast = ({ children, duration, isVisible, onClose, position = 'bottom-right' }) => { + const [timeLeft, setTimeLeft] = useState(duration / 1000); + + useEffect(() => { + if (isVisible) { + setTimeLeft(duration / 1000); + const timer = setInterval(() => { + setTimeLeft((prev) => prev - 1); + }, 1000); + const autoClose = setTimeout(onClose, duration); + + return () => { + clearInterval(timer); + clearTimeout(autoClose); + }; + } + }, [isVisible, duration, onClose]); + + const positionStyles = { + 'bottom-right': { bottom: '20px', right: '20px' }, + 'bottom-left': { bottom: '20px', left: '20px' }, + 'top-right': { top: '20px', right: '20px' }, + 'top-left': { top: '20px', left: '20px' }, + }; + + return ( + isVisible && ( +

+ {children} +

{timeLeft}s

+ +

+ ) + ); +}; + +export default Toast; \ No newline at end of file diff --git a/src/Components/Toast/ToastManager.jsx b/src/Components/Toast/ToastManager.jsx new file mode 100644 index 0000000..9f166c6 --- /dev/null +++ b/src/Components/Toast/ToastManager.jsx @@ -0,0 +1,39 @@ +import React, { useState, useEffect } from 'react'; +import Toast from './Toast'; // Adjust the import path accordingly + +const ToastManager = ({ messages, duration, interval, position }) => { + const [isToastVisible, setIsToastVisible] = useState(false); + const [currentMessage, setCurrentMessage] = useState(''); + + useEffect(() => { + let messageIndex = 0; + + const showNextToast = () => { + setCurrentMessage(messages[messageIndex]); + setIsToastVisible(true); + + setTimeout(() => { + setIsToastVisible(false); + }, duration); + + messageIndex = (messageIndex + 1) % messages.length; + }; + + const intervalId = setInterval(showNextToast, interval); + + return () => clearInterval(intervalId); + }, [messages, duration, interval]); + + return ( + setIsToastVisible(false)} + position={position} + > + {currentMessage} + + ); +}; + +export default ToastManager; diff --git a/src/Components/ToastMessage/ToastMessage.jsx b/src/Components/ToastMessage/ToastMessage.jsx new file mode 100644 index 0000000..66666a7 --- /dev/null +++ b/src/Components/ToastMessage/ToastMessage.jsx @@ -0,0 +1,44 @@ +import React, { useEffect } from 'react'; +import { FaCheck, FaExclamation, FaTimes } from "react-icons/fa"; +import PropTypes from 'prop-types'; +import "../ToastMessage/ToastMessage.scss"; + +const ToastMessage = ({ type, message, onClose }) => { + const renderIcon = () => { + switch (type) { + case 'success': + return

; + case 'warning': + return

; + case 'error': + return

; + default: + return null; + } + }; + + useEffect(() => { + const timer = setTimeout(() => { + if (onClose) onClose(); + }, 2800); + + return () => clearTimeout(timer); + }, [onClose]); + + return ( +

+ {renderIcon()} + {message} +

+ ); +}; + +ToastMessage.propTypes = { + type: PropTypes.oneOf(['success', 'warning', 'error']).isRequired, + message: PropTypes.string.isRequired, + onClose: PropTypes.func, +}; + +export default ToastMessage; diff --git a/src/Components/ToastMessage/ToastMessage.scss b/src/Components/ToastMessage/ToastMessage.scss new file mode 100644 index 0000000..d908409 --- /dev/null +++ b/src/Components/ToastMessage/ToastMessage.scss @@ -0,0 +1,83 @@ +.dynamic-island-wrapper { + position: fixed; + top: 16px; + left: 50%; + transform: translateX(-50%); + z-index: 999999; + pointer-events: none; +} + +.dynamic-island-pill { + pointer-events: auto; + display: inline-flex; + align-items: center; + gap: 9px; + padding: 7px 18px 7px 10px; + background: #000000; + color: #ffffff; + border-radius: 9999px; + box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.15); + font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; + animation: dynamicIslandExpand 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; + white-space: nowrap; + + .dynamic-island-badge { + width: 22px; + height: 22px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + + &.success { + background-color: #22c55e; + color: #ffffff; + } + + &.warning { + background-color: #f59e0b; + color: #ffffff; + } + + &.error { + background-color: #ef4444; + color: #ffffff; + } + } + + .dynamic-island-text { + font-size: 13px; + font-weight: 600; + color: #ffffff; + letter-spacing: -0.1px; + } +} + +@keyframes dynamicIslandExpand { + 0% { + opacity: 0; + transform: scaleX(0.4) scaleY(0.6); + } + 50% { + opacity: 1; + } + 100% { + opacity: 1; + transform: scaleX(1) scaleY(1); + } +} + +@media (max-width: 480px) { + .dynamic-island-wrapper { + top: 12px; + } + + .dynamic-island-pill { + padding: 8px 16px 8px 10px; + + .dynamic-island-text { + font-size: 12.5px; + } + } +} \ No newline at end of file diff --git a/src/Components/ToastMessage/oldtoastmesaage.jsx b/src/Components/ToastMessage/oldtoastmesaage.jsx new file mode 100644 index 0000000..51f1f66 --- /dev/null +++ b/src/Components/ToastMessage/oldtoastmesaage.jsx @@ -0,0 +1,46 @@ +// import React, { useState } from 'react'; +// import { IoMdThumbsUp } from 'react-icons/io'; +// import "../ToastMessage/ToastMessage.scss"; + +// const ToastMessage = () => { +// const [isToastMessageOpen, setIsToastMessageOpen] = useState(false); +// const [currentToast, setCurrentToast] = useState({ type: '', content: '' }); + +// const showToastMessage = (type, content) => { +// setCurrentToast({ type, content }); +// setIsToastMessageOpen(true); + +// setTimeout(() => { +// setIsToastMessageOpen(false); +// }, 3000); +// }; + +// const Toasttext = [ +// { type: "success", content: "Operation successful" }, +// { type: "error", content: "Operation failed" }, +// { type: "warning", content: "Check the operation" }, +// ]; + +// return ( +//

+//

+// +// {currentToast.content} +//

+//

+// {Toasttext.map((item, index) => ( +// +// ))} +//

+//

+// ); +// } + +// export default ToastMessage; diff --git a/src/Components/ToggleSwitch/ToggleSwitch.jsx b/src/Components/ToggleSwitch/ToggleSwitch.jsx new file mode 100644 index 0000000..5512ff9 --- /dev/null +++ b/src/Components/ToggleSwitch/ToggleSwitch.jsx @@ -0,0 +1,24 @@ +import React, { useState } from 'react'; +import './ToggleSwitch.scss'; // Ensure you have this SCSS file for styling + +const ToggleSwitch = () => { + // Initialize state to true for an active toggle switch + const [isActive, setIsActive] = useState(true); + + // Function to handle toggle switch change + const handleToggle = () => { + setIsActive((prev) => { + const newState = !prev; + // alert(newState ? 'The toggle is ON!' : 'The toggle is OFF!'); // Alert based on new state + return newState; + }); + }; + + return ( +

+ ); +}; + +export default ToggleSwitch; diff --git a/src/Components/ToggleSwitch/ToggleSwitch.scss b/src/Components/ToggleSwitch/ToggleSwitch.scss new file mode 100644 index 0000000..2c90ae8 --- /dev/null +++ b/src/Components/ToggleSwitch/ToggleSwitch.scss @@ -0,0 +1,40 @@ +.toggle-switch { + display: inline-flex; + align-items: center; + cursor: pointer; + position: relative; + width: 30px; + height: 14px; + border-radius: 12px; + transition: background-color 0.2s; + + // Off state background color (red) + &.off { + background-color: red; // Change to red when off + + .toggle-indicator { + background-color: white; + transform: translateX(2px); // Indicator position for OFF + } + } + + // On state background color (green) + &.on { + background-color: #4caf50; // On color (green) + + .toggle-indicator { + background-color: white; + transform: translateX(16px); // Indicator position for ON + } + } + + .toggle-indicator { + position: absolute; + top: 1px; + width: 12px; + height: 12px; + background-color: white; + border-radius: 50%; + transition: transform 0.2s; + } +} diff --git a/src/Components/Tooltip/PozoPublicTooltip.jsx b/src/Components/Tooltip/PozoPublicTooltip.jsx new file mode 100644 index 0000000..b799029 --- /dev/null +++ b/src/Components/Tooltip/PozoPublicTooltip.jsx @@ -0,0 +1,46 @@ +import React, { useState, useEffect } from 'react'; +import "../../Components/Tooltip/PozoPublicTooltip.scss"; + +const PozoPublicTooltip = ({ infoText, children }) => { + const [showTooltip, setShowTooltip] = useState(false); + const [hovered, setHovered] = useState(false); + + useEffect(() => { + let showTimeout; + let hideTimeout; + + if (hovered) { + showTimeout = setTimeout(() => { + setShowTooltip(true); + }, 100); + } else { + hideTimeout = setTimeout(() => { + setShowTooltip(false); + }, 100); + } + + return () => { + clearTimeout(showTimeout); + clearTimeout(hideTimeout); + }; + }, [hovered]); + + return ( +

setHovered(true)} + onMouseLeave={() => setHovered(false)} + > + {children} + + {/* Tooltip content */} +

+ {infoText} + {/* Arrow indicator */} +

+ ); +}; + +export default PozoPublicTooltip; diff --git a/src/Components/Tooltip/PozoPublicTooltip.scss b/src/Components/Tooltip/PozoPublicTooltip.scss new file mode 100644 index 0000000..fde7764 --- /dev/null +++ b/src/Components/Tooltip/PozoPublicTooltip.scss @@ -0,0 +1,73 @@ +.tooltip-container { + display: flex; + flex-direction: column; + gap: 0px; + align-items: center; + justify-content: center; + position: relative; + top: 20px; +} + +.tooltip { + max-width: 80vw; + font-size: 15px !important; + font-weight: 400; + background-color: rgba(0, 0, 0, 0.925); + text-align: center; + padding: 4px 16px; + border-radius: 6px; + border: 1px solid #d8e2e2; + position: absolute; + top: -51px; + transition: all 0.3s ease; + opacity: 0; + color: #fff; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); + z-index: 100; + left: -40px; + transform: scale(0.5); + will-change: transform, opacity; +} + +.tooltip.open { + transform: scale(1); + opacity: 1; +} + +.arrow { + width: 0; + height: 0; + border-left: 8px solid transparent; + border-right: 8px solid transparent; + border-top: 10px solid rgba(0, 0, 0, 0.925); + position: absolute; + bottom: -5px; + left: 50%; + transform: translateX(-50%); +} + +@media (max-width: 768px) { + .tooltip { + font-size: 10px; + padding: 4px 14px; + top: -50px; + } +} + +@media (max-width: 480px) { + .tooltip { + font-size: 9px; + padding: 6px 10px; + top: -55px; + } + + .arrow { + border-left: 7px solid transparent; + border-right: 7px solid transparent; + position: absolute; + bottom: -8px; + left: 50%; + transform: translateX(-50%); + } + +} \ No newline at end of file diff --git a/src/Features/AdminPanel/AdminPanel.js b/src/Features/AdminPanel/AdminPanel.js new file mode 100644 index 0000000..8f3205a --- /dev/null +++ b/src/Features/AdminPanel/AdminPanel.js @@ -0,0 +1,24 @@ +import { createSlice } from "@reduxjs/toolkit"; + +const AdminPanel = createSlice({ + name: "adminpanel", + initialState: { + ModuleTabColor: { + "categorry": "All Categories", + "color": "#60B0E9", + "background": "#EFF7FD", + "activeBackground": "#C2D9EA", + "tabBgColor":"#C2D9EA" +}, + }, + reducers: { + changeglobalModuleTabColor: (state, action) => { + state.ModuleTabColor=action.payload + }, + + }, +}); + +export const {changeglobalModuleTabColor} = AdminPanel.actions +export const GlobalModuleTabColor = (state)=>state?.AdminPanel?.ModuleTabColor +export default AdminPanel.reducer; diff --git a/src/Features/Cart/GlobalPublicBooking.js b/src/Features/Cart/GlobalPublicBooking.js new file mode 100644 index 0000000..b6851d9 --- /dev/null +++ b/src/Features/Cart/GlobalPublicBooking.js @@ -0,0 +1,26 @@ +import { createSlice } from "@reduxjs/toolkit"; + + + +const initialState = { cartShow: false, CartitemsCount: 1 }; + +const PublicBooking = createSlice({ + name: "PublicBooking", + initialState: initialState, + reducers: { + changeCartShow: (state, action) => { + state.cartShow = action.payload + }, + changecartCount: (state, action) => { + state.CartitemsCount = action.payload + } + } +}); + + + +export const { changeCartShow, changecartCount } = PublicBooking.actions; +export const globalchangeCartShow = (state) => state?.PublicBooking?.cartShow; +export const globalcartCount = (state) => state?.PublicBooking?.CartitemsCount; + +export default PublicBooking.reducer; \ No newline at end of file diff --git a/src/Features/LandingPage/landingPage.js b/src/Features/LandingPage/landingPage.js new file mode 100644 index 0000000..ca18375 --- /dev/null +++ b/src/Features/LandingPage/landingPage.js @@ -0,0 +1,31 @@ +import { createSlice } from "@reduxjs/toolkit"; + +const initialState = { + breadCrumb: [], + RedirectStatus: false, +}; + +const landingPage = createSlice({ + name: "centerPage", + initialState, + reducers: { + changeBreadCrumb: (state, action) => { + const { items } = action.payload; + state.breadCrumb = items; + }, + emptyBreadCrumb: (state, action) => { + state.breadCrumb = []; + }, + changeRedirectStatus: (state, action) => { + state.RedirectStatus = action.payload; + }, + }, +}); + +export const { changeBreadCrumb, changeRedirectStatus, emptyBreadCrumb } = + landingPage.actions; + +export const breadCrumbSelector = (state) => state?.landingPage?.breadCrumb; +export const GlobalRedirectStatus = (state) => + state?.landingPage?.RedirectStatus; +export default landingPage.reducer; diff --git a/src/Features/SearchBox/Search.js b/src/Features/SearchBox/Search.js new file mode 100644 index 0000000..ec5f2f2 --- /dev/null +++ b/src/Features/SearchBox/Search.js @@ -0,0 +1,20 @@ +import { createSlice } from "@reduxjs/toolkit"; + +let initialState = { SearchedText: null }; + +const Search = createSlice({ + name: "Search", + initialState, + reducers: { + changeSearchText: (state, action) => { + console.log("Global",action.payload) + state.SearchedText = action.payload; + }, + }, +}); + +export const { changeSearchText } = Search.actions; + +export const GlobalSearchText = (state) => state?.Search?.SearchedText; + +export default Search.reducer; diff --git a/src/Fonts/Gilroy/Gilroy-Black.woff b/src/Fonts/Gilroy/Gilroy-Black.woff new file mode 100644 index 0000000..d76b8e1 Binary files /dev/null and b/src/Fonts/Gilroy/Gilroy-Black.woff differ diff --git a/src/Fonts/Gilroy/Gilroy-Black.woff2 b/src/Fonts/Gilroy/Gilroy-Black.woff2 new file mode 100644 index 0000000..357c4a9 Binary files /dev/null and b/src/Fonts/Gilroy/Gilroy-Black.woff2 differ diff --git a/src/Fonts/Gilroy/Gilroy-BlackItalic.woff b/src/Fonts/Gilroy/Gilroy-BlackItalic.woff new file mode 100644 index 0000000..1238aef Binary files /dev/null and b/src/Fonts/Gilroy/Gilroy-BlackItalic.woff differ diff --git a/src/Fonts/Gilroy/Gilroy-BlackItalic.woff2 b/src/Fonts/Gilroy/Gilroy-BlackItalic.woff2 new file mode 100644 index 0000000..6b6e70c Binary files /dev/null and b/src/Fonts/Gilroy/Gilroy-BlackItalic.woff2 differ diff --git a/src/Fonts/Gilroy/Gilroy-Bold.woff b/src/Fonts/Gilroy/Gilroy-Bold.woff new file mode 100644 index 0000000..3cf2d5f Binary files /dev/null and b/src/Fonts/Gilroy/Gilroy-Bold.woff differ diff --git a/src/Fonts/Gilroy/Gilroy-Bold.woff2 b/src/Fonts/Gilroy/Gilroy-Bold.woff2 new file mode 100644 index 0000000..03776c6 Binary files /dev/null and b/src/Fonts/Gilroy/Gilroy-Bold.woff2 differ diff --git a/src/Fonts/Gilroy/Gilroy-BoldItalic.woff b/src/Fonts/Gilroy/Gilroy-BoldItalic.woff new file mode 100644 index 0000000..1590225 Binary files /dev/null and b/src/Fonts/Gilroy/Gilroy-BoldItalic.woff differ diff --git a/src/Fonts/Gilroy/Gilroy-BoldItalic.woff2 b/src/Fonts/Gilroy/Gilroy-BoldItalic.woff2 new file mode 100644 index 0000000..7a125e9 Binary files /dev/null and b/src/Fonts/Gilroy/Gilroy-BoldItalic.woff2 differ diff --git a/src/Fonts/Gilroy/Gilroy-ExtraBold.woff b/src/Fonts/Gilroy/Gilroy-ExtraBold.woff new file mode 100644 index 0000000..96b2b47 Binary files /dev/null and b/src/Fonts/Gilroy/Gilroy-ExtraBold.woff differ diff --git a/src/Fonts/Gilroy/Gilroy-ExtraBold.woff2 b/src/Fonts/Gilroy/Gilroy-ExtraBold.woff2 new file mode 100644 index 0000000..b13b60a Binary files /dev/null and b/src/Fonts/Gilroy/Gilroy-ExtraBold.woff2 differ diff --git a/src/Fonts/Gilroy/Gilroy-ExtraBoldItalic.woff b/src/Fonts/Gilroy/Gilroy-ExtraBoldItalic.woff new file mode 100644 index 0000000..aa158ea Binary files /dev/null and b/src/Fonts/Gilroy/Gilroy-ExtraBoldItalic.woff differ diff --git a/src/Fonts/Gilroy/Gilroy-ExtraBoldItalic.woff2 b/src/Fonts/Gilroy/Gilroy-ExtraBoldItalic.woff2 new file mode 100644 index 0000000..51a1772 Binary files /dev/null and b/src/Fonts/Gilroy/Gilroy-ExtraBoldItalic.woff2 differ diff --git a/src/Fonts/Gilroy/Gilroy-Heavy.woff b/src/Fonts/Gilroy/Gilroy-Heavy.woff new file mode 100644 index 0000000..9d9db16 Binary files /dev/null and b/src/Fonts/Gilroy/Gilroy-Heavy.woff differ diff --git a/src/Fonts/Gilroy/Gilroy-Heavy.woff2 b/src/Fonts/Gilroy/Gilroy-Heavy.woff2 new file mode 100644 index 0000000..9805de6 Binary files /dev/null and b/src/Fonts/Gilroy/Gilroy-Heavy.woff2 differ diff --git a/src/Fonts/Gilroy/Gilroy-HeavyItalic.woff b/src/Fonts/Gilroy/Gilroy-HeavyItalic.woff new file mode 100644 index 0000000..80f9143 Binary files /dev/null and b/src/Fonts/Gilroy/Gilroy-HeavyItalic.woff differ diff --git a/src/Fonts/Gilroy/Gilroy-HeavyItalic.woff2 b/src/Fonts/Gilroy/Gilroy-HeavyItalic.woff2 new file mode 100644 index 0000000..0c9672c Binary files /dev/null and b/src/Fonts/Gilroy/Gilroy-HeavyItalic.woff2 differ diff --git a/src/Fonts/Gilroy/Gilroy-Light.woff b/src/Fonts/Gilroy/Gilroy-Light.woff new file mode 100644 index 0000000..a5189cf Binary files /dev/null and b/src/Fonts/Gilroy/Gilroy-Light.woff differ diff --git a/src/Fonts/Gilroy/Gilroy-Light.woff2 b/src/Fonts/Gilroy/Gilroy-Light.woff2 new file mode 100644 index 0000000..bc5a5c1 Binary files /dev/null and b/src/Fonts/Gilroy/Gilroy-Light.woff2 differ diff --git a/src/Fonts/Gilroy/Gilroy-LightItalic.woff b/src/Fonts/Gilroy/Gilroy-LightItalic.woff new file mode 100644 index 0000000..e4748c0 Binary files /dev/null and b/src/Fonts/Gilroy/Gilroy-LightItalic.woff differ diff --git a/src/Fonts/Gilroy/Gilroy-LightItalic.woff2 b/src/Fonts/Gilroy/Gilroy-LightItalic.woff2 new file mode 100644 index 0000000..1bfa5f6 Binary files /dev/null and b/src/Fonts/Gilroy/Gilroy-LightItalic.woff2 differ diff --git a/src/Fonts/Gilroy/Gilroy-Medium.woff b/src/Fonts/Gilroy/Gilroy-Medium.woff new file mode 100644 index 0000000..987583a Binary files /dev/null and b/src/Fonts/Gilroy/Gilroy-Medium.woff differ diff --git a/src/Fonts/Gilroy/Gilroy-Medium.woff2 b/src/Fonts/Gilroy/Gilroy-Medium.woff2 new file mode 100644 index 0000000..2764710 Binary files /dev/null and b/src/Fonts/Gilroy/Gilroy-Medium.woff2 differ diff --git a/src/Fonts/Gilroy/Gilroy-MediumItalic.woff b/src/Fonts/Gilroy/Gilroy-MediumItalic.woff new file mode 100644 index 0000000..e47e0fc Binary files /dev/null and b/src/Fonts/Gilroy/Gilroy-MediumItalic.woff differ diff --git a/src/Fonts/Gilroy/Gilroy-MediumItalic.woff2 b/src/Fonts/Gilroy/Gilroy-MediumItalic.woff2 new file mode 100644 index 0000000..4e53ac1 Binary files /dev/null and b/src/Fonts/Gilroy/Gilroy-MediumItalic.woff2 differ diff --git a/src/Fonts/Gilroy/Gilroy-Regular.woff b/src/Fonts/Gilroy/Gilroy-Regular.woff new file mode 100644 index 0000000..c0e4821 Binary files /dev/null and b/src/Fonts/Gilroy/Gilroy-Regular.woff differ diff --git a/src/Fonts/Gilroy/Gilroy-Regular.woff2 b/src/Fonts/Gilroy/Gilroy-Regular.woff2 new file mode 100644 index 0000000..64fd436 Binary files /dev/null and b/src/Fonts/Gilroy/Gilroy-Regular.woff2 differ diff --git a/src/Fonts/Gilroy/Gilroy-RegularItalic.woff b/src/Fonts/Gilroy/Gilroy-RegularItalic.woff new file mode 100644 index 0000000..ea4e209 Binary files /dev/null and b/src/Fonts/Gilroy/Gilroy-RegularItalic.woff differ diff --git a/src/Fonts/Gilroy/Gilroy-RegularItalic.woff2 b/src/Fonts/Gilroy/Gilroy-RegularItalic.woff2 new file mode 100644 index 0000000..928cd6f Binary files /dev/null and b/src/Fonts/Gilroy/Gilroy-RegularItalic.woff2 differ diff --git a/src/Fonts/Gilroy/Gilroy-SemiBold.woff b/src/Fonts/Gilroy/Gilroy-SemiBold.woff new file mode 100644 index 0000000..d748f19 Binary files /dev/null and b/src/Fonts/Gilroy/Gilroy-SemiBold.woff differ diff --git a/src/Fonts/Gilroy/Gilroy-SemiBold.woff2 b/src/Fonts/Gilroy/Gilroy-SemiBold.woff2 new file mode 100644 index 0000000..d193f13 Binary files /dev/null and b/src/Fonts/Gilroy/Gilroy-SemiBold.woff2 differ diff --git a/src/Fonts/Gilroy/Gilroy-SemiBoldItalic.woff b/src/Fonts/Gilroy/Gilroy-SemiBoldItalic.woff new file mode 100644 index 0000000..67fd476 Binary files /dev/null and b/src/Fonts/Gilroy/Gilroy-SemiBoldItalic.woff differ diff --git a/src/Fonts/Gilroy/Gilroy-SemiBoldItalic.woff2 b/src/Fonts/Gilroy/Gilroy-SemiBoldItalic.woff2 new file mode 100644 index 0000000..b3f1003 Binary files /dev/null and b/src/Fonts/Gilroy/Gilroy-SemiBoldItalic.woff2 differ diff --git a/src/Fonts/Gilroy/Gilroy-Thin.woff b/src/Fonts/Gilroy/Gilroy-Thin.woff new file mode 100644 index 0000000..de7fe31 Binary files /dev/null and b/src/Fonts/Gilroy/Gilroy-Thin.woff differ diff --git a/src/Fonts/Gilroy/Gilroy-Thin.woff2 b/src/Fonts/Gilroy/Gilroy-Thin.woff2 new file mode 100644 index 0000000..395956c Binary files /dev/null and b/src/Fonts/Gilroy/Gilroy-Thin.woff2 differ diff --git a/src/Fonts/Gilroy/Gilroy-ThinItalic.woff b/src/Fonts/Gilroy/Gilroy-ThinItalic.woff new file mode 100644 index 0000000..a58b56e Binary files /dev/null and b/src/Fonts/Gilroy/Gilroy-ThinItalic.woff differ diff --git a/src/Fonts/Gilroy/Gilroy-ThinItalic.woff2 b/src/Fonts/Gilroy/Gilroy-ThinItalic.woff2 new file mode 100644 index 0000000..f0ff62b Binary files /dev/null and b/src/Fonts/Gilroy/Gilroy-ThinItalic.woff2 differ diff --git a/src/Fonts/Gilroy/Gilroy-UltraLight.woff b/src/Fonts/Gilroy/Gilroy-UltraLight.woff new file mode 100644 index 0000000..dccc924 Binary files /dev/null and b/src/Fonts/Gilroy/Gilroy-UltraLight.woff differ diff --git a/src/Fonts/Gilroy/Gilroy-UltraLight.woff2 b/src/Fonts/Gilroy/Gilroy-UltraLight.woff2 new file mode 100644 index 0000000..b96c8ad Binary files /dev/null and b/src/Fonts/Gilroy/Gilroy-UltraLight.woff2 differ diff --git a/src/Fonts/Gilroy/Gilroy-UltraLightItalic.woff b/src/Fonts/Gilroy/Gilroy-UltraLightItalic.woff new file mode 100644 index 0000000..d200b1c Binary files /dev/null and b/src/Fonts/Gilroy/Gilroy-UltraLightItalic.woff differ diff --git a/src/Fonts/Gilroy/Gilroy-UltraLightItalic.woff2 b/src/Fonts/Gilroy/Gilroy-UltraLightItalic.woff2 new file mode 100644 index 0000000..0a4014f Binary files /dev/null and b/src/Fonts/Gilroy/Gilroy-UltraLightItalic.woff2 differ diff --git a/src/Fonts/Gilroy/demo.html b/src/Fonts/Gilroy/demo.html new file mode 100644 index 0000000..ca25daa --- /dev/null +++ b/src/Fonts/Gilroy/demo.html @@ -0,0 +1,743 @@ + + + + + + + + + Transfonter demo + + + + +

☞Gilroy-Bold

.your-style {
+    font-family: 'Gilroy';
+    font-weight: bold;
+    font-style: normal;
+}

+<link rel="preload" href="Gilroy-Bold.woff2" as="font" type="font/woff2" crossorigin>

+ abcdefghijklmnopqrstuvwxyz
+ABCDEFGHIJKLMNOPQRSTUVWXYZ
+ 0123456789.:,;()*!?'@#<>$%&^+-=~ +