clean
This commit is contained in:
Moaz Dawalibi
parent
5e8b01caeb
commit
e113687c91
|
|
@ -5,7 +5,6 @@ import "swiper/css/navigation";
|
|||
import "swiper/css/pagination";
|
||||
import "swiper/css/scrollbar";import { A11y, Autoplay, Navigation,Scrollbar } from 'swiper/modules';
|
||||
import Spinner from '../Utils/Loading/Spinner';
|
||||
import TeamCard from '../Ui/TeamCard';
|
||||
import CheckoutCard from './CheckoutCard';
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
import React from 'react'
|
||||
import { CiMail } from "react-icons/ci";
|
||||
import { FaPhoneFlip } from "react-icons/fa6";
|
||||
import { SlPrinter } from "react-icons/sl";
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
import React from 'react'
|
||||
import { DistributorArray, DistributorArray2 } from '../../data/Distributor'
|
||||
import DistributorWord from '../Ui/DistributorWord'
|
||||
import AnimationButton from '../Ui/AnimationButton'
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
import type { CollapseProps } from "antd";
|
||||
import { Collapse } from "antd";
|
||||
import React, { useState } from 'react';
|
||||
import { useTranslation } from "react-i18next";
|
||||
import classNames from 'classnames';
|
||||
import CollapsChildren from "./CollapsChildren";
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,5 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import { Pagination } from 'antd';
|
||||
import DocumentCard from './DocumentCard';
|
||||
import { useNavigate, useLocation } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useWindowResize } from '../../Hooks/useWindowResize';
|
||||
import { useGetCertificate } from '../../api/certificate';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,16 +1,12 @@
|
|||
import React from 'react'
|
||||
|
||||
const DocumentCard = ({name,text,image}:any) => {
|
||||
|
||||
const DocumentCard = ({name,image}:any) => {
|
||||
|
||||
return (
|
||||
<div className='Document_card'>
|
||||
<div className="image_container">
|
||||
<img src={image} alt="document_card" />
|
||||
</div>
|
||||
|
||||
<h1>{name}</h1>
|
||||
{/* <p>{text}</p> */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
import { useState } from 'react';
|
||||
import type { DrawerProps } from 'antd';
|
||||
import { Drawer, Space } from 'antd';
|
||||
import { TiDeleteOutline } from "react-icons/ti";
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
import React from 'react'
|
||||
import { IoIosArrowForward } from "react-icons/io";
|
||||
|
||||
const ComprehensivePurchase = () => {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
import React from 'react'
|
||||
import HeroSwiper from './HeroSwiper'
|
||||
import AnimationButton from '../Ui/AnimationButton';
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ import "swiper/css/navigation";
|
|||
import "swiper/css/pagination";
|
||||
import "swiper/css/scrollbar";import { A11y, Autoplay, Navigation,Scrollbar } from 'swiper/modules';
|
||||
import Spinner from '../Utils/Loading/Spinner';
|
||||
import TeamCard from '../Ui/TeamCard';
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
import { useState, useEffect } from "react";
|
||||
import { useLocation, useNavigate } from "react-router-dom";
|
||||
import { PaginationAntd, PaginationMeta } from "../../type/pagination";
|
||||
|
||||
interface Data {
|
||||
|
|
@ -8,7 +6,6 @@ interface Data {
|
|||
|
||||
const usePagination = (data: Data) => {
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
|
||||
const [pagination, setPagination] = useState<PaginationAntd>({
|
||||
current: data?.meta?.current_page || 1,
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
import React from 'react'
|
||||
import { partnerArray } from '../../data/Partner';
|
||||
|
||||
const Partner = () => {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
import React from "react";
|
||||
import { Checkbox } from "antd";
|
||||
import type { CheckboxProps } from "antd";
|
||||
import { useFilterStateState } from "../../zustand/Filter";
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
import { useNavigate } from 'react-router-dom';
|
||||
import { languageObject } from '../Utils/languageObject';
|
||||
|
||||
const ProductCard = ({data}:any) => {
|
||||
|
||||
const navigate = useNavigate();
|
||||
const productLink = `/product/${data?.id}`
|
||||
console.log(data);
|
||||
|
||||
return (
|
||||
<div className="product_card">
|
||||
|
|
|
|||
|
|
@ -5,20 +5,21 @@ import "swiper/css/navigation";
|
|||
import "swiper/css/pagination";
|
||||
import "swiper/css/scrollbar";import { A11y, Autoplay, Navigation,Scrollbar } from 'swiper/modules';
|
||||
import Spinner from '../Utils/Loading/Spinner';
|
||||
import ProductCard from './ProductCard';
|
||||
|
||||
|
||||
|
||||
const SingleProductSwiper = ({data,isLoading}:{data:any,isLoading:boolean}) => {
|
||||
const [mainImage, setMainImage] = useState(data?.file);
|
||||
console.log(data?.data?.attachment);
|
||||
const SingleProductSwiper = ({data,isLoading,changeMainImage,mainImage}:{data:any,isLoading:boolean,changeMainImage:any,mainImage:any}) => {
|
||||
|
||||
const handleImageClick = (image:any) => {
|
||||
setMainImage(image);
|
||||
};
|
||||
return (
|
||||
<div className='single_product_Swiper'>
|
||||
<Swiper
|
||||
const handleImageClick = (image:any) => {
|
||||
changeMainImage(image);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className='single_product_Swiper'>
|
||||
{/* <div className="return_to_main_image_container " onClick={() => handleImageClick(data?.data?.file)}>
|
||||
<img src={''} alt="Main Product Image" className='multi_image' />
|
||||
</div> */}
|
||||
<Swiper
|
||||
dir={'ltr'}
|
||||
slidesPerView={3}
|
||||
spaceBetween={66}
|
||||
|
|
@ -41,11 +42,13 @@ console.log(data?.data?.attachment);
|
|||
return(
|
||||
<SwiperSlide key={id}>
|
||||
<div key={id} className="image_container" onClick={() => handleImageClick(attachment)}>
|
||||
|
||||
<img src={attachment} alt={`product_multi_image_${id}`} className='multi_image' />
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
)
|
||||
})}
|
||||
{/* <img src={data?.data?.file} className='multi_image' /> */}
|
||||
</Swiper>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
import React from 'react'
|
||||
import { ServicesArray } from '../../data/Service';
|
||||
|
||||
const Service = () => {
|
||||
const {t} = useTranslation();
|
||||
|
|
@ -12,22 +10,6 @@ const Service = () => {
|
|||
<source className="service_image" srcSet="/Service/ServicesRes.png" media="(max-width: 600px)" />
|
||||
<img className="service_image" src="/Service/Services.png" alt="MDN" />
|
||||
</picture>
|
||||
{/* <ServiceImage/> */}
|
||||
{/* <picture>
|
||||
<source className="service_image" srcSet="/Service/serviceRes.svg" media="(max-width: 600px)" />
|
||||
<img className="service_image" src="/Service/service.svg" alt="MDN" />
|
||||
<div className='single_services_container'>
|
||||
{
|
||||
ServicesArray.map((e) =>(
|
||||
<div className='single_service'>
|
||||
<h1>{t(e.title)}</h1>
|
||||
<p>{t(e.text)}</p>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</picture> */}
|
||||
{/* <img src="/Service/service.svg" alt="" /> */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,57 +0,0 @@
|
|||
.TalabeeField{
|
||||
>*{
|
||||
width: 100%;
|
||||
}
|
||||
.text,.ant-form-item{
|
||||
margin-bottom:7px !important;
|
||||
|
||||
}
|
||||
|
||||
>span{
|
||||
margin-bottom: 0px !important;
|
||||
&:focus-within{
|
||||
border-color: var(--primary) ;
|
||||
box-shadow: 0 0 0 1px var(--primary);
|
||||
cursor: pointer;
|
||||
}
|
||||
&:has(.is-invalid){
|
||||
border-color: red !important;
|
||||
|
||||
}
|
||||
input{
|
||||
color: var(--text);
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
input:-webkit-autofill,
|
||||
input:-webkit-autofill:hover,
|
||||
input:-webkit-autofill:focus,
|
||||
input:-webkit-autofill:active{
|
||||
-webkit-box-shadow: 0 0 0 30px white inset !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-upload-select{
|
||||
width: 100%;
|
||||
}
|
||||
.Checkboxs{
|
||||
padding: 4%;
|
||||
}
|
||||
.SearchField{
|
||||
button{
|
||||
background: var(--primary);
|
||||
}
|
||||
}
|
||||
.text{
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
input:disabled{
|
||||
color: var(--text) !important;
|
||||
}
|
||||
|
||||
|
||||
.error{
|
||||
color: red;
|
||||
}
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
import React from "react";
|
||||
import "./TalabeeField.scss";
|
||||
import { Date, Time, File, DataRange, SelectField, Default, CheckboxField } from './View';
|
||||
|
||||
export interface TalabeeFieldProps {
|
||||
name: string;
|
||||
type?: "text" | "Select" | "DataRange" | "Date" | "Time" | "File" | "number" | "Checkbox" | "password";
|
||||
placeholder?: string;
|
||||
label?: string;
|
||||
className?: string;
|
||||
option?: any[];
|
||||
isMulti?: boolean;
|
||||
isDisabled?: boolean;
|
||||
picker?: "data" | "week" | "month" | "quarter" | "year";
|
||||
Format?: "YYYY/MM/DD" | "MM/DD" | "YYYY/MM";
|
||||
onChange?: (value: any) => void;
|
||||
Group?: boolean
|
||||
dir?:'ltr' | "rtl"
|
||||
inputType?:String
|
||||
}
|
||||
|
||||
const TalabeeField = (props: TalabeeFieldProps) => {
|
||||
switch (props?.type) {
|
||||
case 'Select':
|
||||
return <SelectField {...props} />;
|
||||
case "DataRange":
|
||||
return <DataRange {...props} />;
|
||||
case "Date":
|
||||
return <Date {...props} />;
|
||||
case "Time":
|
||||
return <Time {...props} />;
|
||||
case "File":
|
||||
return <File {...props} />;
|
||||
case "Checkbox":
|
||||
return <CheckboxField {...props} />;
|
||||
default:
|
||||
return <Default {...props} />;
|
||||
}
|
||||
};
|
||||
|
||||
TalabeeField.defaultProps = {
|
||||
type: "text",
|
||||
className: 'default-class',
|
||||
option: [],
|
||||
isMulti: false,
|
||||
isDisabled: false,
|
||||
picker: "date",
|
||||
Format: "YYYY/MM/DD",
|
||||
onChange: undefined,
|
||||
Group:false,
|
||||
dir : "ltr",
|
||||
inputType: "text"
|
||||
|
||||
};
|
||||
|
||||
export default TalabeeField;
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
import React from 'react'
|
||||
import useFormField from '../../../../Hooks/useFormField';
|
||||
import { Checkbox } from 'antd';
|
||||
|
||||
const CheckboxField = ({ name, label, placeholder, isDisabled, option, isMulti, onChange,Group, props }: any) => {
|
||||
|
||||
const { t, formik } = useFormField(name, props)
|
||||
const CheckboxhandleChange = (value:any) => {
|
||||
console.log(value.target.checked);
|
||||
|
||||
formik.setFieldValue(name, value.target.checked)
|
||||
|
||||
};
|
||||
return (
|
||||
<div className={Group ? "d-inline mt-3 Checkboxs" :``}>
|
||||
<Checkbox
|
||||
onChange={onChange || CheckboxhandleChange}
|
||||
disabled={isDisabled}
|
||||
checked={formik.getFieldProps(name).value}
|
||||
|
||||
>
|
||||
{t(label)}
|
||||
</Checkbox>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CheckboxField
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
import { Form, DatePicker } from 'antd'
|
||||
|
||||
import React from 'react'
|
||||
import useFormField from '../../../../Hooks/useFormField';
|
||||
|
||||
const { RangePicker } = DatePicker;
|
||||
|
||||
const DataRange = ({ name, label, isDisabled, option, isMulti,Format ,props }: any) => {
|
||||
|
||||
const { errorMsg, isError, t, formik } = useFormField(name, props)
|
||||
const onCalendarChange = (value: any) => {
|
||||
|
||||
formik.setFieldValue(name, value)
|
||||
|
||||
};
|
||||
return (
|
||||
|
||||
<div className='TalabeeField'>
|
||||
<label htmlFor={name} className="text">
|
||||
{t(`${label}`)}
|
||||
</label>
|
||||
<Form.Item
|
||||
hasFeedback
|
||||
validateStatus={isError ? "error" : ""}
|
||||
help={isError ? errorMsg : ""}
|
||||
>
|
||||
<RangePicker
|
||||
allowClear
|
||||
className='w-100'
|
||||
format={Format}
|
||||
onCalendarChange={onCalendarChange}
|
||||
/>
|
||||
|
||||
|
||||
</Form.Item>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default DataRange
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
import { Form, DatePicker } from 'antd'
|
||||
import React from 'react'
|
||||
import useFormField from '../../../../Hooks/useFormField';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
const Date = ({ name, label, isDisabled, option, isMulti,picker="date" ,props }: any) => {
|
||||
|
||||
const { errorMsg, isError, t, formik } = useFormField(name, props)
|
||||
const onCalendarChange = (value: any) => {
|
||||
|
||||
formik.setFieldValue(name, value)
|
||||
|
||||
};
|
||||
return (
|
||||
|
||||
<div className='TalabeeField'>
|
||||
<label htmlFor={name} className="text">
|
||||
{t(`${label}`)}
|
||||
</label>
|
||||
<Form.Item
|
||||
hasFeedback
|
||||
validateStatus={isError ? "error" : ""}
|
||||
help={isError ? errorMsg : ""}
|
||||
>
|
||||
<DatePicker
|
||||
picker={picker}
|
||||
allowClear
|
||||
className='w-100'
|
||||
// defaultValue={formik.values[name]}
|
||||
|
||||
onChange={onCalendarChange} />
|
||||
|
||||
|
||||
|
||||
</Form.Item>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Date
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
import { Form, Input } from 'antd'
|
||||
import React from 'react'
|
||||
import useFormField from '../../../../Hooks/useFormField';
|
||||
|
||||
const Default = ({ name, label, placeholder, isDisabled, onChange, props,inputType }: any) => {
|
||||
const { Field, formik, isError, errorMsg, t } = useFormField(name, props);
|
||||
|
||||
|
||||
return (
|
||||
<div className="TalabeeField">
|
||||
<label htmlFor={name} className="text">
|
||||
{t(`${label ? label : name}`)}
|
||||
</label>
|
||||
<Form.Item
|
||||
hasFeedback
|
||||
validateStatus={isError ? 'error' : ''}
|
||||
help={isError ? t(name)+ ' ' + t('is requierd') : ''}
|
||||
>
|
||||
<Field
|
||||
as={Input}
|
||||
type={inputType ? inputType : 'text'}
|
||||
placeholder={t(`${placeholder ?placeholder : name}`)}
|
||||
name={name}
|
||||
disabled={isDisabled}
|
||||
// onChange={onChange ? onChange : handleChange}
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Default;
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
import { Button, Upload, UploadFile } from 'antd'
|
||||
import useFormField from '../../../../Hooks/useFormField';
|
||||
import { UploadOutlined } from '@ant-design/icons';
|
||||
import { BaseURL, IMAGE_BASE_URL } from '../../../../api/config';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { ErrorMessage } from 'formik';
|
||||
|
||||
|
||||
const File = ({ name, label, onChange, isDisabled, props }: any) => {
|
||||
const { formik, t } = useFormField(name, props)
|
||||
const imageUrl = formik.values[name] ? IMAGE_BASE_URL + formik.values[name] : '';
|
||||
|
||||
const fileList: UploadFile[] = [
|
||||
|
||||
{
|
||||
uid: '-1',
|
||||
name: '',
|
||||
status: 'done',
|
||||
url: imageUrl,
|
||||
thumbUrl: imageUrl,
|
||||
}
|
||||
];
|
||||
const FilehandleChange = (value: any) => {
|
||||
|
||||
formik.setFieldValue(name, value.file.originFileObj)
|
||||
|
||||
};
|
||||
const customRequest = async ({ onSuccess }: any) => {
|
||||
onSuccess();
|
||||
};
|
||||
return (
|
||||
<div className="TalabeeField">
|
||||
<label htmlFor={name} className="text">
|
||||
{t(`${label || name}`)}
|
||||
</label>
|
||||
|
||||
<Upload
|
||||
disabled={isDisabled}
|
||||
listType="picture"
|
||||
maxCount={1}
|
||||
className='w-100'
|
||||
defaultFileList={[...fileList]}
|
||||
onChange={onChange || FilehandleChange}
|
||||
customRequest={customRequest}
|
||||
|
||||
>
|
||||
<Button className='w-100' icon={<UploadOutlined />}>{t("upload_image")}</Button>
|
||||
<ErrorMessage name={name}>{msg => <div className='error'>{t(msg)}</div>}</ErrorMessage>
|
||||
|
||||
</Upload>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default File
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
import { Input } from 'antd';
|
||||
import { SearchProps } from 'antd/es/input'
|
||||
import { useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
|
||||
const { Search } = Input;
|
||||
|
||||
const SearchField = () => {
|
||||
const navigate = useNavigate()
|
||||
const [searchParams,] = useSearchParams();
|
||||
const location =useLocation()
|
||||
const {t} = useTranslation();
|
||||
|
||||
const [searchValue, setSearchValue] = useState(searchParams.get('search')|| "");
|
||||
|
||||
const onSearch: SearchProps['onSearch'] = (value, _e, info) => {
|
||||
// console.log(value);
|
||||
|
||||
navigate(`${location?.pathname}?search=${value}`, { replace: true });
|
||||
}
|
||||
const onChange = (e :any) => {
|
||||
setSearchValue(e.target.value);
|
||||
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className='SearchField'>
|
||||
<Search
|
||||
allowClear
|
||||
enterButton={t("search")}
|
||||
size="middle"
|
||||
placeholder={t("search")}
|
||||
onSearch={onSearch}
|
||||
style={{ width: 250 }}
|
||||
value={searchValue}
|
||||
onChange={onChange}
|
||||
/>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default SearchField
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
import { Form, Select } from 'antd'
|
||||
import React from 'react'
|
||||
import useFormField from '../../../../Hooks/useFormField';
|
||||
|
||||
const SelectField = ({ name, label, placeholder, isDisabled,option,isMulti,onChange, props}: any) => {
|
||||
|
||||
const { errorMsg, isError, t ,formik} = useFormField(name, props)
|
||||
const SelecthandleChange = (value: { value: string; label: React.ReactNode }) => {
|
||||
formik.setFieldValue(name, value)
|
||||
|
||||
};
|
||||
return (
|
||||
<div className='TalabeeField'>
|
||||
<label htmlFor={name} className="text">
|
||||
{t(`${label? label : ''}`)}
|
||||
</label>
|
||||
<Form.Item
|
||||
hasFeedback
|
||||
validateStatus={isError ? "error" : ""}
|
||||
help={isError ? errorMsg : ""}
|
||||
>
|
||||
<Select
|
||||
placeholder={t(`${placeholder ?placeholder : name}`)}
|
||||
disabled={isDisabled}
|
||||
options={option}
|
||||
defaultValue={formik.values[name]}
|
||||
allowClear
|
||||
{...(isMulti && { mode: "multiple" })}
|
||||
onChange={onChange || SelecthandleChange}
|
||||
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default SelectField
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
import { Form, TimePicker } from 'antd'
|
||||
import React from 'react'
|
||||
import useFormField from '../../../../Hooks/useFormField';
|
||||
|
||||
const Time = ({ name, label,props }: any) => {
|
||||
|
||||
const { errorMsg, isError, t, formik } = useFormField(name, props)
|
||||
const onCalendarChange = (value: any) => {
|
||||
|
||||
formik.setFieldValue(name, value)
|
||||
|
||||
};
|
||||
return (
|
||||
|
||||
<div className='TalabeeField'>
|
||||
<label htmlFor={name} className="text">
|
||||
{t(`${label}`)}
|
||||
</label>
|
||||
<Form.Item
|
||||
hasFeedback
|
||||
validateStatus={isError ? "error" : ""}
|
||||
help={isError ? errorMsg : ""}
|
||||
>
|
||||
<TimePicker
|
||||
allowClear
|
||||
className='w-100'
|
||||
defaultValue={formik.values[name]}
|
||||
onChange={onCalendarChange} />
|
||||
|
||||
|
||||
|
||||
|
||||
</Form.Item>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Time
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
import Time from "./Time";
|
||||
import SelectField from "./SelectField";
|
||||
import Date from "./Date";
|
||||
import DataRange from "./DataRange";
|
||||
import CheckboxField from "./CheckboxField";
|
||||
import Default from "./Default";
|
||||
import File from "./File";
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
export {
|
||||
Time,
|
||||
SelectField,
|
||||
Date,
|
||||
DataRange,
|
||||
CheckboxField,
|
||||
Default,
|
||||
File
|
||||
|
||||
}
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
import { useState } from 'react';
|
||||
import { ErrorMessage, useField, Field, useFormikContext } from 'formik';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { FaExclamationCircle } from 'react-icons/fa';
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
export {
|
||||
useState,
|
||||
ErrorMessage, useField, Field, useFormikContext,
|
||||
useTranslation,
|
||||
FaExclamationCircle
|
||||
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import React from 'react'
|
||||
|
||||
const Works = () => {
|
||||
return (
|
||||
<div>Works</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Works
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
import { useRef, useState } from 'react';
|
||||
import { Swiper, SwiperSlide } from 'swiper/react';
|
||||
import 'swiper/css';
|
||||
import 'swiper/css/free-mode';
|
||||
import 'swiper/css/pagination';
|
||||
import { A11y, Autoplay, Navigation, Scrollbar } from 'swiper/modules';
|
||||
import { IMAGE_BASE_URL } from '../../api/config';
|
||||
import Spinner from '../Utils/Loading/Spinner';
|
||||
|
||||
|
||||
|
||||
const WorksSwiper = ({ data, isLoading }: { data: any, isLoading: boolean }) => {
|
||||
|
||||
return (
|
||||
<div className='works_Swiper'>
|
||||
<Swiper
|
||||
dir={'ltr'}
|
||||
slidesPerView={5}
|
||||
spaceBetween={66}
|
||||
breakpoints={{
|
||||
0: { slidesPerView: 1 },
|
||||
400: { slidesPerView: 1 },
|
||||
600: { slidesPerView: 3 },
|
||||
900: { slidesPerView: 4 },
|
||||
1200: { slidesPerView: 5 },
|
||||
1500: { slidesPerView: 5 },
|
||||
}}
|
||||
autoplay={true}
|
||||
modules={[Navigation, Scrollbar, A11y, Autoplay]}
|
||||
pagination={{ clickable: true }}
|
||||
className="mySwiper"
|
||||
>
|
||||
{
|
||||
isLoading ? <Spinner /> :
|
||||
data?.map((item: any, index: number) => (
|
||||
<SwiperSlide key={index}>
|
||||
<img src={IMAGE_BASE_URL + item?.image} alt="Works" />
|
||||
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default WorksSwiper;
|
||||
|
|
@ -1,9 +1,6 @@
|
|||
import * as Yup from 'yup';
|
||||
|
||||
export const getInitialValues = (values:any)=>{
|
||||
|
||||
// Implemnt Your Auth Code
|
||||
// navigate('/', { replace: true })
|
||||
}
|
||||
|
||||
export const getValidationSchema = (t:any) => {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
import React from 'react';
|
||||
import Header from './NavBar/Header';
|
||||
import NavBar from './NavBar/NavBar';
|
||||
import Footer from './Footer/Footer';
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
import { HedaerLinksArray } from '../../data/HeaderLinks'
|
||||
import AnimationButton from '../../Components/Ui/AnimationButton';
|
||||
import NavBarMenu from './NavBarMenu';
|
||||
import ViewSearch from '../../Components/Utils/Search/Search';
|
||||
import SearchButton from '../../Components/Utils/Search/SearchButton';
|
||||
|
||||
const NavBar = () => {
|
||||
|
|
@ -12,13 +10,10 @@ const NavBar = () => {
|
|||
<div className='header_container'>
|
||||
|
||||
<div className='image_container'>
|
||||
{/* { isLoading ? <Spinner/> : */}
|
||||
<img src={'/Logo/Logo.png'} alt='Logo'/>
|
||||
{/* } */}
|
||||
</div>
|
||||
<div className='Header_links'>
|
||||
{
|
||||
// isLoading ? <Spinner/> :
|
||||
HedaerLinksArray.map((link,index) => {
|
||||
const drawerLinkClass = link.isOnlyDrawer ? 'only_drawer' : '';
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ import { MenuOutlined } from '@ant-design/icons';
|
|||
import { HedaerLinksArray } from '../../data/HeaderLinks';
|
||||
import DrawerLink from '../../Components/Ui/DrawerLink';
|
||||
import { THeaderPage } from '../../type/app';
|
||||
import { IMAGE_BASE_URL } from '../../api/config';
|
||||
import Spinner from '../../Components/Utils/Loading/Spinner';
|
||||
import SearchButton from '../../Components/Utils/Search/SearchButton';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
import React from 'react'
|
||||
import AnimationButton from '../Components/Ui/AnimationButton';
|
||||
|
||||
const NotFound = () => {
|
||||
|
|
|
|||
|
|
@ -2,10 +2,8 @@ import About from '../../Components/about/About'
|
|||
import OurTeam from '../../Components/OurTeam/OurTeam';
|
||||
import Partner from '../../Components/Partner/Partner';
|
||||
import HeaderLink from '../../Components/Ui/HeaderLink';
|
||||
import { useFetchData } from '../../Hooks/useFetchData';
|
||||
|
||||
const AboutUS = () => {
|
||||
const { data, isLoading } = useFetchData('api/home');
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
import Contact from "../../Components/contact/Contact"
|
||||
import HeaderLink from "../../Components/Ui/HeaderLink";
|
||||
import { useFetchData } from "../../Hooks/useFetchData";
|
||||
|
||||
const Page = () => {
|
||||
const { data, isLoading } = useFetchData('api/home');
|
||||
|
||||
return (
|
||||
<div className='contact_container'>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,7 @@
|
|||
import DistributorCollaps from "../../Components/Distributor/DistributorCollaps";
|
||||
import DistributorWord from "../../Components/Ui/DistributorWord";
|
||||
import HeaderLink from "../../Components/Ui/HeaderLink";
|
||||
import { useFetchData } from "../../Hooks/useFetchData";
|
||||
|
||||
const Page = () => {
|
||||
const { data, isLoading } = useFetchData('api/home');
|
||||
const {t} = useTranslation();
|
||||
return (
|
||||
<div className='Distributors_page'>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
import React from 'react'
|
||||
import DocumentCard from '../../Components/Document/DocumentCard'
|
||||
import HeaderLink from '../../Components/Ui/HeaderLink'
|
||||
import { useGetCertificate } from '../../api/certificate'
|
||||
|
|
|
|||
|
|
@ -1,11 +1,6 @@
|
|||
import Info from "../../Components/Info/Info"
|
||||
import { PrivacyData } from "../../data/Info";
|
||||
import { useFetchData } from "../../Hooks/useFetchData";
|
||||
|
||||
const Page = () => {
|
||||
// const { data, isLoading } = useFetchData('api/home');
|
||||
|
||||
|
||||
return (
|
||||
<Info
|
||||
headerText="Privacy Policy"
|
||||
|
|
|
|||
|
|
@ -1,9 +1,5 @@
|
|||
import React from "react";
|
||||
import type { CollapseProps } from "antd";
|
||||
import { Collapse } from "antd";
|
||||
import { IoIosArrowDown } from "react-icons/io";
|
||||
import { SlArrowDown } from "react-icons/sl";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import BrandFilter from "../../Components/Products/BrandFilter";
|
||||
import SearchButton from "../../Components/Utils/Search/SearchButton";
|
||||
import { useGetCategory } from "../../api/category";
|
||||
|
|
@ -13,9 +9,7 @@ const FilterSection = ({isLoading}:{isLoading:boolean}) => {
|
|||
const [noDataFound, setNoDataFound] = useState(false);
|
||||
const [openSearch, setOpenSearch] = useState(false);
|
||||
|
||||
// console.log(data?.data);
|
||||
const {data:category} = useGetCategory();
|
||||
// console.log(category?.data);
|
||||
|
||||
const items = category?.data?.map((e:any)=>({
|
||||
key:e.id,
|
||||
|
|
|
|||
|
|
@ -1,13 +1,9 @@
|
|||
import HeaderLink from '../../Components/Ui/HeaderLink'
|
||||
import ProductCard from '../../Components/Products/ProductCard'
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { MdOutlineCancel } from "react-icons/md";
|
||||
import { Drawer, Pagination, Select, Spin } from "antd";
|
||||
import { IoIosArrowForward } from "react-icons/io";
|
||||
import { Drawer, Pagination} from "antd";
|
||||
import { useSearchParams } from "react-router-dom";
|
||||
import { useFilterStateState } from '../../zustand/Filter';
|
||||
import FilterSection from './FilterSection';
|
||||
import SearchButton from '../../Components/Utils/Search/SearchButton';
|
||||
import { FaFilter } from "react-icons/fa";
|
||||
import { useGetProducts } from '../../api/products';
|
||||
import Spinner from '../../Components/Utils/Loading/Spinner';
|
||||
|
|
@ -20,8 +16,7 @@ const Page = () => {
|
|||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [totalItems, setTotalItems] = useState(0);
|
||||
const [perPage, setPerPage] = useState(10);
|
||||
const [noDataFound, setNoDataFound] = useState(false);
|
||||
const [openSearch, setOpenSearch] = useState(false);
|
||||
|
||||
const categories = Filter?.filter((item:any)=> item.select !== true)?.map((item:any)=> item?.id)
|
||||
|
||||
const { data , isLoading } = useGetProducts({
|
||||
|
|
@ -30,31 +25,7 @@ const Page = () => {
|
|||
category_id:categories
|
||||
});
|
||||
|
||||
// useEffect(() => {
|
||||
// setType(type_param);
|
||||
// }, [type_param]);
|
||||
|
||||
|
||||
// const handel_filter_delete = (index: number) => {
|
||||
// setFilter(Filter.filter((_: any, i: number) => i !== index));
|
||||
// };
|
||||
|
||||
// const handel_filter_reset = () => {
|
||||
// setFilter([]);
|
||||
// };
|
||||
|
||||
// const handleChange = (value: string) => {
|
||||
// const newArray = Filter?.filter((item: any) => item.select !== true);
|
||||
// setFilter([
|
||||
// ...newArray,
|
||||
// { name: value, index: Filter.length, select: true },
|
||||
// ]);
|
||||
// if (type_param) {
|
||||
// searchParams.delete('type');
|
||||
// setSearchParams(searchParams);
|
||||
// }
|
||||
// setType(value);
|
||||
// };
|
||||
|
||||
|
||||
const handlePageChange = (page: number) => {
|
||||
setCurrentPage(page);
|
||||
|
|
@ -70,10 +41,6 @@ const Page = () => {
|
|||
setOpen(false);
|
||||
};
|
||||
|
||||
// const products = Filter?.filter((item:any)=> item.select !== true)?.map((item:any)=> item?.id)
|
||||
|
||||
// console.log(products);
|
||||
|
||||
useEffect(() => {
|
||||
if (data?.meta) {
|
||||
setTotalItems(data.meta?.total);
|
||||
|
|
|
|||
|
|
@ -1,10 +1,7 @@
|
|||
import Contact from "../../Components/contact/Contact"
|
||||
import Service from "../../Components/Service/Service";
|
||||
import HeaderLink from "../../Components/Ui/HeaderLink";
|
||||
import { useFetchData } from "../../Hooks/useFetchData";
|
||||
|
||||
const Page = () => {
|
||||
const { data, isLoading } = useFetchData('api/home');
|
||||
|
||||
return (
|
||||
<div className='contact_container'>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
import { languageObject } from '../../Components/Utils/languageObject';
|
||||
import { useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import Similar from "./Similar";
|
||||
import { Spin } from "antd";
|
||||
import HeaderLink from "../../Components/Ui/HeaderLink";
|
||||
|
|
@ -28,9 +26,9 @@ const Page = () => {
|
|||
|
||||
const [mainImage, setMainImage] = useState(product?.file);
|
||||
|
||||
const handleImageClick = (image:any) => {
|
||||
setMainImage(image);
|
||||
};
|
||||
// const handleImageClick = (image:any) => {
|
||||
// setMainImage(image);
|
||||
// };
|
||||
|
||||
useEffect(() => {
|
||||
setMainImage(product?.file);
|
||||
|
|
@ -59,7 +57,7 @@ const Page = () => {
|
|||
<img src={attachment} alt={`product_multi_image_${index}`} className='multi_image' />
|
||||
</div>
|
||||
))} */}
|
||||
<SingleProductSwiper data={data} isLoading={isLoading}/>
|
||||
<SingleProductSwiper data={data} isLoading={isLoading} changeMainImage={setMainImage} mainImage={mainImage}/>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
import { useTranslation } from "react-i18next";
|
||||
import { useGetProducts } from "../../api/products";
|
||||
import ProductSwiper from '../../Components/Products/ProductSwiper';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,7 @@
|
|||
import Info from "../../Components/Info/Info"
|
||||
import { useFetchData } from "../../Hooks/useFetchData";
|
||||
|
||||
const Page = () => {
|
||||
const { data, isLoading } = useFetchData('api/home');
|
||||
|
||||
const TermsData = data?.Static_info[1];
|
||||
return (
|
||||
<Info
|
||||
headerText="Terms and Conditions"
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
import React, { ReactNode } from 'react'
|
||||
import { ReactNode } from 'react'
|
||||
import QueryProvider from './lib/ReactQueryProvider'
|
||||
import { BrowserRouter } from 'react-router-dom'
|
||||
import ToastProvider from './lib/ToastProvider'
|
||||
import ReduxT from './lib/ReduxT'
|
||||
|
||||
type ProviderContainerProps = {
|
||||
children:ReactNode
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
--whiteOpacity: #d4d4d433;
|
||||
--titleFsize: 22px;
|
||||
|
||||
|
||||
////////////////////////////////
|
||||
--fifthly: #35c6c2;
|
||||
--sixthly: #fff;
|
||||
--seven: #d90217;
|
||||
|
|
|
|||
|
|
@ -18,7 +18,6 @@
|
|||
position: absolute;
|
||||
background: var(--primary);
|
||||
content: "";
|
||||
// bottom: 0px !important;
|
||||
left:0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,6 @@
|
|||
overflow: hidden;
|
||||
img{
|
||||
width: 290px;
|
||||
// max-height: 200px;
|
||||
transition: ease-in-out .3s;
|
||||
border-radius: 20px;
|
||||
object-fit: fill;
|
||||
|
|
@ -22,7 +21,7 @@
|
|||
}
|
||||
.truncate-text{
|
||||
width: 90%;
|
||||
max-width: 100%; /* Adjust as needed */
|
||||
max-width: 100%;
|
||||
font-size: 16px !important;
|
||||
padding-block: 10px;
|
||||
text-align: center;
|
||||
|
|
@ -51,7 +50,6 @@
|
|||
min-height: 220px;
|
||||
img{
|
||||
width: 260px;
|
||||
// min-height: 160px;
|
||||
}
|
||||
}
|
||||
.truncate-text{
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@
|
|||
font-size: 20px;
|
||||
}
|
||||
h5{
|
||||
// opacity: .9;
|
||||
color: rgba(43, 43, 43, 1);
|
||||
font-weight: 600;
|
||||
text-transform: capitalize;
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
.Layout_Body{
|
||||
// height: 200vh;
|
||||
}
|
||||
|
|
@ -157,7 +157,6 @@
|
|||
|
||||
.button_container{
|
||||
width: 50%;
|
||||
// @include Flex;
|
||||
margin-inline: auto;
|
||||
.contact_button{
|
||||
display: flex !important;justify-content: center !important;align-items: center !important;
|
||||
|
|
|
|||
|
|
@ -110,7 +110,6 @@
|
|||
.ant-collapse > .ant-collapse-item > .ant-collapse-header .ant-collapse-header-text {
|
||||
font-size: max(20px,1.8vw);
|
||||
font-weight: 500;
|
||||
// width: 10px !important;
|
||||
}
|
||||
.ant-collapse-item{
|
||||
@include Flex; flex-direction: column;
|
||||
|
|
@ -217,7 +216,6 @@
|
|||
.ant-collapse > .ant-collapse-item > .ant-collapse-header .ant-collapse-header-text {
|
||||
font-size: 18px !important;
|
||||
font-weight: 500;
|
||||
// width: 1px !important;
|
||||
}
|
||||
.ant-collapse-item{
|
||||
@include Flex; flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -38,7 +38,6 @@
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
// padding-inline: 16px;
|
||||
border-bottom: 1px solid var(--gray);
|
||||
.InputAutoComplete {
|
||||
width: 100% !important;
|
||||
|
|
|
|||
|
|
@ -24,30 +24,6 @@
|
|||
width: 100%;
|
||||
}
|
||||
}
|
||||
// picture{
|
||||
// width: 90%;
|
||||
// position: relative;
|
||||
// // display: flex;
|
||||
// .single_services_container{
|
||||
// display: flex;align-items: center;justify-content:space-between;
|
||||
// width: 90%;
|
||||
// margin-inline: auto ;
|
||||
// .single_service{
|
||||
// width: 100%;
|
||||
// text-align: center;
|
||||
// width: 21%;
|
||||
// position: absolute;
|
||||
// top: 40%;
|
||||
// h1{
|
||||
// font-size: 20px;
|
||||
// }
|
||||
// p{
|
||||
// font-size: 16px;
|
||||
// color: var(--gray);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
@media screen and (max-width:900px) {
|
||||
|
|
|
|||
|
|
@ -73,7 +73,27 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.return_to_main_image_container{
|
||||
@include Flex;text-align: center;
|
||||
width: 100px ;
|
||||
height: 100px;
|
||||
border: 2px solid var(--gray);
|
||||
background: var(--white);
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
margin-right: 40px;
|
||||
img{
|
||||
transition: ease-in-out .3s;
|
||||
border-radius: 20px;
|
||||
width: 100% !important;
|
||||
object-fit: fill !important;
|
||||
border: 0 !important;
|
||||
&:hover{
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
.single_product_right{
|
||||
width: 48%;
|
||||
line-height: 35px;
|
||||
|
|
@ -184,7 +204,6 @@
|
|||
text-align: center !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width:800px) {
|
||||
|
|
@ -198,8 +217,7 @@
|
|||
.single_product_left{
|
||||
width: 90%;
|
||||
.main_image_container{
|
||||
// height: 400px;
|
||||
img{
|
||||
k img{
|
||||
object-fit: fill;
|
||||
height: 100% !important;
|
||||
}
|
||||
|
|
@ -272,4 +290,29 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.single_product_Swiper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.main-image-square {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
border: 2px solid #ccc;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.main-image-thumbnail {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
|
@ -1,5 +1,3 @@
|
|||
import { Component } from "react"
|
||||
import { IconType } from "react-icons"
|
||||
|
||||
export interface ChangeModeProps{
|
||||
// useCallbackDependency:Function
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
import React from 'react'
|
||||
import { QueryClient, QueryClientProvider } from 'react-query'
|
||||
|
||||
function QueryProvider({ children }: any) {
|
||||
|
|
|
|||
|
|
@ -1,18 +0,0 @@
|
|||
//// redux provider comp ////
|
||||
|
||||
// import { store } from '../Redux/store'
|
||||
import { Provider } from 'react-redux'
|
||||
import { Tchildren } from '../Layout/NavBar/Types'
|
||||
|
||||
function ReduxT({ children }: Tchildren) {
|
||||
|
||||
return (
|
||||
''
|
||||
// <Provider store={store}>
|
||||
// {children}
|
||||
// </Provider>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
export default ReduxT
|
||||
|
|
@ -1,4 +1,3 @@
|
|||
import React from 'react'
|
||||
import { ToastContainer } from 'react-toastify'
|
||||
import 'react-toastify/dist/ReactToastify.css';
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user